@charset "utf-8";

:root {
    --custom-font: 'PfStardust30', sans-serif;
    --digital-font: 'VT323', monospace;
    --hw-font: 'Nanum Pen Script', cursive;
    --point-blue: #89b4c4;
    --point-pink: #d195a4;
    --text-main: #2d3748;
    --text-sub: #718096;
}

body, input, textarea, button { font-family: var(--custom-font) !important; }

.marker-plan { color: rgba(168, 192, 204, 0.95); text-shadow: 0 0 6px rgba(255,255,255,0.7), 0 0 2px rgba(255,255,255,0.9); }
.marker-ing  { color: rgba(255, 182, 193, 0.95); text-shadow: 0 0 6px rgba(255, 182, 193, 0.6), 0 0 2px rgba(255,255,255,0.5); }
.marker-hold { color: rgba(216, 180, 226, 0.95); text-shadow: 0 0 6px rgba(216, 180, 226, 0.6), 0 0 2px rgba(255,255,255,0.5); }
.marker-done { color: rgba(125, 180, 212, 0.95); text-shadow: 0 0 6px rgba(125, 180, 212, 0.6), 0 0 2px rgba(255,255,255,0.5); }

/* =========================================
   1. 빈티지 데칼 스타일 - 헤더 & 컨트롤
========================================= */
.tape_board_container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 10px; box-sizing: border-box; }

.hud_header { margin-bottom: 50px; text-align: center; }
.hud_top_info { display: flex; justify-content: space-between; font-family: var(--digital-font); font-size: 16px; color: var(--text-sub); letter-spacing: 2px; padding: 0 10px; margin-bottom: 10px; }
.hud_main_title { font-size: 48px; font-weight: 900; letter-spacing: 5px; margin: 0; color: transparent; -webkit-text-stroke: 1.5px var(--text-main); text-transform: uppercase; font-family: var(--digital-font); }

.hud_controls { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; flex-wrap: wrap; gap: 15px; }
.hud_categories { display: flex; gap: 15px; }
.hud_categories a { color: var(--text-sub); font-family: var(--digital-font); font-size: 20px; text-decoration: none; transition: color 0.2s; letter-spacing: 1px; }
.hud_categories a.is-active, .hud_categories a:hover { color: var(--text-main); font-weight: bold; border-bottom: 2px solid var(--text-main); }

.hud_right_btns { display: flex; gap: 10px; align-items: center; }
.hud_select { background: rgba(255,255,255,0.4); border: 1px solid rgba(0,0,0,0.1); border-radius: 20px; padding: 6px 15px; font-family: var(--digital-font); font-size: 16px; color: var(--text-main); outline: none; cursor: pointer; backdrop-filter: blur(5px); }
.hud_btn { background: rgba(255,255,255,0.4); border: 1px solid rgba(0,0,0,0.1); border-radius: 20px; padding: 6px 16px; font-family: var(--digital-font); font-size: 18px; color: var(--text-main); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; backdrop-filter: blur(5px); }
.hud_btn:hover { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.hud_btn_icon { color: var(--text-main); font-size: 18px; padding: 5px; transition: transform 0.3s; }
.hud_btn_icon:hover { transform: rotate(90deg); color: var(--point-blue); }

/* =========================================
   2. 카세트 테이프 리스트 디자인
========================================= */
.tape_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 35px; width: 100%; box-sizing: border-box; }
.tape_wrapper { position: relative; width: 100%; perspective: 1000px; }

.tape_item { position: relative; display: block; width: 100%; aspect-ratio: 1.58 / 1; border-radius: 8px; text-decoration: none; transition: transform 0.4s ease; transform-style: preserve-3d; cursor: pointer; }
.tape_item:hover { transform: translateY(-5px); }

.tape_clear_body { position: absolute; inset: 0; z-index: 1; background: rgba(30, 30, 35, 0.4); backdrop-filter: blur(2px); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.3); overflow: hidden; }
.tape_tint_bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(40px) saturate(150%); opacity: 0.45; z-index: 0; pointer-events: none; }
.tape_screws { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #ccc; border: 1px solid #777; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.6); }
.tape_screws::after { content: ''; position: absolute; top: 4px; left: 1px; width: 6px; height: 1px; background: rgba(0,0,0,0.6); transform: rotate(45deg); }
.tape_screws.tl { top: 8px; left: 8px; } .tape_screws.tr { top: 8px; right: 8px; } .tape_screws.bl { bottom: 8px; left: 8px; } .tape_screws.br { bottom: 8px; right: 8px; }
.printed_target_date { position: absolute; top: 12px; right: 40px; font-family: var(--digital-font); font-size: 14px; color: rgba(255, 255, 255, 0.6); text-shadow: 1px 1px 2px rgba(0,0,0,0.8); letter-spacing: 1px; z-index: 5; }
.tape_decal_bg { position: absolute; top: 15%; left: 10%; width: 80%; height: 60%; background-size: cover; background-position: center; border-radius: 6px; z-index: 2; opacity: 0.3; mix-blend-mode: screen; border: 1px solid rgba(255,255,255,0.1); }

.tape_window { position: absolute; top: 30%; left: 15%; width: 70%; height: 38%; background: rgba(255,255,255,0.1); border-radius: 12px; border: 1px solid rgba(255,255,255,0.2); box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: flex-end; gap: 20px; padding: 0; padding-bottom: 10px; box-sizing: border-box; z-index: 3; }
.tape_path_line { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 125px; height: 6px; background: #151515; border-top: 1px solid #333; border-bottom: 1px solid #000; box-shadow: 0 2px 4px rgba(0,0,0,0.8); z-index: 1; }
.reel_area { width: 105px; height: 105px; display: flex; justify-content: center; align-items: flex-end; position: relative; z-index: 2; }
.magnetic_tape { border-radius: 50%; background: radial-gradient(circle, #222 30%, #111 70%, #000 100%); border: 1px solid rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; box-shadow: 0 3px 8px rgba(0,0,0,0.8); transition: width 0.5s ease, height 0.5s ease; }
.hub_spoke { width: 44px; height: 44px; border-radius: 50%; background: #e0e0e0; border: 4px dashed #999; flex-shrink: 0; box-sizing: border-box; }

.tape_item:hover .left_reel .magnetic_tape { animation: spin_tape 2.5s linear infinite; }
.tape_item:hover .right_reel .magnetic_tape { animation: spin_tape 2.7s linear infinite; }
@keyframes spin_tape { 100% { transform: rotate(360deg); } }
.spin_left { animation: spin_tape 2.5s linear infinite; }
.spin_right { animation: spin_tape 2.7s linear infinite; }

.marker_progress { position: absolute; top: 12%; left: 10%; font-family: var(--hw-font); font-size: 34px; line-height: 1; display: flex; gap: 8px; align-items: center; transform: rotate(-4deg); z-index: 10; }
.marker_visibility { position: absolute; top: 22%; right: 12%; font-family: var(--hw-font); font-size: 20px; line-height: 1; transform: rotate(3deg); z-index: 10; }
.marker_author { position: absolute; bottom: 12%; left: 15%; font-family: var(--hw-font); font-size: 18px; transform: rotate(-3deg); z-index: 11; }
.sticker_title { position: absolute; bottom: 18%; left: 50%; width: 60%; background: #e3e1d8; border: 1px solid #c8c6be; padding: 8px 12px; font-size: 15px; font-weight: 800; color: #2b2b2b; box-shadow: 1px 2px 4px rgba(0,0,0,0.2), inset 0 0 4px rgba(0,0,0,0.05); transform: translateX(-50%) rotate(1deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; clip-path: polygon(0% 5%, 1% 15%, 0% 25%, 2% 35%, 0% 45%, 1% 55%, 0% 65%, 2% 75%, 0% 85%, 1% 95%, 0% 100%, 100% 100%, 99% 95%, 100% 85%, 98% 75%, 100% 65%, 99% 55%, 100% 45%, 98% 35%, 100% 25%, 99% 15%, 100% 5%, 100% 0%, 0% 0%); z-index: 10; }
.tape_bridge { position: absolute; bottom: 0; left: 20%; width: 60%; height: 14%; background: rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.3); clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); box-shadow: inset 0 5px 15px rgba(0,0,0,0.3); z-index: 5; }

.tape_jewel_case { position: absolute; inset: 0; z-index: 20; background: #fff; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); display: flex; overflow: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
.tape_item:hover .tape_jewel_case { opacity: 0; visibility: hidden; }
.case_cover { flex: 1; height: 100%; background-size: cover; background-position: center; z-index: 1; display: flex; align-items: center; justify-content: center; border-right: 18px solid #ddd; }
.filter-grayscale { filter: grayscale(100%) contrast(110%); }
.fallback_tag { font-family: var(--digital-font); background: #111; color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 14px; letter-spacing: 2px; }
.case_plastic_lid { position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 2px solid rgba(255,255,255,0.6); border-radius: 8px; }
.hinge { position: absolute; right: 0; width: 12px; height: 30px; background: rgba(255,255,255,0.4); border-left: 1px solid rgba(0,0,0,0.1); border-radius: 3px 0 0 3px; box-shadow: inset 2px 0 4px rgba(0,0,0,0.05); }
.hinge.top-left { top: 15px; } .hinge.bottom-left { bottom: 15px; }
.lid_glare { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0) 60%); }

.todo_menu_btn { position: absolute; top: 12px; right: 12px; z-index: 30; color: #111; font-size: 18px; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.7); border-radius: 50%; backdrop-filter: blur(2px); transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.todo_menu_btn:hover { background: #fff; color: var(--point-blue); }
.todo_dropdown { display: none; position: absolute; top: 40px; right: 12px; background: rgba(255,255,255,0.95); border: 1px solid #e2e8f0; z-index: 40; min-width: 100px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); overflow: hidden; }
.todo_dropdown.show { display: flex; flex-direction: column; }
.todo_dropdown a { padding: 10px 15px; color: var(--text-main); font-size: 13px; font-weight: 600; text-decoration: none; border-bottom: 1px solid #edf2f7; display: flex; align-items: center; gap: 8px; transition: background 0.2s; }
.todo_dropdown a:hover { background: #f8fafc; color: var(--point-blue); }
.todo_dropdown a.del_btn:hover { background: #fff5f5; color: #e53e3e; }

/* =========================================
   4. 내부 뷰 화면 (워크맨 & 영수증 2단 분할 레이아웃)
========================================= */
.deck_player_wrapper { display: flex; gap: 40px; max-width: 1100px; margin: 60px auto; align-items: flex-start; }
@media (max-width: 768px) { .deck_player_wrapper { flex-direction: column; } }

/* 왼쪽: 워크맨 기계 */
.deck_left_panel { flex: 1; min-width: 380px; position: sticky; top: 40px; display: flex; align-items: flex-start; }
.walkman_side_buttons { display: flex; flex-direction: column; gap: 10px; margin-right: -5px; z-index: 1; margin-top: 60px; }
.w_btn_side { width: 25px; height: 60px; background: #aebacd; border-radius: 8px 0 0 8px; border: 1px solid #fff; border-right: none; box-shadow: -3px 3px 5px rgba(0,0,0,0.1), inset 2px 2px 5px rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.1s; cursor: pointer; color: #5a6b82; padding-right: 5px; }
.w_btn_side.btn_rec { background: #d8c2cc; }
.w_btn_side:active { transform: translateX(3px); box-shadow: -1px 1px 2px rgba(0,0,0,0.1); }
.w_btn_side:hover { color: var(--point-blue); }
.w_btn_side.btn_rec:hover { color: #ff3366; }

.walkman_main_body { flex: 1; background: linear-gradient(135deg, #e4eaf1 0%, #b5c6d6 100%); border-radius: 20px; padding: 25px; z-index: 2; box-shadow: 10px 15px 30px rgba(0,0,0,0.15), inset -4px -4px 12px rgba(0,0,0,0.1), inset 4px 4px 15px rgba(255,255,255,0.9); border: 1px solid #fff; }
.walkman_brand { display: flex; justify-content: space-between; font-family: var(--digital-font); font-size: 14px; color: #5a6b82; margin-bottom: 15px; letter-spacing: 1px; padding: 0 5px; }
.brand_logo { font-weight: 900; font-size: 16px; letter-spacing: 2px; }

.walkman_window_bezel { background: #111; border-radius: 12px; padding: 15px; margin-bottom: 25px; box-shadow: inset 0 8px 15px rgba(0,0,0,0.9), inset 0 2px 4px rgba(0,0,0,0.8), 0 2px 0 rgba(255,255,255,0.8); position: relative; }
.deck_inserted_tape { aspect-ratio: 1.58 / 1; border-radius: 6px; position: relative; overflow: hidden; border: 1px solid #333; background: #2a2a2f; }
.deck_glass_glare { position: absolute; inset: 0; pointer-events: none; border-radius: 12px; background: linear-gradient(105deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.2) 40%, transparent 60%, transparent 100%); box-shadow: inset 0 0 20px rgba(255,255,255,0.1); }

.deck_parent_info { background: #fcfbf9; padding: 20px; padding-bottom: 45px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05), inset 0 0 5px rgba(0,0,0,0.02); border: 1px solid #e2e8f0; position: relative; }
.d_info_top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.d_title { font-size: 20px; font-weight: 800; color: #222; margin-bottom: 10px; word-break: keep-all; line-height: 1.3; }
.d_desc { font-size: 14px; color: #555; line-height: 1.6; }
.d_visibility { position: absolute; top: 20px; right: 20px; font-family: var(--hw-font); font-size: 18px; transform: rotate(5deg); }
.d_dates_bottom { position: absolute; bottom: 15px; right: 20px; font-family: var(--digital-font); font-size: 14px; color: #888; text-align: right; letter-spacing: 0.5px; }

/* 오른쪽: 영수증 */
.deck_right_panel { flex: 1.5; min-width: 0; position: relative; }
.todo_timeline_container { background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E"); padding: 40px 30px; position: relative; box-shadow: 3px 5px 25px rgba(0,0,0,0.08); color: #222; margin-bottom: 40px; }
.scotch_tape { position: absolute; top: -15px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 140px; height: 35px; background: rgba(255, 255, 255, 0.4); box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.6); backdrop-filter: blur(2px); border: 1px solid rgba(255,255,255,0.2); z-index: 10; }
.receipt_jagged_top { display: none; }
.receipt_jagged_bottom { position: absolute; bottom: -12px; left: 0; right: 0; height: 12px; background: #ffffff; clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 98% 100%, 96% 75%, 94% 95%, 91% 80%, 89% 100%, 86% 82%, 84% 95%, 81% 85%, 78% 100%, 75% 78%, 72% 90%, 69% 82%, 66% 100%, 63% 75%, 60% 95%, 57% 85%, 54% 100%, 51% 82%, 48% 95%, 45% 75%, 42% 100%, 39% 85%, 36% 95%, 33% 80%, 30% 100%, 27% 78%, 24% 95%, 21% 80%, 18% 100%, 15% 85%, 12% 95%, 9% 75%, 6% 100%, 3% 85%, 0% 100%); filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1)); }
.receipt_header { border-bottom: 2px dashed #bbb; padding-bottom: 15px; margin-bottom: 20px; text-align: center; }
.receipt_header h2 { font-family: var(--digital-font); font-size: 28px; margin: 0; color: #111; letter-spacing: 2px; }
.log_list { display: flex; flex-direction: column; gap: 0; }
.log_item { padding: 25px 0; border-bottom: 1px dashed #ccc; }
.log_item:last-child { border-bottom: none; }
.log_meta { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px; font-family: var(--digital-font); color: #555; }
.meta_left { display: flex; gap: 15px; align-items: baseline; }
.track_num { font-size: 20px; font-weight: bold; color: #111; }
.date { font-size: 15px; }
.pct { font-size: 18px; font-weight: bold; color: #222; }
.log_text { font-family: var(--custom-font); font-size: 15px; color: #333; line-height: 1.7; margin-bottom: 15px; }
.log_actions { display: flex; gap: 15px; justify-content: flex-end; font-family: var(--digital-font); }
.log_actions a { color: #888; text-decoration: none; font-size: 16px; transition: color 0.2s; }
.log_actions a:hover { color: var(--point-blue); }
.log_actions a.btn_del:hover { color: var(--point-pink); }

/* ✅ 영수증 기계 컨셉의 플로팅 폼 (워크맨과 깔맞춤) */
.floating_input_wrap {
    position: sticky; bottom: 20px; z-index: 100;
    /* 데크와 동일한 오션블루+실버 그라데이션 */
    background: linear-gradient(135deg, #e4eaf1 0%, #b5c6d6 100%);
    padding: 20px; border-radius: 16px; border: 1px solid #fff; 
    box-shadow: 10px 15px 30px rgba(0,0,0,0.15), inset -4px -4px 12px rgba(0,0,0,0.1), inset 4px 4px 15px rgba(255,255,255,0.9);
    width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box;
}

.floating_input_top { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; }

/* 첨부 버튼: 기계식 캡 느낌 */
.floating_file_label { 
    background: #e2e8f0; border: 1px solid #cbd5e1;
    width: 46px; height: 46px; border-radius: 6px;
    display: flex; justify-content: center; align-items: center;
    color: #64748b; cursor: pointer; font-size: 18px;
    box-shadow: 0 3px 0 #cbd5e1, 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.1s; flex-shrink:0;
}
.floating_file_label:active { transform: translateY(3px); box-shadow: 0 0 0 #cbd5e1, 0 1px 2px rgba(0,0,0,0.1); }
.floating_file_label:hover { color: var(--point-pink); }

/* 텍스트 박스: 하얀 영수증 종이가 빠져나오는 슬롯 디자인 */
.floating_input_top textarea { 
    flex: 1; padding: 12px; border-radius: 2px; 
    border: none; border-top: 3px solid #888; /* 기계 틈새 그림자 효과 */
    background: #fdfdfa; color: #222;
    font-family: var(--custom-font); font-size: 15px; resize: vertical; min-height: 46px; 
    box-shadow: inset 0 4px 6px rgba(0,0,0,0.1); outline: none; 
}
.floating_input_top textarea:focus { background: #fff; }

/* 묵직한 PRINT 물리 버튼 */
.floating_submit_btn { 
    background: linear-gradient(to bottom, #fdfbf7, #d1d5db);
    color: #475569; border: 1px solid #94a3b8;
    border-radius: 6px; padding: 0 20px; cursor: pointer; height: 46px; 
    font-family: var(--digital-font); font-size: 20px; font-weight: bold; letter-spacing: 1px;
    box-shadow: 0 4px 0 #94a3b8, 0 5px 10px rgba(0,0,0,0.15);
    transition: all 0.1s; flex-shrink:0;
}
.floating_submit_btn:active { transform: translateY(4px); box-shadow: 0 0 0 #94a3b8, 0 1px 2px rgba(0,0,0,0.1); }
.floating_submit_btn:hover { color: var(--point-blue); }

/* 기계식 페이더(슬라이더) */
.floating_slider_wrap { display: flex; align-items: center; gap: 15px; padding: 0 5px; margin-top: 15px; }
.floating_slider_wrap span { font-family: var(--digital-font); font-size: 14px; font-weight: bold; color: #5a6b82; letter-spacing: 1px; }
.floating_slider_wrap input[type=range] { 
    flex: 1; appearance: none; background: #111; /* 까만 믹서 트랙 */
    height: 6px; border-radius: 3px; outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.5);
}
.floating_slider_wrap input[type=range]::-webkit-slider-thumb { 
    appearance: none; width: 14px; height: 26px; border-radius: 2px; 
    background: linear-gradient(to right, #ccc 0%, #fff 20%, #bbb 50%, #eee 80%, #999 100%); 
    border: 1px solid #555; cursor: grab;
    box-shadow: 0 3px 5px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
}
.floating_slider_wrap input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; }
.floating_pct_badge { background: #111; color: #32cd32 !important; padding: 4px 10px; border-radius: 4px; font-weight: 800 !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.8); }

/* 모달 (기존 구조 유지) */
.tarae_image_modal { display: none; position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tarae_image_modal.show { display: flex; }
.tarae_image_modal_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); cursor: zoom-out; }
.tarae_image_modal_content { position: relative; z-index: 100000; max-width: 90vw; max-height: 90vh; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); display: flex; justify-content: center; align-items: center; }
.tarae_image_modal_content img { max-width: 100%; max-height: 90vh; object-fit: contain; display: block; border-radius: 12px; }
.tarae_image_modal_close { position: absolute; top: 30px; right: 30px; z-index: 100001; color: #fff; font-size: 24px; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); border-radius: 50%; transition: background 0.2s; }
.tarae_image_modal_close:hover { background: rgba(0,0,0,0.7); }
.tarae_modal_nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 100002; color: #fff; font-size: 28px; cursor: pointer; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); border-radius: 50%; transition: background 0.2s; }
.tarae_modal_nav:hover { background: rgba(0,0,0,0.7); }
.tarae_modal_nav.left { left: 30px; }
.tarae_modal_nav.right { right: 30px; }

/* =========================================
   5. 권한 없음 (ACCESS DENIED) 블러 및 라벨 효과
========================================= */
/* 썸네일/커버 이미지 블러 (흑백+강한 블러) */
.img_denied_blur {
    filter: blur(15px) grayscale(100%) !important;
}

/* 텍스트 내용물 블러 (투명하게 뭉개기) */
.text_denied_blur {
    filter: blur(4px) !important;
    color: transparent !important;
    text-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
    user-select: none;
}

/* 중앙 권한 없음 라벨 (RESTRICTED TAPE - 사람이 붙인 듯한 미세 사선) */
.denied_label {
    position: absolute;
    top: 50%;
    left: 50%;
    /* ✅ 아주 살짝(-4도) 삐딱하게 각도를 틀어 자연스러운 스티커 느낌 연출 */
    transform: translate(-50%, -50%) rotate(-4deg); 
    background: #111; 
    color: #fff;
    font-family: var(--digital-font);
    font-size: 14px; 
    font-weight: normal;
    padding: 5px 12px;
    border-radius: 4px;
    letter-spacing: 2px;
    /* 기울기에 맞춰 그림자 방향도 자연스럽게 조정 */
    box-shadow: 2px 4px 6px rgba(0,0,0,0.5); 
    z-index: 50;
    pointer-events: none;
}

/* =========================================
   6. 새 글 작성 (카세트 J-Card 인레이 디자인 - 오션 테마 적용)
========================================= */
.jcard_write_wrapper {
    max-width: 800px;
    margin: 60px auto;
    padding: 10px;
}

.jcard_main {
    display: flex;
    background: #fcfcfc;
    border-radius: 2px;
    box-shadow: 5px 10px 25px rgba(0,0,0,0.15); /* 그림자도 부드럽게 */
    border: 1px solid #b0bec5;
}

/* 블랙 대신 부드럽고 묵직한 네이비 톤 사용 */
.jcard_spine {
    width: 80px;
    background: #2c3e50; 
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10px;
    border-right: 4px solid #8da9c4; /* 핫핑크 대신 오션 블루 */
}

.jcard_spine .spine_text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'VT323', monospace;
    font-size: 28px;
    letter-spacing: 4px;
    color: #e2e8f0;
}

.jcard_spine .spine_logo { font-size: 24px; color: #8da9c4; }

.jcard_form_area {
    flex: 1;
    padding: 40px 50px;
    background-image: linear-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 100% 38px;
    background-position: 0 35px;
}

.jcard_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 3px solid #2c3e50;
    padding-bottom: 10px;
    margin-bottom: 35px;
}

/* 한글 제목에 맞춰 폰트 변경 */
.jcard_header h2 {
    margin: 0;
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 32px;
    letter-spacing: 2px;
    color: #2c3e50;
}

.jcard_header .nr_checkbox {
    font-family: 'VT323', monospace;
    font-size: 18px;
    color: #78909c;
}

.jcard_input_row {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
}

.jcard_input_group {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
}
.jcard_input_group .jcard_input_row {
    flex: 1;
    margin-bottom: 0;
}

.jcard_input_row label {
    font-family: 'VT323', monospace;
    font-size: 20px;
    color: #2c3e50;
    background: #fcfcfc;
    display: inline-block;
    padding: 0 8px 0 0;
    align-self: flex-start;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.jcard_input, .jcard_textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #90a4ae;
    padding: 5px 0;
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 18px;
    color: #2c3e50;
    outline: none;
    transition: border-color 0.2s;
}
.jcard_input:focus, .jcard_textarea:focus { border-bottom-color: #8da9c4; }
.jcard_input::placeholder, .jcard_textarea::placeholder { color: #b0bec5; }

.jcard_textarea {
    resize: vertical;
    min-height: 114px;
    line-height: 38px; 
    border: 2px solid #90a4ae;
    padding: 0 15px;
    background: rgba(255, 255, 255, 0.7);
}

.jcard_file {
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 14px;
    padding: 5px 0;
    color: #78909c;
}

.secret_row label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}
.secret_row label span {
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 16px;
    padding-top: 2px;
    color: #2c3e50;
}
.secret_row input[type="checkbox"] {
    accent-color: #8da9c4;
    width: 18px;
    height: 18px;
    margin: 0;
}

.jcard_btn_wrap {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 40px;
    margin-bottom: 10px;
}

.btn_jcard_cancel {
    background: #e2e8f0;
    color: #475569;
    padding: 8px 25px;
    text-decoration: none;
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 18px;
    border: 2px solid #cbd5e1;
    transition: background 0.2s;
}
.btn_jcard_cancel:hover { background: #cbd5e1; }

.btn_jcard_submit {
    background: #2c3e50;
    color: #fff;
    padding: 8px 25px;
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 18px;
    letter-spacing: 1px;
    border: 2px solid #2c3e50;
    cursor: pointer;
    box-shadow: 4px 4px 0 #8da9c4; /* 오션 블루 섀도우 */
    transition: all 0.1s;
}
.btn_jcard_submit:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 #8da9c4;
}

@media (max-width: 600px) {
    .jcard_main { flex-direction: column; }
    .jcard_spine { 
        width: 100%; 
        flex-direction: row; 
        padding: 15px 20px; 
        border-right: none; 
        border-bottom: 4px solid #8da9c4; 
    }
    .jcard_spine .spine_text { writing-mode: horizontal-tb; transform: none; }
    .jcard_form_area { padding: 30px 20px; }
    .jcard_input_group { flex-direction: column; gap: 15px; }
}

/* =========================================
   7. 타래글(자식글) 전용 수정 폼
========================================= */
.tarae_edit_wrapper {
    max-width: 600px;
    margin: 80px auto;
    background: #e2e8f0; /* 프린터 기계 외관 색상 */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1), inset 0 2px 0 rgba(255,255,255,0.8);
    border: 1px solid #cbd5e1;
    padding: 30px 40px;
}
.tarae_edit_header {
    border-bottom: 2px dashed #94a3b8;
    padding-bottom: 15px;
    margin-bottom: 25px;
}
.tarae_edit_header h3 {
    margin: 0;
    font-family: 'VT323', monospace;
    font-size: 32px;
    color: #334155;
    letter-spacing: 2px;
}
.tarae_textarea {
    width: 100%;
    height: 150px;
    background: #fcfcfc;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    padding: 15px;
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 18px;
    color: #334155;
    resize: vertical;
    box-sizing: border-box;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.tarae_textarea:focus { outline: none; border-color: #8da9c4; }

.tarae_edit_file {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.tarae_edit_file label {
    font-family: 'VT323', monospace;
    font-size: 20px;
    color: #64748b;
}
.tarae_file_input {
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 14px;
    color: #334155;
}
.tarae_file_del {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tarae_file_del label {
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 15px;
    color: #ef4444; /* 삭제 경고 느낌을 주는 빨간색 포인트 */
    cursor: pointer;
}
.tarae_file_del input[type="checkbox"] {
    accent-color: #ef4444;
    cursor: pointer;
}

.tarae_edit_prg {
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 15px;
}
.tarae_edit_prg label {
    font-family: 'NeoDunggeunmo', monospace;
    font-size: 18px;
    color: #64748b;
}
.tarae_prg_input {
    width: 90px;
    background: #111;
    color: #4ade80; /* 디지털 형광 연두색 */
    border: 3px solid #334155;
    border-radius: 4px;
    padding: 5px 10px;
    font-family: 'VT323', monospace;
    font-size: 26px;
    text-align: right;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
}
.tarae_prg_input:focus { outline: none; border-color: #8da9c4; }
.prg_pct {
    font-family: 'VT323', monospace;
    font-size: 26px;
    color: #334155;
}

.tarae_edit_btns {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 35px;
}
.btn_tarae_cancel, .btn_tarae_submit {
    font-family: 'VT323', monospace;
    font-size: 22px;
    padding: 8px 25px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 1px;
}
.btn_tarae_cancel {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}
.btn_tarae_cancel:hover { background: #e2e8f0; }

.btn_tarae_submit {
    background: #334155;
    color: #f8fafc;
    border: 1px solid #1e293b;
    box-shadow: 0 4px 0 #1e293b;
    transition: all 0.1s;
}
.btn_tarae_submit:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #1e293b;
}