diff --git a/README.md b/README.md
index 75af27c..5cecd20 100644
--- a/README.md
+++ b/README.md
@@ -70,6 +70,11 @@
 
 ## 📝 변경 이력 (Changelog)
 
+### v0.3.0 (2025-12-31)
+- **VideoJS 플레이리스트**: 비디오 플레이어에서 다음 에피소드 자동 재생
+- **플레이리스트 UI**: 이전/다음 버튼, 에피소드 목록 토글
+- **실시간 갱신**: 플레이어 열려있을 때 10초마다 새 에피소드 감지 및 알림
+
 ### v0.2.2 (2025-12-31)
 - **해상도 자동 감지**: m3u8 master playlist에서 해상도(1080p/720p 등)를 파싱하여 파일명에 반영
 - **Discord 알림 개선**: 큰 썸네일 이미지, Discord Blurple 색상, ISO 타임스탬프 적용
diff --git a/info.yaml b/info.yaml
index 778e5c7..5f9e506 100644
--- a/info.yaml
+++ b/info.yaml
@@ -1,5 +1,5 @@
 title: "애니 다운로더"
-version: "0.3.0"
+version: "0.3.1"
 package_name: "anime_downloader"
 developer: "projectdx"
 description: "anime downloader"
diff --git a/lib/ffmpeg_queue_v1.py b/lib/ffmpeg_queue_v1.py
index 0891431..0d7d525 100644
--- a/lib/ffmpeg_queue_v1.py
+++ b/lib/ffmpeg_queue_v1.py
@@ -199,15 +199,20 @@ class FfmpegQueue(object):
                 # except:
                 #    logger.debug('program path make fail!!')
                 # 파일 존재여부 체크
-                print("here...................")
-                P.logger.info(entity.info)
                 filepath = entity.get_video_filepath()
                 P.logger.debug(f"filepath:: {filepath}")
-                if os.path.exists(filepath):
+                
+                # 다운로드 방법 확인
+                download_method = P.ModelSetting.get(f"{self.name}_download_method")
+                
+                # .ytdl 파일이 있거나, ytdlp/aria2c 모드인 경우 '파일 있음'으로 건너뛰지 않음 (이어받기 허용)
+                is_ytdlp = download_method in ['ytdlp', 'aria2c']
+                has_ytdl_file = os.path.exists(filepath + ".ytdl")
+                
+                if os.path.exists(filepath) and not (is_ytdlp or has_ytdl_file):
                     entity.ffmpeg_status_kor = "파일 있음"
                     entity.ffmpeg_percent = 100
                     entity.refresh_status()
-                    # plugin.socketio_list_refresh()
                     continue
                 dirname = os.path.dirname(filepath)
                 filename = os.path.basename(filepath)
diff --git a/lib/ytdlp_downloader.py b/lib/ytdlp_downloader.py
index 219628b..46c5887 100644
--- a/lib/ytdlp_downloader.py
+++ b/lib/ytdlp_downloader.py
@@ -325,16 +325,30 @@ class YtdlpDownloader:
                     match = prog_re.search(line)
                     if match:
                         try:
-                            self.percent = float(match.group('percent'))
+                            new_percent = float(match.group('percent'))
                             speed_group = match.groupdict().get('speed')
+                            
+                            # 속도가 표시되지 않는 경우 (aria2c 등)를 위해 정규식 보완
+                            if not speed_group:
+                                # "[download]  10.5% of ~100.00MiB at  2.45MiB/s" 형태 재확인
+                                at_match = re.search(r'at\s+([\d\.]+\s*\w+/s)', line)
+                                if at_match:
+                                    speed_group = at_match.group(1)
+                            
                             if speed_group:
                                 self.current_speed = speed_group.strip()
+                            
                             if self.start_time:
                                 elapsed = time.time() - self.start_time
                                 self.elapsed_time = self.format_time(elapsed)
-                            if self.callback:
-                                logger.info(f"[yt-dlp progress] Calling callback: {int(self.percent)}% speed={self.current_speed}")
+                            
+                            # [최적화] 진행률이 1% 이상 차이나거나, 100%인 경우에만 콜백 호출 (로그 부하 감소)
+                            if self.callback and (int(new_percent) > int(self.percent) or new_percent >= 100):
+                                self.percent = new_percent
+                                logger.info(f"[yt-dlp progress] {int(self.percent)}% speed={self.current_speed}")
                                 self.callback(percent=int(self.percent), current=int(self.percent), total=100, speed=self.current_speed, elapsed=self.elapsed_time)
+                            else:
+                                self.percent = new_percent
                         except Exception as cb_err:
                             logger.warning(f"Callback error: {cb_err}")
                         break  # 한 패턴이 매칭되면 중단
@@ -371,3 +385,16 @@ class YtdlpDownloader:
     def cancel(self):
         """다운로드 취소"""
         self.cancelled = True
+        try:
+            if self.process:
+                # subprocess 종류에 따라 종료 방식 결정
+                if platform.system() == 'Windows':
+                    subprocess.run(['taskkill', '/F', '/T', '/PID', str(self.process.pid)], capture_output=True)
+                else:
+                    self.process.terminate()
+                    # 강제 종료 필요 시
+                    # import signal
+                    # os.killpg(os.getpgid(self.process.pid), signal.SIGTERM)
+                logger.info(f"Ytdlp process {self.process.pid} terminated by cancel()")
+        except Exception as e:
+            logger.error(f"Error terminating ytdlp process: {e}")
diff --git a/mod_linkkf.py b/mod_linkkf.py
index 04f4a41..d4dcca7 100644
--- a/mod_linkkf.py
+++ b/mod_linkkf.py
@@ -103,9 +103,11 @@ class LogicLinkkf(PluginModuleBase):
             "linkkf_image_url_prefix_series": "",
             "linkkf_image_url_prefix_episode": "",
             "linkkf_discord_notify": "True",
-            "linkkf_download_method": "ffmpeg",  # ffmpeg or ytdlp
+            "linkkf_download_method": "ffmpeg",  # ffmpeg, ytdlp, aria2c
+            "linkkf_download_threads": "16",     # yt-dlp/aria2c 병렬 쓰레드 수
         }
         # default_route_socketio(P, self)
+        self.web_list_model = ModelLinkkfItem
         default_route_socketio_module(self, attach="/setting")
         self.current_data = None
 
@@ -154,7 +156,7 @@ class LogicLinkkf(PluginModuleBase):
                 )
             elif sub == "screen_movie_list":
                 try:
-                    logger.debug("request:::> %s", request.form["page"])
+                    # logger.debug("request:::> %s", request.form["page"])
                     page = request.form["page"]
                     data = self.get_screen_movie_info(page)
                     dummy_data = {"ret": "success", "data": data}
@@ -270,46 +272,128 @@ class LogicLinkkf(PluginModuleBase):
                     ret["log"] = str(e)
                 return jsonify(ret)
             elif sub == "web_list":
-                return jsonify({"ret": "not_implemented"})
-            elif sub == "db_remove":
-                return jsonify({"ret": "not_implemented"})
-            elif sub == "add_whitelist":
-                try:
-                    params = request.get_json()
-                    logger.debug(f"add_whitelist params: {params}")
-                    if params and "data_code" in params:
-                        code = params["data_code"]
-                        ret = LogicLinkkf.add_whitelist(code)
-                    else:
-                        ret = LogicLinkkf.add_whitelist()
-                    return jsonify(ret)
-                except Exception as e:
-                    logger.error(f"Exception: {e}")
-                    logger.error(traceback.format_exc())
-                    return jsonify({"ret": False, "log": str(e)})
-            elif sub == "command":
-                # command = queue_command와 동일
-                cmd = request.form.get("cmd", "")
-                entity_id = request.form.get("entity_id", "")
-                
-                logger.debug(f"command endpoint - cmd: {cmd}, entity_id: {entity_id}")
-                
-                # list 명령 처리
-                if cmd == "list":
-                    if self.queue:
-                        return jsonify(self.queue.get_entity_list())
-                    else:
-                        return jsonify([])
-                
-                # 기타 명령 처리
-                if self.queue:
-                    ret = self.queue.command(cmd, int(entity_id) if entity_id else 0)
-                    if ret is None:
-                        ret = {"ret": "success"}
-                else:
-                    ret = {"ret": "error", "log": "Queue not initialized"}
+                ret = ModelLinkkfItem.web_list(req)
                 return jsonify(ret)
-            
+            elif sub == "db_remove":
+                db_id = request.form.get("id")
+                if not db_id:
+                    return jsonify({"ret": "error", "log": "No ID provided"})
+                return jsonify(ModelLinkkfItem.delete_by_id(db_id))
+
+            elif sub == "get_playlist":
+                # 현재 파일과 같은 폴더에서 다음 에피소드들 찾기
+                try:
+                    file_path = request.args.get("path", "")
+                    if not file_path or not os.path.exists(file_path):
+                        return jsonify({"error": "File not found", "playlist": [], "current_index": 0}), 404
+                    
+                    # 보안 체크
+                    download_path = P.ModelSetting.get("linkkf_download_path")
+                    if not file_path.startswith(download_path):
+                        return jsonify({"error": "Access denied", "playlist": [], "current_index": 0}), 403
+                    
+                    folder = os.path.dirname(file_path)
+                    current_file = os.path.basename(file_path)
+                    
+                    # 파일명에서 SxxExx 패턴 추출
+                    ep_match = re.search(r'\.S(\d+)E(\d+)\.', current_file, re.IGNORECASE)
+                    if not ep_match:
+                        # 패턴 없으면 현재 파일만 반환
+                        return jsonify({
+                            "playlist": [{"path": file_path, "name": current_file}],
+                            "current_index": 0
+                        })
+                    
+                    current_season = int(ep_match.group(1))
+                    current_episode = int(ep_match.group(2))
+                    
+                    # 같은 폴더의 모든 mp4 파일 가져오기
+                    all_files = []
+                    for f in os.listdir(folder):
+                        if f.endswith('.mp4'):
+                            match = re.search(r'\.S(\d+)E(\d+)\.', f, re.IGNORECASE)
+                            if match:
+                                s = int(match.group(1))
+                                e = int(match.group(2))
+                                all_files.append({
+                                    "path": os.path.join(folder, f),
+                                    "name": f,
+                                    "season": s,
+                                    "episode": e
+                                })
+                    
+                    # 시즌/에피소드 순으로 정렬
+                    all_files.sort(key=lambda x: (x["season"], x["episode"]))
+                    
+                    # 현재 에피소드 이상인 것만 필터링 (현재 + 다음 에피소드들)
+                    playlist = []
+                    current_index = 0
+                    for i, f in enumerate(all_files):
+                        if f["season"] == current_season and f["episode"] >= current_episode:
+                            entry = {"path": f["path"], "name": f["name"]}
+                            if f["episode"] == current_episode:
+                                current_index = len(playlist)
+                            playlist.append(entry)
+                    
+                    logger.info(f"Linkkf Playlist: {len(playlist)} items, current_index: {current_index}")
+                    return jsonify({
+                        "playlist": playlist,
+                        "current_index": current_index
+                    })
+                    
+                except Exception as e:
+                    logger.error(f"Get playlist error: {e}")
+                    logger.error(traceback.format_exc())
+                    return jsonify({"error": str(e), "playlist": [], "current_index": 0}), 500
+
+            elif sub == "stream_video":
+                # 비디오 스트리밍 (MP4 파일 직접 서빙)
+                try:
+                    from flask import send_file, Response, make_response
+                    import mimetypes
+                    
+                    file_path = request.args.get("path", "")
+                    if not file_path or not os.path.exists(file_path):
+                        return "File not found", 404
+                    
+                    # 보안 체크: 다운로드 경로 내에 있는지 확인
+                    download_path = P.ModelSetting.get("linkkf_download_path")
+                    if not file_path.startswith(download_path):
+                        return "Access denied", 403
+                        
+                    file_size = os.path.getsize(file_path)
+                    range_header = request.headers.get('Range', None)
+                    
+                    if not range_header:
+                        return send_file(file_path, mimetype='video/mp4', as_attachment=False)
+                    
+                    # Range Request 처리 (seeking 지원)
+                    byte1, byte2 = 0, None
+                    m = re.search('(\d+)-(\d*)', range_header)
+                    if m:
+                        g = m.groups()
+                        byte1 = int(g[0])
+                        if g[1]:
+                            byte2 = int(g[1])
+                    
+                    if byte2 is None:
+                        byte2 = file_size - 1
+                    
+                    length = byte2 - byte1 + 1
+                    
+                    with open(file_path, 'rb') as f:
+                        f.seek(byte1)
+                        data = f.read(length)
+                    
+                    rv = Response(data, 206, mimetype='video/mp4', content_type='video/mp4', direct_passthrough=True)
+                    rv.headers.add('Content-Range', 'bytes {0}-{1}/{2}'.format(byte1, byte2, file_size))
+                    rv.headers.add('Accept-Ranges', 'bytes')
+                    return rv
+                except Exception as e:
+                    logger.error(f"Stream video error: {e}")
+                    logger.error(traceback.format_exc())
+                    return jsonify({"error": str(e)}), 500
+
             # 매치되는 sub가 없는 경우 기본 응답
             return jsonify({"ret": "error", "log": f"Unknown sub: {sub}"})
 
@@ -324,7 +408,7 @@ class LogicLinkkf(PluginModuleBase):
         queue 페이지에서 list, stop 등의 명령을 처리
         """
         ret = {"ret": "success"}
-        logger.debug(f"process_command - command: {command}, arg1: {arg1}")
+        # logger.debug(f"process_command - command: {command}, arg1: {arg1}")
         
         if command == "list":
             # 큐 목록 반환
@@ -335,17 +419,37 @@ class LogicLinkkf(PluginModuleBase):
             return jsonify(ret)
         
         elif command == "stop":
-            # 다운로드 중지
+            # 다운로드 중지 (cancel)
             if self.queue and arg1:
                 try:
                     entity_id = int(arg1)
-                    result = self.queue.command("stop", entity_id)
+                    result = self.queue.command("cancel", entity_id)
                     if result:
                         ret = result
                 except Exception as e:
                     ret = {"ret": "error", "log": str(e)}
             return jsonify(ret)
         
+        elif command == "remove":
+            # 개별 항목 삭제
+            if self.queue and arg1:
+                try:
+                    entity_id = int(arg1)
+                    result = self.queue.command("remove", entity_id)
+                    if result:
+                        ret = result
+                except Exception as e:
+                    ret = {"ret": "error", "log": str(e)}
+            return jsonify(ret)
+        
+        elif command in ["reset", "delete_completed"]:
+            # 전체 초기화 또는 완료 삭제
+            if self.queue:
+                result = self.queue.command(command, 0)
+                if result:
+                    ret = result
+            return jsonify(ret)
+
         elif command == "queue_list":
             # 대기 큐 목록
             if self.queue:
@@ -934,7 +1038,7 @@ class LogicLinkkf(PluginModuleBase):
             data = {"ret": "success", "page": page}
             response_data = LogicLinkkf.get_html(url, timeout=10)
             # P.logger.debug(response_data)
-            P.logger.debug("debug.....................")
+            # P.logger.debug("debug.....................")
             # P.logger.debug(response_data)
 
             # JSON 응답인지 확인
@@ -1182,6 +1286,7 @@ class LogicLinkkf(PluginModuleBase):
                             "program_title": data["title"],
                             "save_folder": Util.change_text_for_use_filename(data["save_folder"]),
                             "title": ep_title,
+                            "ep_num": ep_name,
                             "season": data["season"],
                         }
                         
@@ -1546,6 +1651,32 @@ class LinkkfQueueEntity(FfmpegQueueEntity):
             logger.error(traceback.format_exc())
             self.url = playid_url
 
+    def download_completed(self):
+        """다운로드 완료 후 처리 (파일 이동, DB 업데이트 등)"""
+        try:
+            logger.info(f"LinkkfQueueEntity.download_completed called for index {self.entity_id}")
+            
+            from framework import app
+            with app.app_context():
+                # DB 상태 업데이트
+                db_item = ModelLinkkfItem.get_by_linkkf_id(self.info.get("_id"))
+                if db_item:
+                    db_item.status = "completed"
+                    db_item.completed_time = datetime.now()
+                    db_item.filepath = self.filepath
+                    db_item.filename = self.filename
+                    db_item.save()
+                    logger.info(f"Updated DB status to 'completed' for episode {db_item.id}")
+                else:
+                    logger.warning(f"Could not find DB item to update for _id {self.info.get('_id')}")
+                
+            # 전체 목록 갱신을 위해 소켓IO 발신 (필요 시)
+            # from framework import socketio
+            # socketio.emit("linkkf_refresh", {"idx": self.entity_id}, namespace="/framework")
+        except Exception as e:
+            logger.error(f"Error in LinkkfQueueEntity.download_completed: {e}")
+            logger.error(traceback.format_exc())
+
     def refresh_status(self):
         try:
             # from framework import socketio (FlaskFarm 표준 방식)
@@ -1571,7 +1702,7 @@ class LinkkfQueueEntity(FfmpegQueueEntity):
         
         # 템플릿이 기대하는 필드들 추가
         tmp["idx"] = self.entity_id
-        tmp["callback_id"] = f"linkkf_{self.entity_id}"
+        tmp["callback_id"] = "linkkf"
         tmp["start_time"] = self.created_time.strftime("%m-%d %H:%M") if hasattr(self, 'created_time') and self.created_time and hasattr(self.created_time, 'strftime') else (self.created_time if self.created_time else "")
         tmp["status_kor"] = self.ffmpeg_status_kor if self.ffmpeg_status_kor else "대기중"
         tmp["percent"] = self.ffmpeg_percent if self.ffmpeg_percent else 0
@@ -1646,7 +1777,7 @@ class LinkkfQueueEntity(FfmpegQueueEntity):
                             continue
                         # logger.debug(f"url: {url}, url2: {url2}")
                         ret = LogicLinkkf.get_video_url_from_url(url, url2)
-                        logger.debug(f"ret::::> {ret}")
+                        # logger.debug(f"ret::::> {ret}")
 
                         if ret is not None:
                             video_url = ret
@@ -1740,7 +1871,82 @@ class ModelLinkkfItem(db.Model):
         item.savepath = q["savepath"]
         item.video_url = q["url"]
         item.vtt_url = q["vtt"]
-        item.thumbnail = q["image"][0]
+        item.thumbnail = q.get("image", "")
         item.status = "wait"
         item.linkkf_info = q["linkkf_info"]
         item.save()
+
+    @classmethod
+    def get_paging_info(cls, count, page, page_size):
+        total_page = int(count / page_size) + (1 if count % page_size != 0 else 0)
+        start_page = (int((page - 1) / 10)) * 10 + 1
+        last_page = start_page + 9
+        if last_page > total_page:
+            last_page = total_page
+            
+        ret = {
+            "start_page": start_page,
+            "last_page": last_page,
+            "total_page": total_page,
+            "current_page": page,
+            "count": count,
+            "page_size": page_size,
+        }
+        ret["prev_page"] = True if ret["start_page"] != 1 else False
+        ret["next_page"] = (
+            True
+            if (ret["start_page"] + 10) <= ret["total_page"]
+            else False
+        )
+        return ret
+
+    @classmethod
+    def delete_by_id(cls, idx):
+        db.session.query(cls).filter_by(id=idx).delete()
+        db.session.commit()
+        return True
+
+    @classmethod
+    def web_list(cls, req):
+        ret = {}
+        page = int(req.form["page"]) if "page" in req.form else 1
+        page_size = 30
+        job_id = ""
+        search = req.form["search_word"] if "search_word" in req.form else ""
+        option = req.form["option"] if "option" in req.form else "all"
+        order = req.form["order"] if "order" in req.form else "desc"
+        query = cls.make_query(search=search, order=order, option=option)
+        count = query.count()
+        query = query.limit(page_size).offset((page - 1) * page_size)
+        lists = query.all()
+        ret["list"] = [item.as_dict() for item in lists]
+        ret["paging"] = cls.get_paging_info(count, page, page_size)
+        return ret
+
+    @classmethod
+    def make_query(cls, search="", order="desc", option="all"):
+        query = db.session.query(cls)
+        if search is not None and search != "":
+            if search.find("|") != -1:
+                tmp = search.split("|")
+                conditions = []
+                for tt in tmp:
+                    if tt != "":
+                        conditions.append(cls.filename.like("%" + tt.strip() + "%"))
+                query = query.filter(or_(*conditions))
+            elif search.find(",") != -1:
+                tmp = search.split(",")
+                for tt in tmp:
+                    if tt != "":
+                        query = query.filter(cls.filename.like("%" + tt.strip() + "%"))
+            else:
+                query = query.filter(cls.filename.like("%" + search + f"%"))
+        
+        if option == "completed":
+            query = query.filter(cls.status == "completed")
+            
+        if order == "desc":
+            query = query.order_by(desc(cls.id))
+        else:
+            query = query.order_by(cls.id)
+        return query
diff --git a/mod_ohli24.py b/mod_ohli24.py
index 4bd3ee5..cc2be21 100644
--- a/mod_ohli24.py
+++ b/mod_ohli24.py
@@ -136,6 +136,7 @@ class LogicOhli24(PluginModuleBase):
         }
         self.queue = None
         # default_route_socketio(P, self)
+        self.web_list_model = ModelOhli24Item
         default_route_socketio_module(self, attach="/queue")
 
     def cleanup_stale_temps(self) -> None:
@@ -300,7 +301,10 @@ class LogicOhli24(PluginModuleBase):
                 return jsonify(ModelOhli24Item.web_list(request))
 
             elif sub == "db_remove":
-                return jsonify(ModelOhli24Item.delete_by_id(req.form["id"]))
+                db_id = request.form.get("id")
+                if not db_id:
+                    return jsonify({"ret": "error", "log": "No ID provided"})
+                return jsonify(ModelOhli24Item.delete_by_id(db_id))
             elif sub == "add_whitelist":
                 try:
                     # params = request.get_data()
@@ -318,6 +322,7 @@ class LogicOhli24(PluginModuleBase):
                 except Exception as e:
                     logger.error(f"Exception: {e}")
                     logger.error(traceback.format_exc())
+                    return jsonify({"error": str(e)}), 500
             
             elif sub == "stream_video":
                 # 비디오 스트리밍 (MP4 파일 직접 서빙)
@@ -451,6 +456,10 @@ class LogicOhli24(PluginModuleBase):
         except Exception as e:
             P.logger.error(f"Exception: {e}")
             P.logger.error(traceback.format_exc())
+            return jsonify({"error": str(e)}), 500
+        
+        # 매칭되지 않는 sub 요청에 대한 기본 응답
+        return jsonify({"error": f"Unknown sub: {sub}"}), 404
 
     def get_episode(self, clip_id):
         for _ in self.current_data["episode"]:
diff --git a/static/js/sjva_global1.js b/static/js/sjva_global1.js
index 1fda6f4..cf7fd6c 100644
--- a/static/js/sjva_global1.js
+++ b/static/js/sjva_global1.js
@@ -47,7 +47,7 @@ function get_formdata(form_id) {
 }
 
 function globalRequestSearch2(page, move_top = true) {
-  var formData = getFormdata("#form_search")
+  var formData = get_formdata("#form_search")
   formData += "&page=" + page
   console.log(formData)
   $.ajax({
diff --git a/templates/anime_downloader_linkkf_list.html b/templates/anime_downloader_linkkf_list.html
index 1d3ec23..22a5a44 100644
--- a/templates/anime_downloader_linkkf_list.html
+++ b/templates/anime_downloader_linkkf_list.html
@@ -1,279 +1,512 @@
 {% extends "base.html" %}
 {% block content %}
- 
-<div class="content-cloak">
-  <form id="form_search" class="form-inline" style="text-align:left">
-    <div class="container-fluid">
-      <div class="row show-grid">
-        <span class="col-md-4">
-          <select id="order" name="order" class="form-control form-control-sm">
-            <option value="desc">최근순</option>
-            <option value="asc">오래된순</option>
-          </select>
-          <select id="option" name="option" class="form-control form-control-sm">
-            <option value="all">전체</option>
-            <option value="completed">완료</option>
-          </select>
-        </span>
-        <span class="col-md-8">
-          <input id="search_word" name="search_word" class="form-control form-control-sm w-75" type="text" placeholder="" aria-label="Search">
-          <button id="search" class="btn btn-sm btn-outline-success">검색</button>
-          <button id="reset_btn" class="btn btn-sm btn-outline-success">리셋</button>
-        </span>
-      </div>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+    <div class="content-cloak">
+        <form id="form_search" class="form-inline" style="text-align:left; width:100%;">
+            <div class="search-container">
+                <div class="search-group-left">
+                     <select id="order" name="order" class="form-control custom-select">
+                        <option value="desc">최근순</option>
+                        <option value="asc">오래된 순</option>
+                      </select>
+                      <select id="option" name="option" class="form-control custom-select">
+                        <option value="all">전체</option>
+                        <option value="completed">완료</option>
+                      </select>
+                </div>
+                <div class="search-group-right">
+                      <input id="search_word" name="search_word" class="form-control custom-input" type="text" placeholder="링크애니 검색..." aria-label="Search">
+                      <button id="search" class="btn custom-btn btn-search"><i class="fa fa-search"></i></button>
+                      <button id="reset_btn" class="btn custom-btn btn-reset"><i class="fa fa-refresh"></i></button>
+                </div>
+            </div>
+        </form>
+        <div id='page1'></div>
+        <div id="list_div"></div>
+        <div id='page2'></div>
     </div>
-  </form>
-  <div id='page1'></div>
-  {{ macros.m_hr_head_top() }}
-  {{ macros.m_row_start('0') }}
-  {{ macros.m_col(2,  macros.m_strong('Poster')) }}
-  {{ macros.m_col(10,  macros.m_strong('Info')) }}
-  {{ macros.m_row_end() }}
-  {{ macros.m_hr_head_bottom() }}
-  <div id="list_div"></div>
-  <div id='page2'></div>
-</div>
 
-<script type="text/javascript">
-var package_name = "{{arg['package_name']}}";
-var sub = "{{arg['sub']}}";
-var current_data = null;
-
-$(document).ready(function(){
-  global_sub_request_search('1');
-});
-
-$("#search").click(function(e) {
-  e.preventDefault();
-  global_sub_request_search('1');
-});
-
-$("body").on('click', '#page', function(e){
-  e.preventDefault();
-  global_sub_request_search($(this).data('page'));
-});
-
-$("#reset_btn").click(function(e) {
-  e.preventDefault();
-  document.getElementById("order").value = 'desc';
-  document.getElementById("option").value = 'all';
-  document.getElementById("search_word").value = '';
-  global_sub_request_search('1')
-});
-
-
-$("body").on('click', '#json_btn', function(e){
-  e.preventDefault();
-  var id = $(this).data('id');
-  for (i in current_data.list) {
-    if (current_data.list[i].id == id) {
-      m_modal(current_data.list[i])
-    }
-  }
-});
-
-$("body").on('click', '#self_search_btn', function(e){
-  e.preventDefault();
-  var search_word = $(this).data('title');
-  document.getElementById("search_word").value = search_word;
-  global_sub_request_search('1')
-});
-
-$("body").on('click', '#remove_btn', function(e) {
-  e.preventDefault();
-  id = $(this).data('id');
-  $.ajax({
-    url: '/'+package_name+'/ajax/'+sub+ '/db_remove',
-    type: "POST", 
-    cache: false,
-    data: {id:id},
-    dataType: "json",
-    success: function (data) {
-      if (data) {
-        $.notify('<strong>삭제되었습니다.</strong>', {
-          type: 'success'
-        });
-        global_sub_request_search(current_data.paging.current_page, false)
-      } else {
-        $.notify('<strong>삭제 실패</strong>', {
-          type: 'warning'
-        });
-      }
-    }
-  });
-});
-
-$("body").on('click', '#request_btn', function(e){
-  e.preventDefault();
-  var content_code = $(this).data('content_code');
-  $(location).attr('href', '/' + package_name + '/' + sub + '/request?content_code=' + content_code)
-});
-
-
-
-function make_list(data) {
-  //console.log(data)
-  str = '';
-  for (i in data) {
-    //console.log(data[i])
-    str += m_row_start();
-    str += m_col(1, data[i].id);
-    tmp = (data[i].status == 'completed') ? '완료' : '미완료';
-    str += m_col(1, tmp);
-    tmp = data[i].created_time + '(추가)';
-    if (data[i].completed_time != null)
-      tmp += data[i].completed_time + '(완료)';
-    str += m_col(3, tmp)
-    tmp = data[i].savepath + '<br>' + data[i].filename + '<br><br>';
-    tmp2 = m_button('json_btn', 'JSON', [{'key':'id', 'value':data[i].id}]);
-    tmp2 += m_button('request_btn', '작품 검색', [{'key':'content_code', 'value':data[i].content_code}]);
-    tmp2 += m_button('self_search_btn', '목록 검색', [{'key':'title', 'value':data[i].title}]);
-    tmp2 += m_button('remove_btn', '삭제', [{'key':'id', 'value':data[i].id}]);
-    tmp += m_button_group(tmp2)
-    str += m_col(7, tmp)
-    str += m_row_end();
-    if (i != data.length -1) str += m_hr();
-  }
-  document.getElementById("list_div").innerHTML = str;
-}
-
-
-
-
-</script>    
-<style>
-    /* Navigation Menu Override */
-    ul.nav.nav-pills.bg-light {
-        background-color: rgba(30, 41, 59, 0.6) !important;
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 50rem !important;
-        padding: 6px !important;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
-        display: inline-flex !important;
-        flex-wrap: wrap;
-        justify-content: center;
-        width: auto !important;
-        margin-bottom: 20px;
-    }
-
-    ul.nav.nav-pills .nav-item {
-        margin: 0 2px;
-    }
-
-    ul.nav.nav-pills .nav-link {
-        border-radius: 50rem !important;
-        padding: 8px 20px !important;
-        color: #94a3b8 !important;
-        font-weight: 600;
-        transition: all 0.3s ease;
-    }
-
-    ul.nav.nav-pills .nav-link:hover {
-        background-color: rgba(255, 255, 255, 0.1);
-        color: #fff !important;
-        transform: translateY(-1px);
-    }
-
-    ul.nav.nav-pills .nav-link.active {
-        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
-        color: #fff !important;
-        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
-    }
-</style>
-
-<style>
-    /* Smooth Load Transition */
-    .content-cloak, 
-    #menu_module_div, 
-    #menu_page_div {
-        opacity: 0;
-        transition: opacity 0.5s ease-out;
-    }
+    <!-- Custom Confirmation Modal -->
+    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content animate__animated animate__zoomIn" style="background: #022c22; border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);">
+                <div class="modal-body text-center" style="padding: 40px 30px;">
+                    <div style="width: 70px; height: 70px; background: rgba(239, 68, 68, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;">
+                        <i class="fa fa-trash animate__animated animate__shakeX animate__infinite" style="color: #ef4444; font-size: 30px;"></i>
+                    </div>
+                    <h4 style="color: #fff; font-weight: 700; margin-bottom: 12px;">정말 삭제하시겠습니까?</h4>
+                    <p style="color: #6ee7b7; font-size: 15px; margin-bottom: 32px;">한 번 삭제된 기록은 다시 복구할 수 없습니다.</p>
+                    <div style="display: flex; gap: 12px; justify-content: center;">
+                        <button type="button" class="custom-btn btn-reset" data-dismiss="modal" style="width: 120px;">취소</button>
+                        <button type="button" id="confirmDeleteBtn" class="custom-btn" style="width: 120px; background: #ef4444; color: white;">삭제하기</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     
-    /* Staggered Delays for Natural Top-Down Flow */
-    #menu_module_div.visible {
-        opacity: 1;
-        transition-delay: 0ms;
-    }
-
-    #menu_page_div.visible {
-        opacity: 1;
-        transition-delay: 150ms;
-    }
-
-    .content-cloak.visible {
-        opacity: 1;
-        transition-delay: 300ms;
-    }
+    <script src="{{ url_for('.static', filename='js/sjva_global1.js') }}"></script>
+    <script src="{{ url_for('.static', filename='js/sjva_ui14.js') }}"></script>
     
-    /* Navigation Menu Override (Top Sub-menu) */
-    ul.nav.nav-pills.bg-light {
-        background-color: rgba(30, 41, 59, 0.6) !important;
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 50rem !important;
-        padding: 6px !important;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
-        display: inline-flex !important;
-        flex-wrap: wrap;
-        justify-content: center;
-        width: auto !important;
-        margin-bottom: 20px;
-    }
+    <!-- Video.js -->
+    <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
+    <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
+    
+    <!-- Video Player Modal -->
+    <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-xl" role="document">
+            <div class="modal-content" style="background: #022c22; border-radius: 12px; border: 1px solid rgba(16, 185, 129, 0.2);">
+                <div class="modal-header" style="border-bottom: 1px solid rgba(16, 185, 129, 0.1);">
+                    <h5 class="modal-title" id="videoModalLabel" style="color: #ecfdf5;">링크애니 시청</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #ecfdf5;">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body" style="padding: 0;">
+                    <video id="video-player" class="video-js vjs-big-play-centered vjs-theme-forest" controls preload="auto" style="width: 100%; height: auto; max-height: 75vh;">
+                        <p class="vjs-no-js">JavaScript가 필요합니다.</p>
+                    </video>
+                    <!-- 플레이리스트 컨트롤 UI -->
+                    <div class="playlist-controls" style="padding: 12px 16px; background: linear-gradient(135deg, rgba(2, 44, 34, 0.95) 0%, rgba(6, 78, 59, 0.95) 100%); border-top: 1px solid rgba(16, 185, 129, 0.1);">
+                        <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
+                            <button id="btn-prev-ep" class="playlist-nav-btn" style="display: none;" title="이전 에피소드">
+                                <i class="fa fa-step-backward"></i>
+                            </button>
+                            <div style="flex: 1; min-width: 200px;">
+                                <div id="current-video-title" style="color: #10b981; font-weight: 600; font-size: 14px;"></div>
+                                <div id="playlist-progress" style="color: #6ee7b7; font-size: 12px; margin-top: 2px;"></div>
+                            </div>
+                            <button id="btn-next-ep" class="playlist-nav-btn" style="display: none;" title="다음 에피소드">
+                                <i class="fa fa-step-forward"></i>
+                            </button>
+                            <button id="btn-toggle-playlist" class="playlist-toggle-btn" title="에피소드 목록">
+                                <i class="fa fa-list"></i>
+                            </button>
+                        </div>
+                        
+                        <div id="playlist-list-container" style="display: none; margin-top: 12px; max-height: 200px; overflow-y: auto; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 8px;">
+                            <div id="playlist-list"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-    ul.nav.nav-pills .nav-item { margin: 0 2px; }
-    ul.nav.nav-pills .nav-link {
-        border-radius: 50rem !important;
-        padding: 8px 20px !important;
-        color: #94a3b8 !important;
-        font-weight: 600;
-        transition: all 0.3s ease;
-    }
-    ul.nav.nav-pills .nav-link:hover {
-        background-color: rgba(255, 255, 255, 0.1);
-        color: #fff !important;
-        transform: translateY(-1px);
-    }
-    ul.nav.nav-pills .nav-link.active {
-        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
-        color: #fff !important;
-        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
-    }
-</style>
+    <style>
+        :root {
+            --forest-950: #022c22;
+            --forest-900: #064e3b;
+            --forest-800: #065f46;
+            --forest-500: #10b981;
+            --forest-400: #34d399;
+            --forest-100: #d1fae5;
+            --accent-amber: #fbbf24;
+        }
+
+        body { background-color: var(--forest-950); color: #ecfdf5; font-family: 'Inter', 'Noto Sans KR', sans-serif; }
+        
+        /* Layout Expansion */
+        #main_container, .container, .container-fluid, .content-cloak {
+            max-width: 100% !important;
+            padding-left: 5px !important;
+            padding-right: 5px !important;
+            margin: 0 auto !important;
+        }
+        
+        .content-cloak { padding-top: 10px; }
+
+        /* Navigation (Tabs) Optimization */
+        .nav-pills {
+            background: rgba(6, 78, 59, 0.4) !important;
+            padding: 6px !important;
+            border-radius: 12px !important;
+            border: 1px solid rgba(16, 185, 129, 0.1) !important;
+            margin-bottom: 20px !important;
+            display: inline-flex !important;
+            gap: 4px !important;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
+        }
+        .nav-pills .nav-link {
+            color: #d1fae5 !important;
+            font-weight: 600 !important;
+            padding: 8px 20px !important;
+            border-radius: 8px !important;
+            transition: all 0.3s ease !important;
+            border: 1px solid transparent !important;
+        }
+        .nav-pills .nav-link:hover {
+            background: rgba(16, 185, 129, 0.1) !important;
+            color: #fff !important;
+            transform: translateY(-1px);
+        }
+        .nav-pills .nav-link.active {
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
+            color: #fff !important;
+            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
+            border: 1px solid rgba(255,255,255,0.1) !important;
+        }
+
+        /* Search Container */
+        .search-container {
+            display: flex; justify-content: space-between; align-items: center;
+            background: rgba(6, 78, 59, 0.4); backdrop-filter: blur(12px);
+            padding: 12px 20px; border-radius: 16px; border: 1px solid rgba(16, 185, 129, 0.1);
+            margin-bottom: 24px; gap: 16px; flex-wrap: wrap; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+        }
+        .search-group-left, .search-group-right { display: flex; align-items: center; gap: 10px; }
+        .search-group-right { flex-grow: 1; justify-content: flex-end; }
+
+        .custom-select {
+            background-color: rgba(2, 44, 34, 0.6); border: 1px solid rgba(16, 185, 129, 0.2);
+            color: var(--forest-100); border-radius: 10px; padding: 6px 32px 6px 12px; height: 40px;
+            font-size: 14px; transition: all 0.2s;
+        }
+        .custom-select:focus { border-color: var(--forest-500); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); outline: none; }
+
+        .custom-input {
+            background-color: rgba(2, 44, 34, 0.6); border: 1px solid rgba(16, 185, 129, 0.2);
+            color: #fff; border-radius: 10px; padding: 6px 16px; height: 40px;
+            width: 100%; max-width: 400px; font-size: 14px; transition: all 0.2s;
+        }
+        .custom-input:focus { border-color: var(--forest-500); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); outline: none; background-color: rgba(2, 44, 34, 0.8); }
+
+        .custom-btn {
+            height: 40px; padding: 0 16px; border-radius: 10px; display: flex; align-items: center;
+            justify-content: center; font-weight: 600; cursor: pointer; transition: all 0.2s; border: none;
+        }
+        .btn-search { background: linear-gradient(135deg, #10b981, #059669); color: white; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
+        .btn-search:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4); }
+        .btn-reset { background: rgba(100, 116, 139, 0.1); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.1); }
+        .btn-reset:hover { background: rgba(100, 116, 139, 0.2); color: #e2e8f0; }
+
+        /* Item Row Design */
+        .item-row {
+            background: rgba(6, 78, 59, 0.3); border-radius: 16px; margin-bottom: 12px;
+            padding: 16px; display: flex; gap: 20px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            border: 1px solid rgba(16, 185, 129, 0.05); cursor: default; position: relative; overflow: hidden;
+        }
+        .item-row:hover { background: rgba(6, 78, 59, 0.5); transform: translateY(-2px); border-color: rgba(16, 185, 129, 0.2); box-shadow: 0 12px 24px rgba(0,0,0,0.3); }
+        
+        .poster-container { width: 120px; flex-shrink: 0; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.3); background: #000; }
+        .poster-img { width: 100%; height: 160px; object-fit: cover; transition: transform 0.5s ease; }
+        .item-row:hover .poster-img { transform: scale(1.1); }
+        .episode-badge {
+            position: absolute; top: 8px; left: 8px; z-index: 10;
+            background: rgba(16, 185, 129, 0.9); color: #fff;
+            padding: 2px 8px; border-radius: 6px; font-size: 11px;
+            font-weight: 700; box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+            backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.1);
+        }
+        
+        .info-container { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
+        .item-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; line-height: 1.4; display: flex; align-items: center; gap: 8px; }
+        .item-title span.badge { font-size: 11px; padding: 3px 8px; border-radius: 6px; font-weight: 600; }
+        .status-completed { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.2); }
+        .status-wait { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.2); }
+        .status-fail { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.2); }
+
+        .item-meta { font-size: 13px; color: #6ee7b7; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 12px; opacity: 0.8; }
+        .item-path { font-size: 13px; color: #34d399; background: rgba(2, 44, 34, 0.4); padding: 8px 12px; border-radius: 8px; word-break: break-all; margin-bottom: 12px; border: 1px solid rgba(16, 185, 129, 0.1); }
+
+        .item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+        .action-btn { 
+            padding: 6px 14px; font-size: 13px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
+            background: rgba(255,255,255,0.05); color: #ecfdf5; cursor: pointer; transition: all 0.2s;
+            font-weight: 500; display: inline-flex; align-items: center; gap: 6px;
+        }
+        .action-btn:hover { background: rgba(255,255,255,0.1); color: #fff; transform: translateY(-1px); border-color: rgba(255,255,255,0.2); }
+        .action-btn.btn-play { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; font-weight: 700; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); }
+        .action-btn.btn-play:hover { background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3); }
+
+        /* VideoJS Customization */
+        .vjs-theme-forest { --vjs-theme-forest--emerald: #10b981; }
+        .video-js.vjs-theme-forest .vjs-big-play-button { background-color: var(--forest-500); border-color: var(--forest-400); }
+        
+        .playlist-nav-btn {
+            width: 40px; height: 40px; background: linear-gradient(135deg, #10b981, #059669);
+            border: none; border-radius: 50%; color: white; font-size: 14px;
+            cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center;
+        }
+        .playlist-nav-btn:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); }
+        .playlist-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
+        
+        .playlist-toggle-btn {
+            padding: 8px 14px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2);
+            border-radius: 8px; color: #6ee7b7; font-size: 13px; cursor: pointer; transition: all 0.2s ease;
+        }
+        .playlist-toggle-btn:hover { background: rgba(16, 185, 129, 0.2); color: #ecfdf5; }
+        .playlist-toggle-btn.active { background: rgba(16, 185, 129, 0.3); border-color: #10b981; color: #10b981; }
+
+        .playlist-item {
+            padding: 10px 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s;
+            color: #d1fae5; font-size: 13px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(16, 185, 129, 0.05);
+        }
+        .playlist-item:hover { background: rgba(16, 185, 129, 0.1); color: #fff; }
+        .playlist-item.active { background: rgba(16, 185, 129, 0.2); color: #10b981; font-weight: 600; border-left: 3px solid #10b981; }
+    </style>
+
+    <script type="text/javascript">
+        var package_name = "{{arg['package_name']}}";
+        var sub = "{{arg['sub']}}";
+        var current_data = null;
+        var videoPlayer = null;
+        var playlist = [];
+        var currentPlaylistIndex = 0;
+        var currentPlayingPath = null;
+        var playlistRefreshInterval = null;
+
+        $(document).ready(function () {
+            global_sub_request_search('1');
+        });
+
+        function global_sub_request_search(page, move_top = true) {
+            var formData = get_formdata('#form_search')
+            formData += '&page=' + page;
+            $.ajax({
+                url: '/' + package_name + '/ajax/' + sub + '/web_list',
+                type: "POST",
+                cache: false,
+                data: formData,
+                dataType: "json",
+                success: function (data) {
+                    current_data = data;
+                    if (move_top) window.scrollTo(0,0);
+                    make_list(data.list);
+                    make_page_html(data.paging);
+                }
+            });
+        }
+
+        $("#search").click(function (e) {
+            e.preventDefault();
+            global_sub_request_search('1');
+        });
+
+        $("body").on('click', '#page', function (e) {
+            e.preventDefault();
+            global_sub_request_search($(this).data('page'));
+        });
+
+        $("#reset_btn").click(function (e) {
+            e.preventDefault();
+            document.getElementById("order").value = 'desc';
+            document.getElementById("option").value = 'all';
+            document.getElementById("search_word").value = '';
+            global_sub_request_search('1');
+        });
+
+        // 비디오 재생 UI 핵심 로직
+        function playVideoAtIndex(index) {
+            if (index < 0 || index >= playlist.length) return;
+            currentPlaylistIndex = index;
+            var item = playlist[index];
+            currentPlayingPath = item.path;
+            
+            var streamUrl = '/' + package_name + '/ajax/' + sub + '/stream_video?path=' + encodeURIComponent(item.path);
+            
+            if (videoPlayer) {
+                videoPlayer.src({ type: 'video/mp4', src: streamUrl });
+                videoPlayer.play();
+            }
+            
+            $('#current-video-title').text(item.name);
+            updatePlaylistUI();
+        }
+
+        function updatePlaylistUI() {
+            var total = playlist.length;
+            var current = currentPlaylistIndex + 1;
+            $('#playlist-progress').text(current + ' / ' + total + ' 에피소드');
+            
+            // 버튼 활성/비활성
+            $('#btn-prev-ep').toggle(currentPlaylistIndex > 0);
+            $('#btn-next-ep').toggle(currentPlaylistIndex < playlist.length - 1);
+            
+            // 리스트 하이라이트
+            $('#playlist-list .playlist-item').removeClass('active');
+            $('#playlist-list .playlist-item').eq(currentPlaylistIndex).addClass('active');
+        }
+
+        function refreshPlaylistData(slient = true) {
+            if (!currentPlayingPath || !$('#videoModal').is(':visible')) return;
+            
+            $.get('/' + package_name + '/ajax/' + sub + '/get_playlist?path=' + encodeURIComponent(currentPlayingPath), function(data) {
+                if (data.playlist && data.playlist.length > 0) {
+                    var oldLength = playlist.length;
+                    playlist = data.playlist;
+                    currentPlaylistIndex = data.current_index;
+                    
+                    // 새 에피소드 감지
+                    if (playlist.length > oldLength) {
+                        $.notify('새로운 에피소드가 감지되어 플레이리스트가 업데이트되었습니다.', { type: 'success' });
+                    }
+                    
+                    renderPlaylistItems();
+                    updatePlaylistUI();
+                }
+            });
+        }
+
+        function renderPlaylistItems() {
+            var str = '';
+            for (var i = 0; i < playlist.length; i++) {
+                var item = playlist[i];
+                var isActive = (i === currentPlaylistIndex) ? 'active' : '';
+                str += '<div class="playlist-item ' + isActive + '" onclick="playVideoAtIndex(' + i + ')">';
+                str += '<i class="fa ' + (isActive ? 'fa-play-circle' : 'fa-play') + '"></i>';
+                str += '<span>' + item.name + '</span>';
+                str += '</div>';
+            }
+            $('#playlist-list').html(str);
+        }
+
+        // 재생 버튼 클릭
+        $("body").on('click', '.btn-play', function (e) {
+            var path = $(this).data('path');
+            var filename = $(this).data('filename');
+            
+            if (!path) {
+                $.notify('파일 경로를 찾을 수 없습니다.', { type: 'warning' });
+                return;
+            }
+
+            // 플레이리스트 정보 가져오기
+            $.get('/' + package_name + '/ajax/' + sub + '/get_playlist?path=' + encodeURIComponent(path), function(data) {
+                playlist = data.playlist || [{path: path, name: filename}];
+                currentPlaylistIndex = data.current_index || 0;
+                currentPlayingPath = path;
+
+                $('#videoModal').modal('show');
+                
+                if (!videoPlayer) {
+                    videoPlayer = videojs('video-player', {
+                        fluid: true,
+                        playbackRates: [0.5, 1, 1.25, 1.5, 2]
+                    });
+                    
+                    videoPlayer.on('ended', function() {
+                        if (currentPlaylistIndex < playlist.length - 1) {
+                            playVideoAtIndex(currentPlaylistIndex + 1);
+                        }
+                    });
+                }
+                
+                playVideoAtIndex(currentPlaylistIndex);
+                renderPlaylistItems();
+                
+                // 실시간 갱신 시작 (10초)
+                if (playlistRefreshInterval) clearInterval(playlistRefreshInterval);
+                playlistRefreshInterval = setInterval(refreshPlaylistData, 10000);
+            });
+        });
+
+        // 모달 닫힐 때 중지
+        $('#videoModal').on('hidden.bs.modal', function () {
+            if (videoPlayer) {
+                videoPlayer.pause();
+            }
+            if (playlistRefreshInterval) {
+                clearInterval(playlistRefreshInterval);
+                playlistRefreshInterval = null;
+            }
+            currentPlayingPath = null;
+        });
+
+        // 플레이리스트 컨트롤러 핸들러
+        $('#btn-prev-ep').click(function() { playVideoAtIndex(currentPlaylistIndex - 1); });
+        $('#btn-next-ep').click(function() { playVideoAtIndex(currentPlaylistIndex + 1); });
+        $('#btn-toggle-playlist').click(function() {
+            $(this).toggleClass('active');
+            $('#playlist-list-container').slideToggle(200);
+        });
+
+        // 목록 생성 함수
+        function make_list(data) {
+            var str = '';
+            for (var i = 0; i < data.length; i++) {
+                var item = data[i];
+                var statusClass = 'status-wait';
+                var statusText = '대기';
+                if (item.status === 'completed') { statusClass = 'status-completed'; statusText = '완료'; }
+                else if (item.status === 'fail') { statusClass = 'status-fail'; statusText = '실패'; }
+
+                str += '<div class="item-row">';
+                
+                // Poster
+                str += '<div class="poster-container">';
+                if (item.episode_title) {
+                    str += '<div class="episode-badge">' + item.episode_title + '</div>';
+                }
+                var thumb = item.thumbnail;
+                if (!thumb || thumb.length <= 1) {
+                    if (item.linkkf_info && item.linkkf_info.image) {
+                        thumb = item.linkkf_info.image;
+                    }
+                }
+                thumb = thumb || '';
+                str += '<img class="poster-img" src="' + thumb + '" onerror="this.src=\'https://placehold.co/120x160?text=No+Poster\'">';
+                str += '</div>';
+
+                // Info
+                str += '<div class="info-container">';
+                str += '<div class="item-title">' + (item.title || 'Untitled') + ' <span class="badge ' + statusClass + '">' + statusText + '</span></div>';
+                
+                var meta = '';
+                meta += '<span><i class="fa fa-clock-o"></i> ' + item.created_time + '</span>';
+                if (item.completed_time) meta += '<span><i class="fa fa-check-circle"></i> ' + item.completed_time + '</span>';
+                str += '<div class="item-meta">' + meta + '</span></div>';
+                
+                str += '<div class="item-path">' + item.filename + '</div>';
+
+                // Actions
+                str += '<div class="item-actions">';
+                if (item.status === 'completed') {
+                    str += '<button class="action-btn btn-play" data-path="' + item.filepath + '" data-filename="' + item.filename + '"><i class="fa fa-play"></i> 재생</button>';
+                }
+                str += '<button class="action-btn" onclick="m_modal(current_data.list[' + i + '])"><i class="fa fa-code"></i> JSON</button>';
+                str += '<button class="action-btn" onclick="search_item(\'' + (item.title || '') + '\')"><i class="fa fa-search"></i> 검색</button>';
+                str += '<button class="action-btn" onclick="db_remove(' + item.id + ')"><i class="fa fa-trash"></i> 삭제</button>';
+                str += '</div>';
+
+                str += '</div>'; // End info-container
+                str += '</div>'; // End item-row
+            }
+            $('#list_div').html(str || '<div style="text-align:center; padding: 40px; color: #6ee7b7;">결과가 없습니다.</div>');
+        }
+
+        function search_item(title) {
+            $('#search_word').val(title);
+            global_sub_request_search('1');
+        }
+
+        var targetDeleteId = null;
+
+        function db_remove(id) {
+            targetDeleteId = id;
+            $('#confirmModal').modal('show');
+        }
+
+        $('#confirmDeleteBtn').click(function() {
+            if (!targetDeleteId) return;
+            
+            $.ajax({
+                url: '/' + package_name + '/ajax/' + sub + '/db_remove',
+                type: "POST",
+                data: { id: targetDeleteId },
+                dataType: "json",
+                success: function (data) {
+                    $('#confirmModal').modal('hide');
+                    if (data) {
+                        $.notify('성공적으로 삭제되었습니다.', { type: 'success' });
+                        global_sub_request_search(current_data.paging.current_page, false);
+                    } else {
+                        $.notify('삭제에 실패했습니다.', { type: 'warning' });
+                    }
+                }
+            });
+        });
+    </script>
 
-<script type="text/javascript">
-$(document).ready(function(){
-  // Smooth Load Trigger
-  setTimeout(function() {
-      $('.content-cloak, #menu_module_div, #menu_page_div').addClass('visible');
-  }, 100);
-});
-</script>
-<style>
-/* Mobile Margin Fix */
-@media (max-width: 768px) {
-    body { overflow-x: hidden !important; padding: 0 !important; margin: 0 !important; }
-    .container, .container-fluid, .row, form, #program_list, #program_auto_form, #episode_list, .queue-container, #yommi_wrapper, #main_container {
-        width: 100% !important; max-width: 100% !important;
-        padding-left: 4px !important; padding-right: 4px !important;
-        margin-left: 0 !important; margin-right: 0 !important;
-        box-sizing: border-box !important;
-    }
-    .form-group, .form-inline, [class*="col-"] {
-        flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
-        padding-left: 0 !important; padding-right: 0 !important;
-    }
-    .row { margin-left: 0 !important; margin-right: 0 !important; }
-    .card, .card.p-4, .card.p-lg-5, .card.border-light {
-         width: calc(100% - 8px) !important; max-width: 100% !important;
-         padding: 8px !important; margin: 4px !important;
-         border-radius: 12px !important; box-sizing: border-box !important;
-    }
-    .badge {
-        white-space: normal !important; text-align: left !important;
-        line-height: 1.4 !important; height: auto !important; display: inline-block !important;
-    }
-}
-</style>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/anime_downloader_linkkf_queue.html b/templates/anime_downloader_linkkf_queue.html
index 946eddf..603885b 100644
--- a/templates/anime_downloader_linkkf_queue.html
+++ b/templates/anime_downloader_linkkf_queue.html
@@ -1,503 +1,407 @@
 {% extends "base.html" %}
 {% block content %}
 
-
-
 <div class="content-cloak">
-<table id="result_table" class="table table-sm tableRowHover">
-  <thead class="thead-dark">
-    <tr>
-      <th style="width:5%; text-align:center;">IDX</th>
-      <th style="width:8%; text-align:center;">Plugin</th>
-      <th style="width:10%; text-align:center;">시작시간</th>
-      <th style="width:20%; text-align:center;">파일명</th>
-      <th style="width:8%; text-align:center;">상태</th>
-      <th style="width:15%; text-align:center;">진행률</th>
-      <th style="width:5%; text-align:center;">길이</th>
-      <th style="width:5%; text-align:center;">PF</th>
-      <th style="width:8%; text-align:center;">배속</th>
-      <th style="width:8%; text-align:center;">진행시간</th>
-      <th style="width:8%; text-align:center;">Action</th>
-    </tr>
-  </thead>
-  <tbody id="list"></tbody>
-</table>
+    <div class="queue-header-container">
+        <h4 class="queue-title"><i class="fa fa-download"></i> 다운로드 큐</h4>
+        <div class="header-buttons">
+            <button id="reset_btn" class="queue-btn-top btn-danger">
+                <i class="fa fa-refresh"></i> 초기화
+            </button>
+            <button id="delete_completed_btn" class="queue-btn-top btn-warning">
+                <i class="fa fa-trash"></i> 완료 삭제
+            </button>
+        </div>
+        <div class="queue-meta">실시간 동기화 활성화됨 (3초 주기)</div>
+    </div>
+
+    <div class="table-responsive-custom">
+        <table id="result_table" class="table custom-queue-table tableRowHover">
+            <thead>
+                <tr>
+                    <th style="width:5%;">IDX</th>
+                    <th style="width:8%;">Plugin</th>
+                    <th style="width:10%;">시작시간</th>
+                    <th style="width:25%;">파일명</th>
+                    <th style="width:8%;">상태</th>
+                    <th style="width:18%;">진행률</th>
+                    <th style="width:6%;">길이</th>
+                    <th style="width:5%;">PF</th>
+                    <th style="width:10%;">현재 상태</th>
+                    <th style="width:5%;">Action</th>
+                </tr>
+            </thead>
+            <tbody id="list"></tbody>
+        </table>
+    </div>
+</div>
 
 <script type="text/javascript">
-
 $(document).ready(function(){
-  console.log('Queue page loaded, connecting to sockets...');
-  
-  var protocol = location.protocol;
-  var socketUrl = protocol + "//" + document.domain + ":" + location.port;
-  
-  // Queue 페이지 전용 namespace 연결
-  var queueSocket = null;
-  try {
-    queueSocket = io.connect(socketUrl + '/anime_downloader/linkkf/queue');
-    console.log('Queue socket connecting to:', socketUrl + '/anime_downloader/linkkf/queue');
-  } catch (e) {
-    console.error('Queue socket connect error:', e);
-  }
-  
-  // /framework namespace 연결 (FlaskFarm 기본 알림용)
-  var frameworkSocket = null;
-  try {
-    frameworkSocket = io.connect(socketUrl + '/framework');
-    console.log('Framework socket connecting to:', socketUrl + '/framework');
+    var protocol = location.protocol;
+    var socketUrl = protocol + "//" + document.domain + ":" + location.port;
     
-    frameworkSocket.on('connect', function() {
-      console.log('Framework socket connected!');
-    });
-    
-    // linkkf_status 이벤트로 다운로드 상태 업데이트 수신
-    frameworkSocket.on('linkkf_status', function(data) {
-      status_html(data);
-    });
-  } catch (e) {
-    console.error('Framework socket connect error:', e);
-  }
-  
-  // Queue socket으로 직접 이벤트 받기
-  var socket = queueSocket;
-  
-  if (socket) {
-    socket.on('connect', function() {
-      console.log('Socket connected! socket.id:', socket.id);
-    });
-  
-    socket.on('disconnect', function() {
-      console.log('Socket disconnected!');
-    });
-  
-    socket.on('connect_error', function(err) {
-      console.log('Socket connect error:', err);
-    });
-  
-    // 모든 이벤트 수신 테스트
-    socket.onAny(function(event, ...args) {
-      console.log('Socket event received:', event, args);
-    });
-
-    socket.on('on_start', function(data){
-      console.log('on_start received:', data);
-      document.getElementById("log").innerHTML += data.data;
-      document.getElementById("log").scrollTop = document.getElementById("log").scrollHeight;
-      document.getElementById("log").style.visibility = 'visible';
-      $('#loading').hide();
-    });
-
-    socket.on('add', function(data){
-      str = make_item(data);
-      if (current_data == null || current_data.length == 0) {
-        current_data = Array();
-        $("#list").html(str);
-      } else {
-        $("#list").html($("#list").html() + str);
-      }
-      current_data.push(data);
-    });
-
-    socket.on('status_change', function(data) {
-      button_html(data);
-    });
-
-    socket.on('status', function(data){
-      console.log('status received:', data);
-      status_html(data);
-    });
-
-    socket.on('last', function(data){
-      status_html(data);
-      button_html(data);
-    });
-  }
-
-  var refreshIntervalId = null;
-  
-  // 로딩 인디케이터 없이 조용히 목록 가져오기
-  function silentFetchList(callback) {
-    $.ajax({
-      url: '/' + PACKAGE_NAME + '/ajax/' + MODULE_NAME + '/command',
-      type: 'POST',
-      cache: false,
-      global: false,  // 로딩 인디케이터 표시 안함
-      data: {command: 'list'},
-      dataType: 'json',
-      success: function(data) {
-        if (callback) callback(data);
-      },
-      error: function(xhr, status, error) {
-        // 에러 무시
-      }
-    });
-  }
-  
-  // 자동 새로고침 (로딩 인디케이터 없음)
-  function autoRefreshList() {
-    silentFetchList(function(data) {
-      // 새 아이템이 추가되었는지 확인
-      if (!current_data || data.length !== current_data.length) {
-        current_data = data;
-        $("#list").html('');
-        console.log('Refreshed list:', data.length, 'items');
-        if (data.length == 0) {
-          str = "<tr><td colspan='10'><h4>작업이 없습니다.</h4><td><tr>";
-        } else {
-          str = ''
-          for(i in data) {
-            str += make_item(data[i]);
-          }
-        }
-        $("#list").html(str);
-      }
-      
-      // 진행 중인 다운로드가 있는지 확인
-      var hasActiveDownload = false;
-      if (data && data.length > 0) {
-        for (var j = 0; j < data.length; j++) {
-          if (data[j].status_str === 'DOWNLOADING' || data[j].status_str === 'WAITING') {
-            hasActiveDownload = true;
-            break;
-          }
-        }
-      }
-      
-      // 모든 다운로드 완료 시 자동 새로고침 중지
-      if (!hasActiveDownload && refreshIntervalId) {
-        console.log('All downloads completed, stopping auto-refresh');
-        clearInterval(refreshIntervalId);
-        refreshIntervalId = null;
-      }
-      
-      // 활성 다운로드가 있고 새로고침이 중지된 경우 재시작
-      if (hasActiveDownload && !refreshIntervalId) {
-        console.log('Active downloads detected, starting auto-refresh');
-        refreshIntervalId = setInterval(autoRefreshList, 3000);
-      }
-    });
-  }
-  
-  // 초기 로드 (로딩 인디케이터 표시)
-  globalSendCommand('list', null, null, null, function(data) {
-    current_data = data;
-    $("#list").html('');
-    if (data.length == 0) {
-      str = "<tr><td colspan='10'><h4>작업이 없습니다.</h4><td><tr>";
-    } else {
-      str = ''
-      for(i in data) {
-        str += make_item(data[i]);
-      }
+    // Queue 전용 소켓 시도
+    var queueSocket = null;
+    try {
+        queueSocket = io.connect(socketUrl + '/anime_downloader/linkkf/queue');
+    } catch (e) {
+        console.error('Queue socket error:', e);
+    }
+    
+    var frameworkSocket = null;
+    try {
+        frameworkSocket = io.connect(socketUrl + '/framework');
+        frameworkSocket.on('linkkf_status', function(data) {
+            status_html(data);
+        });
+    } catch (e) {
+        console.error('Framework socket error:', e);
+    }
+    
+    var socket = queueSocket;
+    if (socket) {
+        socket.on('status_change', function(data) { button_html(data); });
+        socket.on('status', function(data){ status_html(data); });
+        socket.on('last', function(data){ status_html(data); button_html(data); });
     }
-    $("#list").html(str);
-  });
-  
-  // 3초마다 자동 새로고침 (로딩 인디케이터 없음)
-  refreshIntervalId = setInterval(autoRefreshList, 3000);
-});
 
+    var refreshIntervalId = null;
+    function silentFetchList(callback) {
+        $.ajax({
+            url: '/' + PACKAGE_NAME + '/ajax/' + MODULE_NAME + '/command',
+            type: 'POST',
+            cache: false,
+            global: false,
+            data: {command: 'list'},
+            dataType: 'json',
+            success: function(data) { if (callback) callback(data); }
+        });
+    }
+    
+    function autoRefreshList() {
+        silentFetchList(function(data) {
+            if (!current_data || data.length !== current_data.length) {
+                current_data = data;
+                renderList(data);
+            }
+            
+            var hasActiveDownload = false;
+            if (data && data.length > 0) {
+                for (var j = 0; j < data.length; j++) {
+                    if (data[j].status_str === 'DOWNLOADING' || data[j].status_str === 'WAITING') {
+                        hasActiveDownload = true;
+                        break;
+                    }
+                }
+            }
+            
+            if (!hasActiveDownload && refreshIntervalId) {
+                clearInterval(refreshIntervalId);
+                refreshIntervalId = null;
+            }
+            if (hasActiveDownload && !refreshIntervalId) {
+                refreshIntervalId = setInterval(autoRefreshList, 3000);
+            }
+        });
+    }
+    
+    function renderList(data) {
+        $("#list").html('');
+        if (!data || data.length == 0) {
+            $("#list").html("<tr><td colspan='10' style='text-align:center; padding: 40px; color: #6ee7b7;'>다운로드 대기 중인 작업이 없습니다.</td></tr>");
+        } else {
+            var str = '';
+            for(var i in data) {
+                str += make_item(data[i]);
+            }
+            $("#list").html(str);
+        }
+    }
+
+    globalSendCommand('list', null, null, null, function(data) {
+        current_data = data;
+        renderList(data);
+    });
+    
+    refreshIntervalId = setInterval(autoRefreshList, 3000);
+});
 
 $("body").on('click', '#stop_btn', function(e){
-  e.stopPropagation();
-  e.preventDefault();
-  globalSendCommand('stop', $(this).data('idx'), null, null, function(ret){
-    refresh_item(ret.data);
-  });
+    e.stopPropagation(); e.preventDefault();
+    globalSendCommand('stop', $(this).data('idx'), null, null, function(ret){
+        refresh_item(ret.data);
+    });
 });
 
+$("body").on('click', '#reset_btn', function(e){
+    e.preventDefault();
+    globalConfirmModal('초기화 하시겠습니까?', function(){
+        globalSendCommand('reset', null, null, null, function(ret){
+            autoRefreshList();
+        });
+    });
+});
+
+$("body").on('click', '#delete_completed_btn', function(e){
+    e.preventDefault();
+    globalSendCommand('delete_completed', null, null, null, function(ret){
+        autoRefreshList();
+    });
+});
+
+$("body").on('click', '#delete_btn', function(e){
+    e.stopPropagation(); e.preventDefault();
+    let idx = $(this).data('idx');
+    globalSendCommand('remove', idx, null, null, function(ret){
+        autoRefreshList();
+    });
+});
 
 function refresh_item(data) {
-  $('#tr1_'+data.idx).html(make_item1(data));
-  $('#collapse_'+data.idx).html(make_item2(data));
+    $('#tr1_'+data.idx).html(make_item1(data));
+    $('#collapse_'+data.idx).html(make_item2(data));
 }
 
 function make_item(data) {
-  str = '<tr id="tr1_'+data.idx+'" style="cursor: pointer;" data-toggle="collapse" data-target="#collapse_'+ data.idx + '" aria-expanded="true" >';
-  str += make_item1(data);
-  str += '</tr>';
-  str += '<tr class="collapse tableRowHoverOff" style="cursor: pointer;"  id="collapse_' + data.idx + '">';
-  str += make_item2(data);
-  str += '</tr>';
-  return str;
+    var str = '<tr id="tr1_'+data.idx+'" style="cursor: pointer;" data-toggle="collapse" data-target="#collapse_'+ data.idx + '" aria-expanded="false" >';
+    str += make_item1(data);
+    str += '</tr>';
+    str += '<tr class="collapse tableRowHoverOff" id="collapse_' + data.idx + '">';
+    str += make_item2(data);
+    str += '</tr>';
+    return str;
 }
 
 function make_item1(data) {
-  //console.log(data);
-  str = '';
-  str += '<td scope="col" style="width:5%; text-align:center;">'+ data.idx + '</td>';
-  str += '<td scope="col" style="width:8%; text-align:center;">'+ data.callback_id + '</td>';
-  str += '<td scope="col" style="width:10%; text-align:center;">'+ data.start_time + '</td>';
-  str += '<td scope="col" style="width:20%; text-align:center;">'+ data.filename + '</td>';
-  str += '<td id="status_'+data.idx+'" scope="col" style="width:8%; text-align:center;">'+ data.status_kor + '</td>';
-  var visi = 'hidden';
-  if (parseInt(data.percent) > 0) {
-    visi = 'visible';
-  }
-  str += '<td scope="col" style="width:20%; text-align:center;"><div class="progress"><div id="progress_'+data.idx+'" class="progress-bar" style="visibility: '+visi+'; width:'+data.percent+'%">'+data.percent +'%</div></div></td>';
-  str += '<td scope="col" style="width:5%; text-align:center;">'+ data.duration_str + '</td>';
-  str += '<td id="current_pf_count_'+data.idx+'" scope="col" style="width:5%; text-align:center;">'+ data.current_pf_count + '</td>';
-  str += '<td id="current_speed_'+data.idx+'" scope="col" style="width:8%; text-align:center;">'+ data.current_speed + '</td>';
-  str += '<td id="download_time_'+data.idx+'" scope="col" style="width:8%; text-align:center;">'+ data.download_time + '</td>';
-  str += '<td id="button_'+data.idx+'" scope="col" style="width:8%; text-align:center;">';
-  if (data.status_str == 'DOWNLOADING') {
-    str += j_button('stop_btn', '중지', {'idx':data.idx}, 'danger', false, false);
-  }
-  str += '</td>'
-  return str;
+    var str = '<td style="text-align:center;">'+ data.idx + '</td>';
+    str += '<td style="text-align:center;"><span class="badge badge-info">'+ data.callback_id + '</span></td>';
+    str += '<td style="text-align:center; font-size: 12px; color: #6ee7b7;">'+ data.start_time + '</td>';
+    str += '<td style="font-weight: 600;">'+ data.filename + '</td>';
+    
+    var status_class = 'status-wait';
+    if (data.status_str === 'DOWNLOADING') status_class = 'status-downloading';
+    else if (data.status_str === 'COMPLETED') status_class = 'status-completed';
+    else if (data.status_str === 'STOP') status_class = 'status-fail';
+
+    str += '<td id="status_'+data.idx+'" style="text-align:center;"><span class="badge-status ' + status_class + '">'+ data.status_kor + '</span></td>';
+    
+    var visi = (parseInt(data.percent) > 0) ? 'visible' : 'hidden';
+    str += '<td><div class="progress custom-progress"><div id="progress_'+data.idx+'" class="progress-bar" style="visibility: '+visi+'; width:'+data.percent+'%">'+data.percent +'%</div></div></td>';
+    
+    str += '<td style="text-align:center;">'+ data.duration_str + '</td>';
+    str += '<td id="current_pf_count_'+data.idx+'" style="text-align:center; color: #f87171;">'+ data.current_pf_count + '</td>';
+    str += '<td style="text-align:center; font-size: 13px;"><div id="current_speed_'+data.idx+'">'+ data.current_speed + '</div><div id="download_time_'+data.idx+'" style="font-size: 11px; opacity: 0.6;">'+ data.download_time + '</div></td>';
+    
+    str += '<td id="button_'+data.idx+'" style="text-align:center; padding: 10px 4px !important;">';
+    str += '<div class="action-btn-group">';
+    if (data.status_str == 'DOWNLOADING' || data.status_str == 'WAITING') {
+        str += '<button id="stop_btn" class="action-btn-mini btn-danger" data-idx="'+data.idx+'" title="중지"><i class="fa fa-stop"></i></button>';
+    } else {
+        str += '<button id="delete_btn" class="action-btn-mini btn-warning" data-idx="'+data.idx+'" title="삭제"><i class="fa fa-times"></i></button>';
+    }
+    str += '</div>';
+    str += '</td>';
+    return str;
 }
 
 function make_item2(data) {
-  str = '';
-  str += '<td colspan="11">';
-  str += '<div id="detail_'+data.idx+'">';
-  str += get_detail(data);
-  str += '</div>';
-  str += '</td>';
-  return str
+    var str = '<td colspan="10" style="background: rgba(0,0,0,0.2); padding: 15px !important;">';
+    str += '<div id="detail_'+data.idx+'" class="queue-detail-container">';
+    str += get_detail(data);
+    str += '</div>';
+    str += '</td>';
+    return str;
 }
 
-
 function get_detail(data) {
-  var str = j_row_info('URL', data.url);
-  str += j_row_info('임시경로', data.temp_fullpath);
-  str += j_row_info('저장경로', data.save_fullpath);
-  str += j_row_info('진행률(current/total)', data.percent+ '% (' + data.current_duration + ' / ' + data.duration + ')');
-  str += j_row_info('현재 비트레이트', data.current_bitrate);
-  str += j_row_info('종료시간', data.end_time);
-  str += j_row_info('허용 Packet Fail 수', data.max_pf_count);
-  str += j_row_info('파일 Exist', data.exist);
-  if (data.status_str == 'COMPLETED') {
-    str += j_row_info('파일 크기', data.filesize_str);
-    str += j_row_info('다운 속도', data.download_speed);
-  }
-  return str;
+    var str = '<div class="detail-grid">';
+    str += '<div class="detail-item"><span class="label">파일 경로</span><span class="value">' + data.save_fullpath + '</span></div>';
+    str += '<div class="detail-item"><span class="label">URL</span><span class="value text-truncate">' + data.url + '</span></div>';
+    str += '<div class="detail-item"><span class="label">진행 상황</span><span class="value">' + data.percent+ '% (' + data.current_duration + ' / ' + data.duration + ')</span></div>';
+    str += '<div class="detail-item"><span class="label">비트레이트</span><span class="value">' + data.current_bitrate + '</span></div>';
+    str += '<div class="detail-item"><span class="label">허용 에러(PF)</span><span class="value">' + data.max_pf_count + '</span></div>';
+    if (data.status_str == 'COMPLETED') {
+        str += '<div class="detail-item"><span class="label">파일 크기</span><span class="value">' + data.filesize_str + '</span></div>';
+        str += '<div class="detail-item"><span class="label">최종 속도</span><span class="value">' + (data.download_speed || 'N/A') + '</span></div>';
+    }
+    str += '</div>';
+    return str;
 }
 
 function button_html(data) {
-  //console.log(data)
-  str = '';
-  if (data.status_str == 'DOWNLOADING') {
-    str = j_button('stop_btn', '중지', {'idx':data.idx}, 'danger', false, false);
-  }
-  $("#button_" + data.idx).html(str);
+    var str = '<div class="action-btn-group">';
+    if (data.status_str == 'DOWNLOADING' || data.status_str == 'WAITING') {
+        str += '<button id="stop_btn" class="action-btn-mini btn-danger" data-idx="'+data.idx+'" title="중지"><i class="fa fa-stop"></i></button>';
+    } else {
+        str += '<button id="delete_btn" class="action-btn-mini btn-warning" data-idx="'+data.idx+'" title="삭제"><i class="fa fa-times"></i></button>';
+    }
+    str += '</div>';
+    $("#button_" + data.idx).html(str);
 }
 
 function status_html(data) {
-  var progress = document.getElementById("progress_" + data.idx);
-  if (!progress) {
-    return;
-  }
-  progress.style.width = data.percent+ '%';
-  progress.innerHTML = data.percent+ '%';
-  progress.style.visibility = 'visible';
-  
-  var statusEl = document.getElementById("status_" + data.idx);
-  if (statusEl) statusEl.innerHTML = data.status_kor;
-  
-  var pfEl = document.getElementById("current_pf_count_" + data.idx);
-  if (pfEl) pfEl.innerHTML = data.current_pf_count;
-  
-  var speedEl = document.getElementById("current_speed_" + data.idx);
-  if (speedEl) speedEl.innerHTML = data.current_speed;
-  
-  var timeEl = document.getElementById("download_time_" + data.idx);
-  if (timeEl) timeEl.innerHTML = data.download_time;
-  
-  var detailEl = document.getElementById("detail_" + data.idx);
-  if (detailEl) detailEl.innerHTML = get_detail(data);
+    var progress = document.getElementById("progress_" + data.idx);
+    if (!progress) return;
+    
+    progress.style.width = data.percent+ '%';
+    progress.innerHTML = data.percent+ '%';
+    progress.style.visibility = 'visible';
+    
+    var statusEl = document.getElementById("status_" + data.idx);
+    if (statusEl) {
+        var status_class = 'status-wait';
+        if (data.status_str === 'DOWNLOADING') status_class = 'status-downloading';
+        else if (data.status_str === 'COMPLETED') status_class = 'status-completed';
+        else if (data.status_str === 'STOP') status_class = 'status-fail';
+        statusEl.innerHTML = '<span class="badge-status ' + status_class + '">'+ data.status_kor + '</span>';
+    }
+    
+    var pfEl = document.getElementById("current_pf_count_" + data.idx);
+    if (pfEl) pfEl.innerHTML = data.current_pf_count;
+    
+    var speedEl = document.getElementById("current_speed_" + data.idx);
+    if (speedEl) speedEl.innerHTML = data.current_speed;
+    
+    var timeEl = document.getElementById("download_time_" + data.idx);
+    if (timeEl) timeEl.innerHTML = data.download_time;
+    
+    var detailEl = document.getElementById("detail_" + data.idx);
+    if (detailEl) detailEl.innerHTML = get_detail(data);
 }
-
 </script>
+
 <style>
-    /* 로딩 인디케이터 오버라이드 */
-    #loading {
-        background: rgba(15, 23, 42, 0.85) !important;
-        backdrop-filter: blur(8px) !important;
+    :root {
+        --forest-950: #022c22;
+        --forest-900: #064e3b;
+        --forest-800: #065f46;
+        --forest-500: #10b981;
+        --forest-400: #34d399;
+        --forest-accent: #6ee7b7;
     }
+
+    body { background-color: var(--forest-950) !important; color: #ecfdf5; }
     
-    #loading img,
-    #loading svg {
-        display: none !important;
-        visibility: hidden !important;
-        width: 0 !important;
-        height: 0 !important;
+    /* Layout Expansion */
+    #main_container, .container, .container-fluid, #anime_downloader_wrapper {
+      max-width: 100% !important;
+      padding-left: 5px !important;
+      padding-right: 5px !important;
+      margin: 0 auto !important;
     }
-    
-    #loading::before {
-        content: '';
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 50px;
-        height: 50px;
-        border: 4px solid rgba(96, 165, 250, 0.2);
-        border-top-color: #60a5fa;
-        border-radius: 50%;
-        animation: spin 0.8s linear infinite;
-        z-index: 100001;
-    }
-    
-    @keyframes spin {
-        to { transform: translate(-50%, -50%) rotate(360deg); }
-    }
-    
-    #modal_loading img,
-    #modal_loading svg {
-        display: none !important;
-        visibility: hidden !important;
-        width: 0 !important;
-        height: 0 !important;
-    }
-    
-    #modal_loading::before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 40px;
-        height: 40px;
-        border: 3px solid rgba(96, 165, 250, 0.2);
-        border-top-color: #60a5fa;
-        border-radius: 50%;
-        animation: spin 0.8s linear infinite;
-    }
-    /* Navigation Menu Override */
-    ul.nav.nav-pills.bg-light {
-        background-color: rgba(30, 41, 59, 0.6) !important;
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 50rem !important;
+
+    /* Navigation (Tabs) Optimization */
+    .nav-pills {
+        background: rgba(6, 78, 59, 0.4) !important;
         padding: 6px !important;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
+        border-radius: 12px !important;
+        border: 1px solid rgba(16, 185, 129, 0.1) !important;
+        margin-bottom: 20px !important;
         display: inline-flex !important;
-        flex-wrap: wrap;
-        justify-content: center;
-        width: auto !important;
-        margin-bottom: 20px;
+        gap: 4px !important;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
     }
-
-    ul.nav.nav-pills .nav-item {
-        margin: 0 2px;
-    }
-
-    ul.nav.nav-pills .nav-link {
-        border-radius: 50rem !important;
+    .nav-pills .nav-link {
+        color: #d1fae5 !important;
+        font-weight: 600 !important;
         padding: 8px 20px !important;
-        color: #94a3b8 !important;
-        font-weight: 600;
-        transition: all 0.3s ease;
+        border-radius: 8px !important;
+        transition: all 0.3s ease !important;
+        border: 1px solid transparent !important;
     }
-
-    ul.nav.nav-pills .nav-link:hover {
-        background-color: rgba(255, 255, 255, 0.1);
+    .nav-pills .nav-link:hover {
+        background: rgba(16, 185, 129, 0.1) !important;
         color: #fff !important;
         transform: translateY(-1px);
     }
-
-    ul.nav.nav-pills .nav-link.active {
-        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+    .nav-pills .nav-link.active {
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
         color: #fff !important;
-        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
+        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
+        border: 1px solid rgba(255,255,255,0.1) !important;
     }
-</style>
 
-</div>
-
-<style>
-    /* Smooth Load Transition */
-    .content-cloak, 
-    #menu_module_div, 
-    #menu_page_div {
-        opacity: 0;
-        transition: opacity 0.5s ease-out;
+    .queue-header-container {
+        display: flex; justify-content: space-between; align-items: flex-end;
+        margin-bottom: 20px; border-bottom: 1px solid rgba(16, 185, 129, 0.2); padding-bottom: 10px;
     }
+    .queue-title { color: var(--forest-accent); font-weight: 700; margin: 0; }
+    .queue-meta { font-size: 12px; color: #6ee7b7; opacity: 0.6; }
+
+    .custom-queue-table {
+        background: rgba(6, 78, 59, 0.2); border-collapse: separate; border-spacing: 0 4px; color: #ecfdf5;
+    }
+    .custom-queue-table thead th {
+        background: rgba(2, 44, 34, 0.8) !important; color: #6ee7b7; font-size: 13px;
+        text-transform: uppercase; border: none !important; padding: 12px 8px !important;
+        text-align: center;
+    }
+    .custom-queue-table tbody tr {
+        background: rgba(6, 78, 59, 0.3); transition: all 0.2s;
+    }
+    .custom-queue-table tbody tr:hover { background: rgba(6, 78, 59, 0.5) !important; }
+    .custom-queue-table td { border: none !important; vertical-align: middle !important; padding: 14px 8px !important; }
+
+    /* Badges & Status */
+    .badge-status {
+        padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
+        display: inline-block; min-width: 60px; text-align: center;
+    }
+    .status-downloading { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
+    .status-wait { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.2); }
+    .status-completed { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
+    .status-fail { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
+
+    /* Progress Bar */
+    .custom-progress { height: 18px; background: rgba(0,0,0,0.4); border-radius: 9px; overflow: hidden; border: 1px solid rgba(16, 185, 129, 0.1); }
+    .custom-progress .progress-bar {
+        background: linear-gradient(90deg, #10b981, #059669) !important;
+        font-weight: 700; font-size: 11px;
+        transition: width 0.4s ease-out;
+        box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+    }
+
+    /* Action Buttons */
+    .action-btn-mini {
+        width: 32px; height: 32px; border-radius: 8px; border: none; font-size: 14px;
+        display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
+    }
+    .action-btn-mini.btn-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
+    .action-btn-mini.btn-danger:hover { background: #ef4444; color: white; transform: scale(1.1); }
+    .action-btn-mini.btn-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
+    .action-btn-mini.btn-warning:hover { background: #f59e0b; color: white; transform: scale(1.1); }
     
-    /* Staggered Delays for Natural Top-Down Flow */
-    #menu_module_div.visible {
-        opacity: 1;
-        transition-delay: 0ms;
-    }
+    .action-btn-group { display: flex; justify-content: center; gap: 4px; }
 
-    #menu_page_div.visible {
-        opacity: 1;
-        transition-delay: 150ms;
+    .header-buttons { display: flex; gap: 10px; align-items: center; }
+    .queue-btn-top {
+        display: flex; align-items: center; gap: 6px; padding: 6px 14px;
+        border: none; border-radius: 8px; font-weight: 600; font-size: 13px;
+        cursor: pointer; transition: all 0.3s ease;
     }
+    .queue-btn-top.btn-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
+    .queue-btn-top.btn-danger:hover { background: #ef4444; color: white; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
+    .queue-btn-top.btn-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
+    .queue-btn-top.btn-warning:hover { background: #f59e0b; color: white; box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
 
-    .content-cloak.visible {
-        opacity: 1;
-        transition-delay: 300ms;
-    }
-    
-    /* Navigation Menu Override (Top Sub-menu) */
-    ul.nav.nav-pills.bg-light {
-        background-color: rgba(30, 41, 59, 0.6) !important;
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 50rem !important;
-        padding: 6px !important;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
-        display: inline-flex !important;
-        flex-wrap: wrap;
-        justify-content: center;
-        width: auto !important;
-        margin-bottom: 20px;
-    }
+    /* Details */
+    .queue-detail-container { color: #d1fae5; font-size: 13px; }
+    .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 20px; }
+    .detail-item { display: flex; gap: 10px; align-items: flex-start; }
+    .detail-item .label { color: #6ee7b7; font-weight: 700; min-width: 100px; opacity: 0.7; font-size: 11px; text-transform: uppercase; }
+    .detail-item .value { color: #ecfdf5; word-break: break-all; }
 
-    ul.nav.nav-pills .nav-item { margin: 0 2px; }
-    ul.nav.nav-pills .nav-link {
-        border-radius: 50rem !important;
-        padding: 8px 20px !important;
-        color: #94a3b8 !important;
-        font-weight: 600;
-        transition: all 0.3s ease;
-    }
-    ul.nav.nav-pills .nav-link:hover {
-        background-color: rgba(255, 255, 255, 0.1);
-        color: #fff !important;
-        transform: translateY(-1px);
-    }
-    ul.nav.nav-pills .nav-link.active {
-        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
-        color: #fff !important;
-        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
-    }
+    /* Smooth Load */
+    .content-cloak { opacity: 0; transition: opacity 0.5s ease-out; }
+    .content-cloak.visible { opacity: 1; }
 </style>
 
 <script type="text/javascript">
 $(document).ready(function(){
-  // Smooth Load Trigger
-  setTimeout(function() {
-      $('.content-cloak, #menu_module_div, #menu_page_div').addClass('visible');
-  }, 100);
+    setTimeout(function() { $('.content-cloak').addClass('visible'); }, 100);
 });
 </script>
-<style>
-/* Mobile Margin Fix */
-@media (max-width: 768px) {
-    body { overflow-x: hidden !important; padding: 0 !important; margin: 0 !important; }
-    .container, .container-fluid, .row, form, #program_list, #program_auto_form, #episode_list, .queue-container, #yommi_wrapper, #main_container {
-        width: 100% !important; max-width: 100% !important;
-        padding-left: 4px !important; padding-right: 4px !important;
-        margin-left: 0 !important; margin-right: 0 !important;
-        box-sizing: border-box !important;
-    }
-    .form-group, .form-inline, [class*="col-"] {
-        flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
-        padding-left: 0 !important; padding-right: 0 !important;
-    }
-    .row { margin-left: 0 !important; margin-right: 0 !important; }
-    .card, .card.p-4, .card.p-lg-5, .card.border-light {
-         width: calc(100% - 8px) !important; max-width: 100% !important;
-         padding: 8px !important; margin: 4px !important;
-         border-radius: 12px !important; box-sizing: border-box !important;
-    }
-    .badge {
-        white-space: normal !important; text-align: left !important;
-        line-height: 1.4 !important; height: auto !important; display: inline-block !important;
-    }
-}
-</style>
+
 {% endblock %}
+
diff --git a/templates/anime_downloader_linkkf_request.html b/templates/anime_downloader_linkkf_request.html
index d975b90..a6097b0 100644
--- a/templates/anime_downloader_linkkf_request.html
+++ b/templates/anime_downloader_linkkf_request.html
@@ -21,12 +21,19 @@
             <!--        </div>-->
         </div>
     </div>
-    <div>
-        <form id="program_list">
-            {{ macros.setting_input_text_and_buttons('code', '작품 Code',
-            [['analysis_btn', '분석'], ['go_linkkf_btn', 'Go 링크 애니']], desc='예)
-            "https://linkkf.app/코드" 나 "코드"') }}
-        </form>
+        <div class="search-input-container">
+            <div class="search-label"><i class="fa fa-link"></i> 작품 URL 또는 코드로 분석하기</div>
+            <div class="search-input-wrapper">
+                <input id="code" name="code" type="text" class="form-control custom-input" placeholder="링크애니 URL 또는 코드를 입력하세요...">
+                <div class="search-buttons">
+                    <button id="analysis_btn" class="custom-btn btn-search"><i class="fa fa-magic"></i> 분석 시작</button>
+                    <button id="go_linkkf_btn" class="custom-btn btn-reset">원래 사이트로 이동</button>
+                </div>
+            </div>
+            <div class="search-desc">
+                <em><i class="fa fa-info-circle"></i> 예) "https://linkkf.app/코드" 나 "코드" 직접 입력</em>
+            </div>
+        </div>
         <form id="program_auto_form">
             <div id="episode_list"></div>
         </form>
@@ -39,7 +46,7 @@
         const package_name = "{{arg['package_name'] }}";
         const sub = "{{arg['sub'] }}";
         const ohli24_url = "{{arg['ohli24_url']}}";
-        {#let current_data = '';#}
+        // let current_data = '';
 
         const params = new Proxy(new URLSearchParams(window.location.search), {
             get: (searchParams, prop) => searchParams.get(prop),
@@ -163,7 +170,7 @@
             for (let i in data.episode) {
                 str += '<div class="episode-card">';
                 str += '<div class="episode-thumb">';
-                str += '<span class="episode-num">' + (parseInt(i) + 1) + '화</span>';
+                str += '<span class="episode-num">' + data.episode[i].ep_num + '화</span>';
                 str += '</div>';
                 str += '<div class="episode-info">';
                 str += '<div class="episode-title">' + data.episode[i].title + '</div>';
@@ -348,13 +355,137 @@
         }
 
         body {
-            background-image: linear-gradient(90deg, #33242c, #263341, #17273a);
-
+            background-image: linear-gradient(90deg, #022c22, #064e3b, #065f46);
         }
 
         #anime_downloader_wrapper {
+            color: #ecfdf5;
+            padding: 5px;
+        }
 
-            color: #d6eaf8;
+        /* Navigation (Tabs) Optimization */
+        .nav-pills {
+            background: rgba(6, 78, 59, 0.4) !important;
+            padding: 6px !important;
+            border-radius: 12px !important;
+            border: 1px solid rgba(16, 185, 129, 0.1) !important;
+            margin-bottom: 20px !important;
+            display: inline-flex !important;
+            gap: 4px !important;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
+        }
+        .nav-pills .nav-link {
+            color: #d1fae5 !important;
+            font-weight: 600 !important;
+            padding: 8px 20px !important;
+            border-radius: 8px !important;
+            transition: all 0.3s ease !important;
+            border: 1px solid transparent !important;
+        }
+        .nav-pills .nav-link:hover {
+            background: rgba(16, 185, 129, 0.1) !important;
+            color: #fff !important;
+            transform: translateY(-1px);
+        }
+        .nav-pills .nav-link.active {
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
+            color: #fff !important;
+            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
+            border: 1px solid rgba(255,255,255,0.1) !important;
+        }
+
+        /* Search Input Polishing */
+        .search-input-container {
+            background: rgba(6, 78, 59, 0.4);
+            backdrop-filter: blur(12px);
+            padding: 24px;
+            border-radius: 20px;
+            border: 1px solid rgba(16, 185, 129, 0.2);
+            margin-bottom: 30px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+
+        .search-label {
+            font-size: 16px;
+            font-weight: 700;
+            color: #ecfdf5;
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .search-input-wrapper {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+
+        .custom-input {
+            background-color: rgba(2, 44, 34, 0.6) !important;
+            border: 1px solid rgba(16, 185, 129, 0.3) !important;
+            color: #fff !important;
+            border-radius: 12px !important;
+            padding: 12px 18px !important;
+            height: 50px !important;
+            flex: 1;
+            min-width: 300px;
+            font-size: 15px;
+            transition: all 0.2s;
+        }
+
+        .custom-input:focus {
+            border-color: #10b981 !important;
+            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
+            background-color: rgba(2, 44, 34, 0.8) !important;
+        }
+
+        .search-buttons {
+            display: flex;
+            gap: 10px;
+        }
+
+        .custom-btn {
+            height: 50px;
+            padding: 0 24px;
+            border-radius: 12px;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.2s;
+            border: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .btn-search {
+            background: linear-gradient(135deg, #10b981, #059669);
+            color: white;
+            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+        }
+
+        .btn-search:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+        }
+
+        .btn-reset {
+            background: rgba(255, 255, 255, 0.05);
+            color: #6ee7b7;
+            border: 1px solid rgba(16, 185, 129, 0.2);
+        }
+
+        .btn-reset:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: #fff;
+        }
+
+        .search-desc {
+            margin-top: 12px;
+            font-size: 13px;
+            color: #6ee7b7;
+            opacity: 0.7;
         }
 
         button.code-button {
@@ -456,16 +587,14 @@
 
         .card {
             border: none;
-            box-shadow: inset 1px 1px hsl(0deg 0% 100% / 20%), inset -1px -1px hsl(0deg 0% 100% / 10%), 1px 3px 24px -1px rgb(0 0 0 / 15%);
-            background-color: transparent;
-            background-image: linear-gradient(125deg, hsla(0, 0%, 100%, .3), hsla(0, 0%, 100%, .2) 70%);
-            backdrop-filter: blur(5px);
+            box-shadow: inset 1px 1px hsl(0deg 0% 100% / 10%), inset -1px -1px hsl(0deg 0% 100% / 5%), 0 12px 24px rgba(0,0,0,0.3);
+            background-color: rgba(6, 78, 59, 0.4);
+            backdrop-filter: blur(12px);
         }
 
         .card.border-light {
-            border-radius: 30px 10px;
-            --bs-border-opacity: 1;
-            border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
+            border-radius: 20px;
+            border: 1px solid rgba(16, 185, 129, 0.2) !important;
         }
 
         /* 에피소드 목록 컨테이너 */
@@ -504,7 +633,7 @@
             height: 40px;
             border-radius: 8px;
             overflow: hidden;
-            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
             display: flex;
             align-items: center;
             justify-content: center;
diff --git a/templates/anime_downloader_linkkf_search.html b/templates/anime_downloader_linkkf_search.html
index 06a12a8..ef02ff3 100644
--- a/templates/anime_downloader_linkkf_search.html
+++ b/templates/anime_downloader_linkkf_search.html
@@ -359,11 +359,11 @@
           // tmp +=
           //   '<img class="card-img-top lazyload" src="./static/img_loader_x200.svg" data-original="' + data.episode[i].image_link + '" />';
           tmp +=
-              '<img class="card-img-top lazy" src="{{ url_for('.static', filename='img_loader_x200.svg') }}" data-lazy-src="' +
+              `<img class="card-img-top lazy" src="{{ url_for('.static', filename='img_loader_x200.svg') }}" data-lazy-src="` +
               data.data[i].postthum +
-              '" style="cursor: pointer" onclick="location.href=\'./request?code=' +
+              `" style="cursor: pointer" onclick="location.href='./request?code=` +
               data.data[i].postid +
-              "'\"/>";
+              `'"/>`;
           if (current_cate === "ing") {
               tmp +=
                   '<span class="badge badge-danger badge-on-image">' +
@@ -476,7 +476,7 @@
           case "ing":
               // console.log("ing.....")
 
-          {#spinner_loading.style.display = "block";#}
+          // spinner_loading.style.display = "block";
               current_cate = "ing";
               get_anime_list(1, "ing");
               break;
@@ -680,7 +680,7 @@
       console.dir(e.target.scrollingElement.scrollHeight);
       const {scrollTop, scrollHeight, clientHeight} = e.target.scrollingElement;
       if (Math.round(scrollHeight - scrollTop) <= clientHeight + 170) {
-          {#document.getElementById("spinner").style.display = "block";#}
+          // document.getElementById("spinner").style.display = "block";
           // console.log("loading");
           // console.log("now page::> ", page);
           // console.log("next_page::> ", String(next_page));
@@ -796,22 +796,22 @@
 
 <style>
   :root {
-      --bg-primary: #0f172a;
-      --bg-secondary: #1e293b;
-      --bg-card: rgba(30, 41, 59, 0.85);
-      --text-primary: #f1f5f9;
-      --text-secondary: #94a3b8;
-      --accent-primary: #60a5fa;
-      --accent-secondary: #818cf8;
+      --bg-primary: #022c22;
+      --bg-secondary: #064e3b;
+      --bg-card: rgba(6, 78, 59, 0.4);
+      --text-primary: #ecfdf5;
+      --text-secondary: #6ee7b7;
+      --accent-primary: #10b981;
+      --accent-secondary: #059669;
       --accent-success: #34d399;
       --accent-warning: #fbbf24;
-      --accent-danger: #f87171;
-      --border-color: rgba(148, 163, 184, 0.2);
+      --accent-danger: #ef4444;
+      --border-color: rgba(16, 185, 129, 0.2);
       --shadow-color: rgba(0, 0, 0, 0.3);
   }
 
   body {
-      background: linear-gradient(135deg, var(--bg-primary) 0%, #1a2744 50%, var(--bg-secondary) 100%) !important;
+      background: linear-gradient(135deg, var(--bg-primary) 0%, #064e3b 50%, var(--bg-secondary) 100%) !important;
       min-height: 100vh;
       font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
   }
@@ -827,10 +827,42 @@
       padding: 0 20px;
   }
 
-  .container, .container-fluid {
-      max-width: 100% !important;
-      padding: 0 !important;
-  }
+   .container, .container-fluid, #anime_downloader_wrapper, #yommi_wrapper {
+       max-width: 100% !important;
+       padding-left: 5px !important;
+       padding-right: 5px !important;
+   }
+
+   /* Navigation (Tabs) Optimization */
+   .nav-pills {
+       background: rgba(6, 78, 59, 0.4) !important;
+       padding: 6px !important;
+       border-radius: 12px !important;
+       border: 1px solid rgba(16, 185, 129, 0.1) !important;
+       margin-bottom: 20px !important;
+       display: inline-flex !important;
+       gap: 4px !important;
+       box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
+   }
+   .nav-pills .nav-link {
+       color: #d1fae5 !important;
+       font-weight: 600 !important;
+       padding: 8px 20px !important;
+       border-radius: 8px !important;
+       transition: all 0.3s ease !important;
+       border: 1px solid transparent !important;
+   }
+   .nav-pills .nav-link:hover {
+       background: rgba(16, 185, 129, 0.1) !important;
+       color: #fff !important;
+       transform: translateY(-1px);
+   }
+   .nav-pills .nav-link.active {
+       background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
+       color: #fff !important;
+       box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
+       border: 1px solid rgba(255,255,255,0.1) !important;
+   }
 
   .input-group {
       max-width: 600px;
@@ -1146,9 +1178,9 @@
     
     /* Navigation Menu Override (Top Sub-menu) */
     ul.nav.nav-pills.bg-light {
-        background-color: rgba(30, 41, 59, 0.6) !important;
+        background-color: rgba(6, 78, 59, 0.6) !important;
         backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(16, 185, 129, 0.08);
         border-radius: 50rem !important;
         padding: 6px !important;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
@@ -1163,19 +1195,19 @@
     ul.nav.nav-pills .nav-link {
         border-radius: 50rem !important;
         padding: 8px 20px !important;
-        color: #94a3b8 !important;
+        color: #6ee7b7 !important;
         font-weight: 600;
         transition: all 0.3s ease;
     }
     ul.nav.nav-pills .nav-link:hover {
-        background-color: rgba(255, 255, 255, 0.1);
+        background-color: rgba(16, 185, 129, 0.1);
         color: #fff !important;
         transform: translateY(-1px);
     }
     ul.nav.nav-pills .nav-link.active {
-        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
         color: #fff !important;
-        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
+        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
     }
 </style>
 
diff --git a/templates/anime_downloader_linkkf_setting.html b/templates/anime_downloader_linkkf_setting.html
index 3235df8..c65f5f7 100644
--- a/templates/anime_downloader_linkkf_setting.html
+++ b/templates/anime_downloader_linkkf_setting.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block content %}
-<div id="linkkf_setting_wrapper" class="container-fluid mt-4 mx-auto content-cloak" style="max-width: 100%;">
+<div id="linkkf_setting_wrapper" class="container-fluid mt-4 mx-auto content-cloak" style="max-width: 100%; padding-left: 5px; padding-right: 5px;">
   
   <div class="glass-card p-4">
     <div class="d-flex justify-content-between align-items-center mb-4">
@@ -24,8 +24,9 @@
     {{ macros.m_tab_content_start('normal', true) }}
       {{ macros.setting_input_text_and_buttons('linkkf_url', 'linkkf URL', [['go_btn', 'GO']], value=arg['linkkf_url']) }}
       {{ macros.setting_input_text('linkkf_download_path', '저장 폴더', value=arg['linkkf_download_path'], desc='정상적으로 다운 완료 된 파일이 이동할 폴더 입니다. ') }}
-      {{ macros.setting_input_int('linkkf_max_ffmpeg_process_count', '동시 다운로드 수', value=arg['linkkf_max_ffmpeg_process_count'], desc='동시에 다운로드 할 에피소드 갯수입니다.') }}
-      {{ macros.setting_select('linkkf_download_method', '다운로드 방법', [['ffmpeg', 'ffmpeg'], ['ytdlp', 'yt-dlp']], col='3', value=arg['linkkf_download_method'], desc='ffmpeg: HLS 다운로더 사용, yt-dlp: yt-dlp 사용') }}
+      {{ macros.setting_input_int('linkkf_max_ffmpeg_process_count', '동시 다운로드 에피소드 수', value=arg['linkkf_max_ffmpeg_process_count'], desc='동시에 다운로드할 에피소드 개수입니다.') }}
+      {{ macros.setting_select('linkkf_download_method', '다운로드 방법', [['ffmpeg', 'ffmpeg (기본)'], ['ytdlp', 'yt-dlp (단일쓰레드)'], ['aria2c', 'yt-dlp (멀티쓰레드/aria2c)']], col='3', value=arg['linkkf_download_method'], desc='aria2c 선택 시 병렬 다운로드로 속도가 향상됩니다.') }}
+      {{ macros.setting_input_int('linkkf_download_threads', '멀티쓰레드 갯수', value=arg['linkkf_download_threads'], desc='yt-dlp/aria2c 사용 시 적용될 병렬 다운로드 쓰레드 수입니다. (기본 16)') }}
       {{ macros.setting_checkbox('linkkf_order_desc', '요청 화면 최신순 정렬', value=arg['linkkf_order_desc'], desc='On : 최신화부터, Off : 1화부터') }}
       {{ macros.setting_checkbox('linkkf_auto_make_folder', '제목 폴더 생성', value=arg['linkkf_auto_make_folder'], desc='제목으로 폴더를 생성하고 폴더 안에 다운로드합니다.') }}
       <div id="linkkf_auto_make_folder_div" class="collapse pl-4 border-left ml-3" style="border-color: rgba(255,255,255,0.1) !important;">
@@ -108,28 +109,35 @@
         margin-bottom: 20px;
     }
 
-    ul.nav.nav-pills .nav-item {
-        margin: 0 2px;
+    /* Navigation (Tabs) Optimization */
+    .nav-pills {
+        background: rgba(6, 78, 59, 0.4) !important;
+        padding: 6px !important;
+        border-radius: 12px !important;
+        border: 1px solid rgba(16, 185, 129, 0.1) !important;
+        margin-bottom: 20px !important;
+        display: inline-flex !important;
+        gap: 4px !important;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
     }
-
-    ul.nav.nav-pills .nav-link {
-        border-radius: 50rem !important;
-        padding: 8px 20px !important;
-        color: #94a3b8 !important; /* Muted text */
-        font-weight: 600;
-        transition: all 0.3s ease;
+    .nav-pills .nav-link {
+        color: #d1fae5 !important;
+        font-weight: 600 !important;
+        padding: 8px 18px !important;
+        border-radius: 8px !important;
+        transition: all 0.3s ease !important;
+        border: 1px solid transparent !important;
     }
-
-    ul.nav.nav-pills .nav-link:hover {
-        background-color: rgba(255, 255, 255, 0.1);
+    .nav-pills .nav-link:hover {
+        background: rgba(16, 185, 129, 0.1) !important;
         color: #fff !important;
         transform: translateY(-1px);
     }
-
-    ul.nav.nav-pills .nav-link.active {
-        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+    .nav-pills .nav-link.active {
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
         color: #fff !important;
-        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
+        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
+        border: 1px solid rgba(255,255,255,0.1) !important;
     }
 
     /* Form Controls */
@@ -142,8 +150,8 @@
     
     .form-control:focus, .custom-select:focus, textarea:focus {
         background-color: rgba(0, 0, 0, 0.5) !important;
-        border-color: #3b82f6 !important;
-        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
+        border-color: #10b981 !important;
+        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
     }
 
     /* Labels & Text */
@@ -168,15 +176,15 @@
     }
 
     .btn-primary, #globalSettingSaveBtn {
-        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
         color: white;
-        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
+        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
     }
 
     .btn-primary:hover, #globalSettingSaveBtn:hover {
-        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
+        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
         transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
+        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
     }
     
     /* GO Button specific (Input Group) */
@@ -218,8 +226,8 @@
         border-color: rgba(255,255,255,0.2);
     }
     .custom-control-input:checked ~ .custom-control-label::before {
-        background-color: #3b82f6;
-        border-color: #3b82f6;
+        background-color: #10b981;
+        border-color: #10b981;
     }
 
     /* Collapse Borders */
diff --git a/templates/anime_downloader_ohli24_list.html b/templates/anime_downloader_ohli24_list.html
index 5187150..c4ff8ef 100644
--- a/templates/anime_downloader_ohli24_list.html
+++ b/templates/anime_downloader_ohli24_list.html
@@ -31,8 +31,28 @@
         <div id="list_div"></div>
         <div id='page2'></div>
     </div>
+
+    <!-- Custom Confirmation Modal -->
+    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content animate__animated animate__zoomIn" style="background: #1e293b; border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);">
+                <div class="modal-body text-center" style="padding: 40px 30px;">
+                    <div style="width: 70px; height: 70px; background: rgba(239, 68, 68, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;">
+                        <i class="fa fa-trash animate__animated animate__shakeX animate__infinite" style="color: #ef4444; font-size: 30px;"></i>
+                    </div>
+                    <h4 style="color: #f1f5f9; font-weight: 700; margin-bottom: 12px;">정말 삭제하시겠습니까?</h4>
+                    <p style="color: #94a3b8; font-size: 15px; margin-bottom: 32px;">한 번 삭제된 기록은 다시 복구할 수 없습니다.</p>
+                    <div style="display: flex; gap: 12px; justify-content: center;">
+                        <button type="button" class="custom-btn btn-reset" data-dismiss="modal" style="width: 120px;">취소</button>
+                        <button type="button" id="confirmDeleteBtn" class="custom-btn" style="width: 120px; background: #ef4444; color: white;">삭제하기</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     
-    <!-- Video.js CDN -->
+    <!-- Animate.css & Video.js -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
     <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
     <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
     
@@ -128,7 +148,7 @@
 
         function global_sub_request_search(page, move_top = true) {
             console.log('........................')
-            var formData = getFormdata('#form_search')
+            var formData = get_formdata('#form_search')
             formData += '&page=' + page;
             $.ajax({
                 url: '/' + package_name + '/ajax/' + sub + '/web_list3',
@@ -150,8 +170,7 @@
 
         $("#search").click(function (e) {
             e.preventDefault();
-            {#global_sub_request_search('1');#}
-            globalRequestSearch('1');
+            global_sub_request_search('1');
         });
 
         $("body").on('click', '#page', function (e) {
@@ -185,18 +204,27 @@
             global_sub_request_search('1')
         });
 
+        var targetDeleteId = null;
+
         $("body").on('click', '.btn-remove', function (e) {
             e.preventDefault();
-            id = $(this).data('id');
+            targetDeleteId = $(this).data('id');
+            $('#confirmModal').modal('show');
+        });
+
+        $('#confirmDeleteBtn').click(function() {
+            if (!targetDeleteId) return;
+            
             $.ajax({
                 url: '/' + package_name + '/ajax/' + sub + '/db_remove',
                 type: "POST",
                 cache: false,
-                data: {id: id},
+                data: {id: targetDeleteId},
                 dataType: "json",
                 success: function (data) {
+                    $('#confirmModal').modal('hide');
                     if (data) {
-                        $.notify('<strong>삭제되었습니다.</strong>', {
+                        $.notify('<strong>성공적으로 삭제되었습니다.</strong>', {
                             type: 'success'
                         });
                         global_sub_request_search(current_data.paging.current_page, false)