/* 화면 전체 설정 */
body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* [1] 메모장을 아래로 쑥 내리기 */
    /* 원래 120px였는데 200px로 늘렸습니다. 숫자를 키우면 더 내려갑니다. */
    padding-top: 150px;      
    
    /* [2] 강제로 스크롤 생기게 만들기 */
    /* 화면 높이(100vh)보다 더 길게(120vh) 설정해서 무조건 스크롤바가 생깁니다 */
    min-height: 140vh;       
    
    box-sizing: border-box;
}

/* 고정 헤더 (그대로 유지) */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.site-title {
    font-size: 32px;
    font-weight: 900;
    color: #333;
    margin: 0;
    letter-spacing: -1px;
    font-family: sans-serif;
}



/* 메모장 전체 틀 */
.container {
    width: 800px; 
    margin-bottom: 100px;
}

/* 제목 입력칸 */
.memo-title {
    width: 100%;
    height: 60px; 
    font-size: 18px; /* 요청하신 대로 줄인 사이즈 */
    font-weight: bold;
    padding: 10px 20px;
    margin-bottom: 15px;
    border: none;
    border-radius: 10px;
    background-color: transparent;
    outline: none;
    font-family: 'Malgun Gothic', sans-serif;
    color: #333;
    box-sizing: border-box;
    border-bottom: 2px solid #ddd;
}

/* 입력창 스타일 */
textarea {
    width: 100%;
    height: 600px;     
    padding: 30px;
    font-size: 18px;
    line-height: 1.6;
    border: 1px solid #ddd;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    resize: vertical;
    min-height: 300px;
    outline: none;
    box-sizing: border-box;
    font-family: 'Malgun Gothic', sans-serif;
    background-color: #ffffff;
    color: #333;
}

textarea::-webkit-resizer {
    background-color: #9df09d;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* ▼▼▼ 새로 추가된 버튼 스타일 ▼▼▼ */

/* 버튼을 감싸는 박스 (오른쪽 정렬용) */
.btn-wrapper {
    width: 100%;
    text-align: right; /* 내용물을 오른쪽으로! */
    margin-top: 15px;  /* 메모장과 버튼 사이 간격 */
}

/* 저장 버튼 디자인 */
#saveBtn {
    background-color: #9df09d; /* 보라색 (원하면 바꾸세요) */
    color: white;              /* 글자색 흰색 */
    font-size: 16px;
    font-weight: bold;
    padding: 12px 24px;        /* 버튼 크기 (상하, 좌우) */
    border: none;
    border-radius: 8px;        /* 둥근 모서리 */
    cursor: pointer;           /* 마우스 올리면 손가락 모양 */
    transition: 0.2s;          /* 색깔 부드럽게 바뀌기 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 마우스 올렸을 때 효과 */
#saveBtn:hover {
    background-color: #5b4cc4; /* 좀 더 진한 보라색 */
    transform: translateY(-2px); /* 살짝 위로 떠오르는 느낌 */
}
/* 버튼 2개(새 메모, 저장)를 나란히 배치 */
.sub-btn {
    background-color: #b2bec3; /* 회색 */
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    margin-right: 10px; /* 저장 버튼과의 간격 */
    font-family: 'Malgun Gothic', sans-serif;
    transition: 0.3s;
}
.sub-btn:hover { background-color: #636e72; }

.main-btn {
    background-color: #6c5ce7; /* 보라색 */
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Malgun Gothic', sans-serif;
    transition: 0.3s;
}
.main-btn:hover { background-color: #5b4cc4; transform: translateY(-2px); }

/* ▼▼▼ 파일 목록 스타일 ▼▼▼ */
.list-area {
    margin-top: 40px;
    text-align: left; /* 목록은 왼쪽 정렬 */
    width: 100%;
    border-top: 2px dashed #ddd; /* 위쪽에 점선 구분선 */
    padding-top: 20px;
}

.list-area h3 {
    font-size: 18px;
    color: #555;
    margin-bottom: 15px;
}

#memoList {
    list-style: none; /* 점(bullet) 없애기 */
    padding: 0;
    margin: 0;
}

/* 리스트 한 줄 디자인 */
#memoList li {
    background-color: white;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    cursor: pointer; /* 손가락 모양 */
    display: flex;
    justify-content: space-between; /* 제목과 삭제버튼 양끝 정렬 */
    align-items: center;
    transition: 0.2s;
}

#memoList li:hover {
    background-color: #f0f0f0; /* 마우스 올리면 회색 */
    transform: translateX(5px); /* 살짝 오른쪽으로 이동 */
}

/* 목록 내의 삭제 버튼(X) */
.delete-btn {
    background-color: #ff7675;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}
/* 검색창 스타일 */
.search-input {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 15px; /* 리스트와의 간격 */
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    background-color: #fafafa; /* 살짝 회색빛 배경 */
    outline: none;
    box-sizing: border-box;
    font-family: 'Malgun Gothic', sans-serif;
    transition: 0.3s;
}

/* 검색창 클릭했을 때 하이라이트 */
.search-input:focus {
    border-color: #6c5ce7; /* 보라색 테두리 */
    background-color: #ffffff; /* 흰색 배경 */
    box-shadow: 0 0 5px rgba(108, 92, 231, 0.2);
}
/* ▼▼▼ 새로 추가된 스타일 (날짜, PC저장, 공유) ▼▼▼ */

/* PC저장, 공유 버튼 스타일 (녹색 계열) */
.action-btn {
    background-color: #00b894; /* 산뜻한 민트색 */
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Malgun Gothic', sans-serif;
    margin-left: 10px; /* 버튼 사이 간격 */
    transition: 0.3s;
}

.action-btn:hover {
    background-color: #00cec9;
    transform: translateY(-2px);
}

/* 리스트에 날짜가 나올 때 예쁘게 보이게 하기 */
.memo-info {
    display: flex;
    flex-direction: column; /* 제목 밑에 날짜가 오도록 */
    gap: 5px; /* 제목과 날짜 사이 간격 */
}

.memo-date {
    font-size: 12px;
    color: #aaa; /* 회색으로 작게 표시 */
}
/* ▼▼▼ [새로 추가] 리스트 아이템 내의 케밥 메뉴 스타일 ▼▼▼ */

/* 케밥 버튼과 메뉴를 감싸는 영역 */
.kebab-wrapper {
    position: relative; /* 중요: 이 안에서 메뉴창 위치를 잡음 */
}

/* 점 3개 버튼 (케밥 버튼) */
.kebab-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
    padding: 0 10px;
    line-height: 1;
    transition: 0.2s;
}
.kebab-btn:hover {
    color: #333;
    background-color: #eee;
    border-radius: 50%; /* 동그랗게 */
}

/* 숨겨진 메뉴창 (평소엔 안 보임) */
.dropdown-menu {
    display: none; /* 기본은 숨김 */
    position: absolute;
    right: 0;
    top: 30px; /* 버튼 바로 아래에 뜨게 */
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100; /* 다른 것보다 위에 뜨게 */
    width: 120px;
    overflow: hidden;
}

/* 메뉴창이 활성화되면 보이게 하는 클래스 */
.dropdown-menu.show {
    display: block;
}

/* 메뉴 안의 버튼들 (다운로드, 공유 등) */
.dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 15px;
    text-align: left;
    background: none;
    border: none;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    font-family: 'Malgun Gothic', sans-serif;
}

.dropdown-item:hover {
    background-color: #f5f5f5;
    color: #6c5ce7; /* 마우스 올리면 보라색 */
}
/* ▼▼▼ [새로 추가] 메뉴가 열린 리스트를 제일 위로 올리는 마법의 클래스 ▼▼▼ */
#memoList li.li-active {
    position: relative; /* 위치 기준 잡기 */
    z-index: 9999;      /* 다른 모든 리스트보다 무조건 위에 뜸 */
    background-color: #fff; /* 배경색 확실하게 (투명하면 뒤가 비치니까) */
    transform: none !important; /* 호버 효과 등과 충돌 방지 */
}
/* ▼▼▼ 토스트 메시지 (스르륵 사라지는 알림) 스타일 ▼▼▼ */
#toast {
    visibility: hidden; /* 평소엔 숨김 */
    min-width: 250px;   /* 최소 너비 */
    background-color: #333; /* 검은색 배경 */
    color: #fff;        /* 흰색 글씨 */
    text-align: center; /* 글씨 가운데 정렬 */
    border-radius: 50px; /* 둥글게 (알약 모양) */
    padding: 16px;      /* 안쪽 여백 */
    
    /* 화면 중앙 하단에 고정 */
    position: fixed;
    z-index: 10000;      /* 제일 위에 뜨게 */
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%); /* 정확히 가운데 정렬 보정 */
    
    font-size: 15px;
    font-family: 'Malgun Gothic', sans-serif;
    
    /* 부드러운 효과 (투명도 조절) */
    opacity: 0;
    transition: opacity 0.5s, bottom 0.5s; 
}

/* 토스트 메시지가 나타날 때 붙는 이름표 */
#toast.show {
    visibility: visible;
    opacity: 1; /* 불투명하게 (잘 보이게) */
    bottom: 50px; /* 살짝 위로 떠오르는 효과 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* 그림자 */
}
/* ▼▼▼ 광고 레이아웃 스타일 ▼▼▼ */

/* 1. 전체를 감싸는 3단 상자 */
.main-wrapper {
    display: flex;           /* 가로로 나란히 배치 */
    justify-content: center; /* 가운데 정렬 */
    align-items: flex-start; /* 위쪽 라인 맞춤 */
    width: 100%;
    max-width: 1800px;       /* 너무 넓게 퍼지는 것 방지 */
    margin: 0 auto;          /* 화면 중앙 위치 */
    gap: 200px;               /* 광고와 메모장 사이 간격 */
}

/* 2. 양옆 광고 기둥 스타일 */
.ad-side {
    width: 160px;            /* 광고 표준 크기 (스카이스크래퍼) */
    height: 600px;           /* 광고 높이 */
    position: sticky;        /* 스크롤 내려도 따라오게 만듦! */
    top: 100px;              /* 헤더 아래 100px 지점에 고정 */
}

/* (임시) 광고가 들어갈 자리 표시 - 나중에 애드센스 달면 지우면 됨 */
.ad-placeholder {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
    color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border-radius: 8px;
}

/* 3. ★중요★ 반응형 처리 (모바일에서는 옆 광고 숨기기) */
/* 화면 너비가 1200px보다 좁아지면 (태블릿, 스마트폰) */
@media (max-width: 1200px) {
    .ad-side {
        display: none; /* 광고 기둥 숨김 */
    }
    .container {
        width: 90%; /* 메모장을 화면에 꽉 차게 늘림 */
    }
}
/* ▼▼▼ 삭제 확인 모달창 스타일 ▼▼▼ */
.modal-overlay {
    display: none; /* 평소엔 숨김 */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 검은색 반투명 배경 */
    z-index: 20000; /* 모든 것보다 위에 */
    justify-content: center;
    align-items: center;
}

/* 모달이 활성화되면 보이게 하기 */
.modal-overlay.show {
    display: flex;
}

.modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    width: 320px;
    text-align: center;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
    animation: popUp 0.3s ease-out; /* 뽕! 하고 나타나는 애니메이션 */
}

@keyframes popUp {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-content h3 {
    margin-top: 0;
    color: #333;
}

.modal-content p {
    color: #666;
    margin-bottom: 25px;
    font-size: 14px;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    font-family: 'Malgun Gothic', sans-serif;
}

.modal-btn.cancel {
    background-color: #eee;
    color: #555;
}
.modal-btn.cancel:hover { background-color: #ddd; }

.modal-btn.delete {
    background-color: #ff7675;
    color: white;
}
.modal-btn.delete:hover { background-color: #d63031; }
/* ▼▼▼ 저장 형식 선택 모달 버튼 스타일 ▼▼▼ */

/* TXT 저장 버튼 (초록색) */
.modal-btn.txt-save {
    background-color: #00b894;
    color: white;
}
.modal-btn.txt-save:hover { background-color: #00cec9; }

/* PDF 저장 버튼 (빨간색) */
.modal-btn.pdf-save {
    background-color: #ff7675;
    color: white;
}
.modal-btn.pdf-save:hover { background-color: #d63031; }