body{font-family:'Noto Sans KR',sans-serif;background:#000;color:#fff;display:flex;justify-content:flex-start;align-items:center;min-height:100vh;padding:16px;flex-direction:column;gap:0}
    .brand-hero{width:100%;max-width:800px;margin:0 auto 18px;background:linear-gradient(145deg,#242424,#141414);border:1px solid #343434;border-radius:18px;padding:22px;box-shadow:inset 0 0 18px rgba(0,0,0,.28);text-align:left}
    .brand-eyebrow{margin:0 0 6px;color:#d8d8d8;font-size:.9rem;font-weight:900;letter-spacing:.02em}
    .brand-hero h1{margin:0;color:#fff;font-size:2rem;font-weight:1000;line-height:1.05;letter-spacing:-.04em}
    .brand-subtitle{margin:8px 0 0;color:#f2f2f2;font-size:1rem;font-weight:900}
    .brand-description{margin:10px 0 0;color:#bdbdbd;font-size:.92rem;line-height:1.65;max-width:680px}
    .tab-content{display:none}.tab-content.active{display:flex;flex-direction:column;flex-grow:1}
    .section-card{background:#2a2a2a;border-radius:12px;padding:20px;box-shadow:inset 0 0 10px rgba(0,0,0,.3);text-align:center;width:100%;max-width:800px}
    .notepad-tabs{display:flex;justify-content:center;align-items:flex-end;gap:.45rem;width:100%;max-width:800px;position:relative;z-index:2}
    .notepad-tab{background:#1a1a1a;width:44px;height:38px;padding:0;border-radius:10px 10px 0 0;cursor:pointer;transition:.2s;font-weight:700;color:#737373;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;border:1px solid transparent;border-bottom:0}
    .notepad-tab svg{width:20px;height:20px}
    .notepad-tab:hover{background:#242424;color:#fff}
    .notepad-tab.active{background:#2a2a2a;color:#fff;border-color:#2a2a2a;height:40px;margin-bottom:-1px;box-shadow:none}

    .profile-panel{display:flex;flex-direction:column;gap:16px;width:100%;text-align:left}
    .profile-card,.profile-backup-card{background:#1f1f1f;border:1px solid #3a3a3a;border-radius:16px;padding:18px;box-shadow:inset 0 0 12px rgba(0,0,0,.22)}
    .profile-card{display:flex;align-items:center;gap:16px}
    .profile-avatar-wrap{width:72px;height:72px;flex:0 0 72px;position:relative}
    .profile-avatar,.profile-avatar-fallback{width:72px;height:72px;border-radius:999px;border:1px solid #555;background:#303030;display:flex;align-items:center;justify-content:center;object-fit:cover;color:#aaa;font-size:1.5rem;font-weight:900}
    .profile-avatar.hidden,.profile-avatar-fallback.hidden{display:none}
    .profile-copy{min-width:0}
    .profile-title{font-size:1.1rem;font-weight:900;color:#fff;margin-bottom:4px}
    .profile-user-info{font-size:.9rem;color:#c7c7c7;line-height:1.45;word-break:break-word}
    .profile-actions,.profile-backup-actions{display:flex;flex-wrap:wrap;gap:8px}
    .profile-action-btn{background:#3a3a3a;border:1px solid #555;color:#fff;border-radius:999px;padding:10px 14px;font-size:.86rem;font-weight:900;cursor:pointer;transition:background .2s,transform .15s}
    .profile-action-btn:hover{background:#4a4a4a;transform:translateY(-1px)}
    .profile-action-btn.primary{background:#2563eb;border-color:#3b82f6}
    .profile-action-btn.primary:hover{background:#1d4ed8}
    .profile-backup-title{font-size:1rem;font-weight:900;color:#fff}
    .profile-backup-desc{margin:4px 0 12px;color:#aaa;font-size:.85rem;line-height:1.45}
    .site-footer{width:100%;max-width:800px;margin:22px auto 0;padding:18px;border-top:1px solid #2f2f2f;color:#aaa;font-size:.85rem;display:flex;flex-direction:column;gap:10px}
    .site-footer strong{display:block;color:#fff;font-size:1rem}
    .site-footer span{display:block;margin-top:2px;color:#d0d0d0}
    .site-footer nav{display:flex;flex-wrap:wrap;gap:10px 14px}
    .site-footer a{color:#d8d8d8;text-decoration:none}
    .site-footer a:hover{color:#fff;text-decoration:underline}

    /* ===== 메모(내부) 탭 전용 스타일: 메인 탭(.notepad-tab)과 분리 ===== */
/* 메모 공간과 분리된 '둥근 네모' 탭 */
#notesHeaderRow{margin-top:8px;margin-bottom:8px}
#notesTabsContainer{
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  padding-left:10px;
  margin-top:0;
}

.notes-tab{
  background:#3a3a3a;
  padding:8px 16px;
  border-radius:12px;
  cursor:pointer;
  transition:background .2s,color .2s,transform .15s ease;
  font-weight:700;
  color:#ddd;
  font-size:.85rem;
  position:relative;
  z-index:1;
  border:1px solid transparent;
}
.notes-tab:hover{background:#4a4a4a}
.notes-tab.active{
  background:#111;
  color:#fff;
  border-color:#2a2a2a;
  z-index:2;
}

.notes-tab.dragging{opacity:.3}
.notes-tab.placeholder{opacity:1}

/* 메모 입력 영역은 탭과 분리되게 약간 간격 */
#notesArea{margin-top:10px}

.notes-tab .tab-del{margin-left:8px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:#555;color:#fff;font-size:12px;line-height:1}


/* 북마크 탭도 메모 탭과 동일한 둥근 네모 스타일 */
#bookmarkHeaderRow{margin-top:8px;margin-bottom:8px}
#bookmarkTabsContainer{
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  padding-left:10px;
  margin-top:0;
}
.bookmark-tab{
  background:#3a3a3a;
  padding:8px 16px;
  border-radius:12px;
  cursor:pointer;
  transition:background .2s,color .2s,transform .15s ease;
  font-weight:700;
  color:#ddd;
  font-size:.85rem;
  position:relative;
  z-index:1;
  border:1px solid transparent;
}
.bookmark-tab:hover{background:#4a4a4a}
.bookmark-tab.active{
  background:#111;
  color:#fff;
  border-color:#2a2a2a;
  z-index:2;
}
.bookmark-tab.dragging{opacity:.3}
.bookmark-tab.placeholder{opacity:1}
.bookmark-tab .tab-del{margin-left:8px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:#555;color:#fff;font-size:12px;line-height:1}



/* 노동요 내부 탭: 북마크 탭과 동일한 둥근 네모 스타일 */
#workmusicHeaderRow{margin-top:8px;margin-bottom:8px}
#workmusicTabsContainer{
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  padding-left:10px;
  margin-top:0;
}
.workmusic-tab{
  background:#3a3a3a;
  padding:8px 16px;
  border-radius:12px;
  cursor:pointer;
  transition:background .2s,color .2s,transform .15s ease;
  font-weight:700;
  color:#ddd;
  font-size:.85rem;
  position:relative;
  z-index:1;
  border:1px solid transparent;
}
.workmusic-tab:hover{background:#4a4a4a}
.workmusic-tab.active{background:#111;color:#fff;border-color:#2a2a2a;z-index:2}
.workmusic-tab.dragging{opacity:.3}
.workmusic-tab.placeholder{opacity:1}
.workmusic-tab .tab-del{margin-left:8px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:#555;color:#fff;font-size:12px;line-height:1}
.workmusic-tab .playlist-mark{display:inline-flex;align-items:center;justify-content:center;margin-right:6px;opacity:.85;vertical-align:-2px}
.workmusic-tab .playlist-mark svg{width:14px;height:14px;display:block}

/* 이미지 모달 상단 아이콘 컨트롤 */
#imageModalControls{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  z-index:60;
  padding:6px;
  border-radius:999px;
  background:rgba(0,0,0,.46);
  backdrop-filter:blur(8px);
}
.image-modal-icon-btn{
  width:38px;
  height:38px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,.12);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s,transform .15s ease;
}
.image-modal-icon-btn:hover{background:rgba(255,255,255,.22);transform:scale(1.04)}
.image-modal-icon-btn svg{width:20px;height:20px;display:block}
#moveBookmarkTabSelect{
  position:absolute;
  top:54px;
  left:0;
  min-width:140px;
  max-width:220px;
  background:#1f1f1f;
  color:#fff;
  border:1px solid #555;
  border-radius:10px;
  padding:8px 10px;
  display:none;
}
#imageModalControls.move-open #moveBookmarkTabSelect{display:block}

/* 아이콘 버튼 (메모 + / 편집) */

    .icon-btn{background:transparent;border:none;padding:6px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer}
    .icon-btn:hover{background:rgba(255,255,255,.08)}
    .icon-btn svg{width:18px;height:18px;display:block}
    .notes-area{flex-grow:1;resize:vertical}
    textarea#notesArea::-webkit-scrollbar{width:8px;background-color:#2a2a2a;border-radius:10px}
    textarea#notesArea::-webkit-scrollbar-thumb{background-color:#555;border-radius:10px}
    .calendar-header{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
    .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
    .day-label,.calendar-day{text-align:center;padding:8px 2px;border-radius:8px;background:#2a2a2a;position:relative;overflow:hidden;word-wrap:break-word}
    .day-label{background:#444;font-weight:700;color:#fff;font-size:.8rem;padding:8px 0}
    .calendar-day{min-height:160px;padding:8px 6px 4px;display:flex;flex-direction:column;gap:2px;border:1px solid #444;box-sizing:border-box;cursor:pointer}
    .calendar-day:hover{border-color:#666;background:#303030}
    .calendar-day.today{border:2px solid #f5f5f5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
    .day-top{display:flex;align-items:center;gap:4px;width:100%;min-height:28px}
    .day-number{font-size:.85rem;font-weight:700;color:#aaa;z-index:10;line-height:1;min-width:18px;text-align:left;cursor:pointer}
    .day-divider{height:1px;background:#3a3a3a;margin:2px 0 2px;border-radius:999px;opacity:.95}
    .calendar-month-counts{display:inline-flex;align-items:center;gap:6px;margin-left:10px;vertical-align:middle;font-size:.78rem;color:#d1d5db}
    .calendar-count-badge{display:inline-flex;align-items:center;gap:3px;background:#3a3a3a;border-radius:999px;padding:3px 8px;font-weight:700;line-height:1}
    .calendar-count-badge.shorts{color:#c4b5fd}.calendar-count-badge.webtoon{color:#fcd34d}
    .task-item{font-size:.85rem;padding:5px 6px;border-radius:8px;margin-top:4px;word-wrap:break-word;cursor:pointer;text-align:left}
    .task-item.custom-task{background:#4c78a8}
    .task-item.custom-task.custom-important{background:#dc2626;color:#fff}
    .task-item.custom-task.custom-family{background:#2563eb;color:#fff}
    .task-item.custom-task.custom-special{background:#16a34a;color:#fff}
    .task-item.episode-task{background:#444;color:#ddd}
    /* 완료(complete) 공통 */
    .task-item.complete{background:#888;text-decoration:line-through;color:#ccc}
    /* 커스텀(개인작업) 완료 시: 카테고리 색상보다 우선해서 회색 처리 */
    .task-item.custom-task.complete{background:#666 !important;color:#bdbdbd !important;text-decoration:line-through;opacity:.95}
    .add-task-btn{background:#666;transition:.2s}.add-task-btn:hover{background:#777;transform:scale(1.02)}
    .modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;justify-content:center;align-items:center;z-index:1000}
    .modal-content{background:#1a1a1a;border-radius:12px;padding:24px;width:90%;max-width:500px;box-shadow:0 10px 30px rgba(0,0,0,.5);position:relative}
    .drag-area{border:2px dashed #4b4b4b;transition:all .3s ease;padding:24px}
    .drag-area.active{border-color:#6b6b6b;background-color:#2a2a2a}
    .drag-over{border-color:#6b6b6b;background-color:#2a2a2a}
    
    /* 일일 체크 버튼 그룹 (쇼츠/웹툰) 스타일 */
    .daily-check-group {
        display: flex;
        width: auto;
        flex: 1;
        gap: 2px;
        margin-top: 0;
        min-width: 0;
    }
    .daily-check-btn {
        flex: 1;
        text-align: center;
        font-size: 0.68rem;
        padding: 3px 0;
        border-radius: 5px;
        background: #444; /* 기본 회색 */
        color: #ccc;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
        font-weight: 500;
    }
    .daily-check-btn:hover {
        opacity: 0.9;
    }
    /* 쇼츠 활성 상태: 빨강 */
    .daily-check-btn.shorts.active {
        background: #7c3aed; 
        color: white;
        font-weight: 700;
    }
    /* 웹툰 활성 상태: 노랑 */
    .daily-check-btn.webtoon.active {
        background: #f59e0b;
        color: white;
        font-weight: 700;
    }

    /* 달력 아래 일정 & 할 일 리스트 */
    .agenda-item{display:flex;align-items:center;gap:10px;background:#2a2a2a;border-radius:10px;padding:10px 10px}
    .agenda-dot{width:10px;height:10px;border-radius:999px;flex:0 0 10px}
    .agenda-date{font-size:.8rem;color:#bbb;min-width:92px}
    .agenda-text{flex:1 1 auto;word-break:break-word}
    .agenda-actions{display:flex;gap:6px;flex:0 0 auto}
    .agenda-btn{background:#3a3a3a;border-radius:10px;padding:6px 8px;font-size:.8rem;color:#fff;cursor:pointer;user-select:none}
    .agenda-btn:hover{background:#4a4a4a}
    .agenda-section-title{margin-top:10px;margin-bottom:6px;color:#ddd;font-weight:700;font-size:.9rem;opacity:.95}
    .agenda-settings-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;background:#3a3a3a;border-radius:10px;color:#fff;border:none;cursor:pointer;user-select:none}
    .agenda-settings-btn:hover{background:#4a4a4a}


    
    /* 완료된 할일(리스트): 원래처럼 '회색 + 취소선'이 확실히 보이도록 강제 */
    .agenda-item.complete{opacity:.9;background:#242424}
    .agenda-item.complete .agenda-text{color:#7a7a7a !important;text-decoration:line-through}
    .agenda-item.complete .agenda-date{color:#6b7280 !important}
/* 북마크 Masonry 레이아웃 */
    #image-grid {
        column-count: 2; /* 기본 2열 */
        column-gap: 1rem;
        margin-top: 1.5rem; /* mt-6 */
        display: block;
    }
    @media (min-width: 640px) { /* sm: 3열 */
        #image-grid { column-count: 3; }
    }
    @media (min-width: 1024px) { /* lg: 4열 */
        #image-grid { column-count: 4; }
    }

    /* 북마크 카드 스타일 */
    .bookmark-card{
        position: relative;
        transition: transform .2s ease-in-out; 
        background: #333; 
        border-radius: 8px; 
        overflow: hidden; 
        margin-bottom: 1rem; /* 세로 간격 */
        break-inside: avoid; /* 카드 분할 방지 */
        width: 100%; /* Column 아이템으로 사용 */
        display: block;
    }
    .bookmark-card:hover{transform:translateY(-5px)}
    
    /* 콘텐츠 영역: 이미지/아이콘 높이에 따라 크기 결정 */
    .bookmark-card .content {
        display: block; 
        width: 100%;
        height: auto;
        overflow: hidden;
        background-color: #1a1a1a;
        /* 링크나 동영상 썸네일이 없을 때 최소 높이 보장 */
        min-height: 80px; 
        position: relative; /* 오버레이를 위한 기준점 */
    }
    
    .bookmark-card img {
        position: static; 
        width: 100%;
        height: auto; /* 실제 비율 사용 */
        display: block;
        /* 기본: 이미지가 잘리지 않고 전체가 보이도록 contain 설정 */
        object-fit: contain; 
    }

    .bookmark-card .img-fit-cover {
        /* 비디오 썸네일용: 영역을 꽉 채우도록 cover 설정 */
        object-fit: cover; 
        height: 100%; /* content의 높이를 꽉 채우도록 설정 */
    }
    
    /* 아이콘/텍스트 오버레이 */
    .bookmark-card .icon-overlay {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex; justify-content: center; align-items: center;
        color: white; font-size: 3rem;
    }
    /* 링크 북마크의 제목 표시 */
    .bookmark-card .link-title-overlay {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        color: white; padding: 10px;
        text-align: center;
    }
    .bookmark-card .link-title-text {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 5px;
        word-break: break-all;
    }
    .bookmark-card .link-url-text {
        font-size: 0.75rem;
        opacity: 0.7;
        word-break: break-all;
    }
    
    /* 신규 Video title overlay (썸네일 없을 때) */
    .bookmark-card .video-title-overlay {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(80, 0, 0, 0.7); /* Reddish background for video emphasis */
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        color: white; padding: 10px;
        text-align: center;
    }
    .bookmark-card .video-title-text {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 5px;
        word-break: break-all;
    }
    .bookmark-card .video-url-text {
        font-size: 0.75rem;
        opacity: 0.7;
        word-break: break-all;
    }
    
    /* 인스타그램 스타일 (이제 직접 임베드 코드를 사용하므로 이 스타일은 사용하지 않음) */
    .bookmark-card .instagram-overlay { display: none; } 
    
    /* 인스타그램 임베드 짤림 방지: 임베드 콘텐츠가 부모 카드 너비를 넘지 않도록 설정 */
    .bookmark-card .content > div[style*="max-width:540px"] {
        max-width: 100% !important; 
        width: 100% !important;
        box-sizing: border-box; /* 패딩/보더 포함 너비 계산 */
    }

    /* 사이트별 구분 헤더 스타일 */
    .domain-header {
        column-span: all; /* Masonry 레이아웃에서 전체 너비를 차지 */
        width: 100%;
        margin: 20px 0 10px;
        padding: 8px 0;
        color: #fff;
        font-size: 1.25rem;
        font-weight: 700;
        border-bottom: 2px solid #555;
        text-align: left;
    }


/* 노동요 플레이어 */
.workmusic-panel{display:flex;flex-direction:column;gap:14px}
#workmusic-drag-area{min-height:110px}
.workmusic-player-wrap{background:#111;border-radius:12px;overflow:hidden;border:1px solid #444}
#workMusicPlayerBox{width:100%;aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center;color:#777;font-size:.9rem}
#workMusicPlayerBox iframe{width:100%;height:100%;display:block;border:0}
.workmusic-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.workmusic-icon-btn{width:42px;height:42px;border-radius:999px;background:#2f2f2f;color:#eee;border:1px solid #444;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .15s,border-color .2s,color .2s}
.workmusic-icon-btn:hover{background:#3a3a3a;border-color:#555;transform:scale(1.04)}
.workmusic-icon-btn svg{width:22px;height:22px;display:block}
#workMusicModeBtn{color:#777}
#workMusicModeBtn.random{color:#fff}
.workmusic-volume{display:flex;align-items:center;gap:8px;background:#2f2f2f;border:1px solid #444;border-radius:999px;padding:7px 12px}
.workmusic-volume-btn{width:24px;height:24px;border:0;background:transparent;color:#ddd;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;border-radius:999px;flex:0 0 auto}
.workmusic-volume-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.workmusic-volume-btn svg{width:20px;height:20px;display:block}
#workMusicVolumeRange{width:120px;accent-color:#fff;cursor:pointer}
.workmusic-volume-percent{min-width:38px;text-align:right;font-size:.78rem;font-weight:800;color:#e5e5e5;line-height:1;font-variant-numeric:tabular-nums}
.workmusic-list{column-count:2;column-gap:1rem;margin-top:.5rem;display:block;text-align:left}
@media (min-width:640px){.workmusic-list{column-count:3}}
@media (min-width:1024px){.workmusic-list{column-count:4}}
.workmusic-list.music-compact-list{column-count:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:.5rem}
.workmusic-list.music-compact-list .workmusic-item{margin-bottom:0}
@media (max-width:640px){.workmusic-list.music-compact-list{grid-template-columns:1fr}}
.workmusic-item{position:relative;background:#2f2f2f;border:1px solid #3f3f3f;border-radius:8px;overflow:hidden;margin-bottom:1rem;break-inside:avoid;width:100%;display:block;cursor:pointer;transition:transform .2s ease-in-out,border-color .2s,background .2s}
.workmusic-item:hover{transform:translateY(-5px);background:#363636}
.workmusic-item.active{border-color:#d4d4d4;background:#3a3a3a}
.workmusic-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;display:block}
.workmusic-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.12);opacity:.9;pointer-events:none}
.workmusic-play-overlay svg{width:46px;height:46px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.workmusic-title-overlay{position:absolute;left:0;right:0;bottom:0;z-index:4;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.35),rgba(0,0,0,0));color:#fff;font-size:.78rem;font-weight:700;line-height:1.25;padding:28px 62px 8px 10px;text-shadow:0 1px 3px rgba(0,0,0,.8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.workmusic-duration-badge{position:absolute;right:8px;bottom:8px;z-index:6;background:rgba(0,0,0,.82);color:#fff;border-radius:4px;padding:2px 5px;font-size:.72rem;font-weight:800;line-height:1;letter-spacing:.01em}
/* 유튜브뮤직에서 불러온 곡은 작은 앨범형 카드로 표시 */
.workmusic-item.music-track{display:flex;align-items:center;min-height:74px;padding:8px 44px 8px 8px;background:#303030;border-color:#444}
.workmusic-item.music-track:hover{background:#383838}
.workmusic-item.music-track .workmusic-thumb{width:58px;height:58px;aspect-ratio:auto;border-radius:6px;object-fit:cover;flex:0 0 58px}
.workmusic-item.music-track .workmusic-music-info{min-width:0;flex:1 1 auto;padding-left:10px;padding-right:4px}
.workmusic-item.music-track .workmusic-music-title{color:#fff;font-size:.84rem;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workmusic-item.music-track .workmusic-music-artist{color:#bdbdbd;font-size:.72rem;font-weight:600;line-height:1.25;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workmusic-item.music-track .workmusic-play-overlay{left:8px;top:8px;right:auto;bottom:auto;width:58px;height:58px;border-radius:6px;background:rgba(0,0,0,.22)}
.workmusic-item.music-track .workmusic-play-overlay svg{width:24px;height:24px}
.workmusic-item.music-track .workmusic-duration-badge{right:44px;bottom:7px;font-size:.64rem;padding:2px 4px;background:rgba(0,0,0,.72)}
.workmusic-item.music-track .workmusic-actions{top:50%;right:8px;transform:translateY(-50%);opacity:1}
.workmusic-item.music-track .workmusic-small-btn{width:30px;height:30px}
.workmusic-actions{position:absolute;top:8px;right:8px;display:flex;gap:5px;opacity:0;transition:opacity .2s;z-index:5}
.workmusic-item:hover .workmusic-actions{opacity:1}
.workmusic-small-btn{width:32px;height:32px;background:rgba(32,32,32,.88);border:1px solid #555;border-radius:999px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.workmusic-small-btn:hover{background:#444}
.workmusic-small-btn svg{width:18px;height:18px}
.workmusic-settings-modal{background:#2a2a2a;max-width:420px;padding:18px;border:1px solid #3f3f3f}
.workmusic-title-input{width:100%;background:#1f2937;border:1px solid #6b7280;border-radius:12px;color:#fff;padding:12px 14px;font-weight:700;font-size:1rem;outline:none}
.workmusic-title-input:focus{border-color:#e5e7eb;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.workmusic-settings-icons{display:flex;justify-content:center;gap:12px;margin-top:14px}
.workmusic-modal-icon-btn{width:46px;height:46px;border-radius:999px;background:#3a3a3a;border:1px solid #555;color:#f5f5f5;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .15s,border-color .2s}
.workmusic-modal-icon-btn:hover{background:#4a4a4a;border-color:#777;transform:scale(1.04)}
.workmusic-modal-icon-btn svg{width:21px;height:21px;display:block}
.workmusic-modal-icon-btn.danger{color:#f5f5f5}
.workmusic-tab-modal{background:#2a2a2a;max-width:360px;padding:18px;border:1px solid #3f3f3f}
.workmusic-tab-modal-icons{display:flex;justify-content:center;gap:12px;margin-top:14px}
@media (max-width:768px){.workmusic-list{column-count:2}.workmusic-actions{opacity:1}#workMusicVolumeRange{width:90px}}

/* 하단 노동요 리모컨: 낮은 1줄형 배치 */
body{padding-bottom:76px}
.workmusic-remote{
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%);
  width:min(920px,calc(100vw - 24px));min-height:54px;
  background:rgba(28,28,28,.94);border:1px solid #4a4a4a;border-radius:17px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);backdrop-filter:blur(10px);
  z-index:900;display:none;align-items:center;gap:10px;padding:7px 10px;color:#fff;
}
.workmusic-remote.show{display:flex}
.workmusic-remote-info{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto;cursor:pointer;overflow:hidden}
.workmusic-remote-thumb{width:40px;height:40px;border-radius:9px;object-fit:cover;background:#111;flex:0 0 40px}
.workmusic-remote-text{min-width:0;flex:1 1 auto;text-align:left}
.workmusic-remote-title{font-size:.88rem;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.workmusic-remote-artist{font-size:.7rem;font-weight:600;line-height:1.15;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#bdbdbd}
.workmusic-remote-controls{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto}
.workmusic-remote-btn{width:34px;height:34px;border-radius:999px;background:#333;border:1px solid #505050;color:#f5f5f5;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .15s,border-color .2s}
.workmusic-remote-btn:hover{background:#414141;border-color:#666;transform:scale(1.04)}
.workmusic-remote-btn svg{width:18px;height:18px;display:block}
.workmusic-remote-volume{display:flex;align-items:center;gap:6px;background:#303030;border:1px solid #4a4a4a;border-radius:999px;padding:4px 8px;flex:0 0 auto}
.workmusic-remote-volume input{width:96px;accent-color:#fff;cursor:pointer}
.workmusic-remote-percent{min-width:32px;text-align:right;font-size:.72rem;font-weight:800;color:#e5e5e5;font-variant-numeric:tabular-nums}
.workmusic-remote .workmusic-volume-btn{width:30px;height:30px;flex:0 0 30px}
.workmusic-remote .workmusic-volume-btn svg{width:17px;height:17px}
@media (max-width:640px){
  body{padding-bottom:78px}
  .workmusic-remote{width:calc(100vw - 16px);bottom:8px;padding:7px 8px;gap:7px;border-radius:15px}
  .workmusic-remote-thumb{width:36px;height:36px;flex-basis:36px}
  .workmusic-remote-title{font-size:.78rem}
  .workmusic-remote-artist{font-size:.65rem}
  .workmusic-remote-controls{gap:4px}
  .workmusic-remote-btn{width:30px;height:30px}
  .workmusic-remote-btn svg{width:16px;height:16px}
  .workmusic-remote-volume{gap:4px;padding:3px 6px}
  .workmusic-remote-volume input{width:64px}
  .workmusic-remote-percent{min-width:28px;font-size:.68rem}
}


    @media (max-width:768px){
      .brand-hero{max-width:none;width:100vw;border-radius:0;border-left:0;border-right:0;margin-bottom:12px;padding:18px 14px;box-sizing:border-box}
      .brand-hero h1{font-size:1.65rem}
      body{padding:12px 0 76px;gap:0;align-items:stretch}.section-card{width:100vw;max-width:none;padding:12px;border-radius:0;box-sizing:border-box}
      .notepad-tabs{width:100vw;max-width:none;justify-content:center;gap:.5rem;overflow-x:auto;padding:0 8px}.notepad-tab{padding:0;font-size:.8rem;flex:0 0 auto}
      .calendar-day{min-height:120px;padding:.35rem .2rem .2rem;gap:1px}.day-number{font-size:.75rem;min-width:14px}.day-top{gap:2px;min-height:24px}.daily-check-btn{font-size:.62rem;padding:3px 0}.calendar-month-counts{display:flex;margin-left:0;margin-top:4px;justify-content:center;font-size:.72rem}
      .task-item{font-size:.85rem;padding:2px 4px;margin-top:2px}
      .calendar-grid,.calendar-header{gap:0}.add-task-btn{width:100%;font-size:.9rem}
      .modal-content{padding:16px;width:95%}
      .domain-header { font-size: 1rem; }
      .site-footer{max-width:none;width:100vw;box-sizing:border-box;padding:16px 14px}
    }
    .calendar-grid{grid-gap:4px}
    @media (max-width:768px){.calendar-grid{grid-gap:0}}

    /* 이미지 모달 스타일 */
    #imageModal.modal {
        background: rgba(0, 0, 0, 0.7);
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
    }
    #imageModal .modal-content {
        background-color: transparent;
        padding: 0;
        box-shadow: none;
        /* Set max dimensions based on viewport to prioritize height */
        max-width: 90vw; /* 90% viewport width */
        max-height: 90vh; /* 90% viewport height (세로에 맞춤) */
        width: auto; 
        height: auto; 
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer; /* 모달 내용을 클릭해서 닫기 위해 커서 추가 */
    }
    #modalImage {
        /* Fill the constrained container while maintaining aspect ratio */
        width: auto; 
        height: auto; 
        max-width: 100%; /* 모달 콘텐츠 크기 내에서 최대화 */
        max-height: 100%; /* 모달 콘텐츠 크기 내에서 최대화 */
        object-fit: contain; /* Crucial: Ensures the whole image is visible within 90vw/90vh without being cut off */
    }
    
    /* 북마크 제목 수정 모달 스타일 */
    #editTitleModal.modal { z-index: 1001; }
    #editTitleModal .modal-content {
        background: #2a2a2a; 
        max-width: 400px;
        box-shadow: 0 10px 30px rgba(0,0,0,.5);
    }


/* ===== CLIP 뷰어 탭 ===== */
.clip-viewer-panel{display:flex;flex-direction:column;gap:12px;align-items:center}
.clip-toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;width:100%}
.clip-btn,.clip-file-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#3a3a3a;border:1px solid #555;color:#fff;border-radius:999px;width:42px;height:42px;padding:0;font-size:.85rem;font-weight:800;cursor:pointer;transition:background .2s,transform .15s}
.clip-btn svg,.clip-file-btn svg{width:20px;height:20px}
.clip-btn:hover,.clip-file-btn:hover{background:#4a4a4a;transform:scale(1.02)}
.clip-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.clip-file-btn input{display:none}
.clip-viewer{width:690px;max-width:100vw;line-height:0;background:#111;margin:0 auto;border-radius:10px;overflow:hidden}
.clip-page{width:690px;max-width:100vw;height:auto;display:block;margin:0 auto;background:#222}
.clip-message{width:100%;min-height:260px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;color:#888;line-height:1.6;background:linear-gradient(145deg,#1b1b1b,#151515);border:1px dashed #555;border-radius:12px;padding:28px}
.clip-message.drag-over,.clip-viewer.drag-over{border-color:#e5e5e5;background:linear-gradient(145deg,#252525,#171717);box-shadow:0 0 0 3px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.35)}
.clip-empty-title{color:#f4f4f4;font-size:1.05rem;font-weight:900;letter-spacing:-.01em}
.clip-empty-body{max-width:360px;color:#a9a9a9;font-size:.9rem}
.clip-status{font-size:.78rem;color:#bbb;line-height:1.45;text-align:center;white-space:pre-wrap}
.drive-save-indicator{position:fixed;right:14px;bottom:14px;z-index:1200;background:rgba(0,0,0,.78);border:1px solid #444;border-radius:999px;padding:8px 12px;font-size:.78rem;color:#ddd;display:none;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.drive-save-indicator.show{display:block}
@media (max-width:768px){
  .pc-only{display:none!important}
  #clipviewer-section.section-card{width:100vw;max-width:none;padding:12px 0;border-radius:0}
  #clipviewer-section .clip-toolbar,
  #clipviewer-section .clip-status,
  #clipviewer-section .clip-message{width:calc(100vw - 24px)}
  #clipviewer-section .clip-viewer{width:100vw;max-width:100vw;border-radius:0}
  #clipviewer-section .clip-page{width:100vw;max-width:100vw}
}