/* --- START OF FILE article-write.css --- */
/* Base Styles */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; margin: 0; color: #333; font-size: 14px; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }
.container { max-width: 1400px; margin: 0 auto; padding: 20px; width: 100%; flex-grow: 1; display: flex; flex-direction: column; }
.app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #eee; flex-wrap: wrap; }

/* 로고 이미지 스타일 시작 */
.app-header .logo {
    margin-right: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.app-header .logo a {
    text-decoration: none;
    display: inline-block;
}
.app-header .logo img {
    height: 30px;
    width: auto;
    display: block;
}
/* 로고 이미지 스타일 끝 */

.main-nav { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.main-nav a { text-decoration: none; color: #555; font-size: 0.95em; padding: 5px 0; transition: color 0.2s ease, border-bottom-color 0.2s ease; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a.active { color: #007bff; font-weight: 500; border-bottom-color: #007bff; }
.main-content { 
    width: 100%; 
    flex-grow: 1; 
}
.content-page { 
    width: 100%; 
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.app-footer { margin-top: auto; padding: 25px 20px; text-align: center; border-top: 1px solid #eee; font-size: 0.9em; color: #6c757d; width: 100%; }
.app-footer nav { margin-bottom: 10px; }
.app-footer nav a { color: #6c757d; text-decoration: none; margin: 0 8px; transition: color 0.2s ease; }
.app-footer nav a:hover { color: #333; text-decoration: underline; }
.app-footer p { margin: 0; margin-top: 5px; }
.app-footer .disclaimer { font-size: 0.85em; color: #888; margin-top: 15px; margin-bottom: 10px; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.btn { padding: 8px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.95em; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s ease-in-out; line-height: 1.5; text-decoration: none; }
.btn-primary { background-color: #007bff; color: white; }
.btn-primary:hover:not(:disabled) { background-color: #0056b3; }
.btn-primary:disabled { background-color: #a0cfff; cursor: not-allowed; opacity: 0.65; }
.btn-secondary { background-color: #f8f9fa; color: #333; border: 1px solid #ced4da; }
.btn-secondary:hover { background-color: #e2e6ea; }
.required { color: #007bff; font-weight: bold; margin-left: 2px; }

/* Post Write Specific Styles */
.write-form { 
    width: 100%;
    margin-top: 0;
}

/* 테이블 형식 제거하고 모던한 폼 디자인으로 변경 */
.form-table { 
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 25px;
    max-width: 100%;
    width: 100%;
}

.form-table-row {
    position: relative;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.form-table-row:last-child {
    border-bottom: none;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.95em;
    color: #444;
}

.form-input-cell {
    width: 100%;
}

.form-table-row input[type="text"], 
.form-table-row input[type="password"], 
.form-table-row textarea { 
    width: 100%; 
    padding: 10px 12px; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    font-size: 1em; 
    line-height: 1.5; 
    background-color: #fff; 
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 
    outline: none; 
}

.form-table-row input[type="text"]:focus,
.form-table-row input[type="password"]:focus, 
.form-table-row textarea:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

/* 에디터 행 특별 스타일 */
.content-row {
    padding: 0;
}

.content-row .form-label {
    padding: 16px 20px;
    margin-bottom: 0;
    border-bottom: 1px solid #eee;
}

.field-hint {
    display: block;
    font-size: 0.85em;
    color: #6c757d;
    margin-top: 6px;
}

/* 버튼 영역 */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.form-actions.write-actions {
    padding: 20px 0;
}

#editor {
    /* 에디터 높이는 JS에서 설정 (500px) */
    width: 100%; /* 부모 요소(form-input-cell) 너비에 맞춤 */
}

.toastui-editor-default {
    border: none; /* 에디터 자체 테두리 제거 (부모 form-table-row의 테두리 사용) */
    border-top: 1px solid #ddd; /* 내용 영역 위에 구분선 추가 */
    margin-top: -1px; /* 구분선이 셀 경계선과 겹치도록 */
    max-width: 100%; /* 부모 요소 너비를 초과하지 않도록 설정 */
}

.toastui-editor-default.ProseMirror-focused {
    /* 필요하다면 포커스 스타일 추가 (예: box-shadow) */
    /* box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); */
}

.toastui-editor-mode-switch {
    /* margin-bottom: -1px; /* 탭 바를 아래쪽으로 1px 내려서 하단 테두리와 겹치게 함 */
    /* border-top: 1px solid #ddd; /* 탭 바 위에 구분선 추가 (선택적) */
    /* background-color: #f9f9f9; /* 탭 바 배경색 변경 (선택적) */
}

/* 이미지 첨부 커스텀 버튼 및 영역 개선 */
.image-upload-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.image-upload-label {
    display: inline-block;
}
.image-upload-btn {
    display: inline-block;
    padding: 8px 18px;
    background: #f1f3f9;
    color: #222;
    border-radius: 6px;
    border: 1px solid #bfc8dc;
    font-weight: 500;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s, border 0.2s;
}
.image-upload-btn:hover {
    background: #e2e8f3;
    border-color: #7b8db2;
}
.image-upload-hint {
    margin-top: 2px;
    color: #888;
    font-size: 0.97em;
}
.image-upload-types {
    color: #aaa;
    font-size: 0.96em;
}

/* 썸네일 영역 개선 */
.image-preview-row {
    background: none;
    border: none;
    box-shadow: none;
    padding-top: 0;
    padding-bottom: 0;
}
.image-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 0; /* 미리보기 위쪽 여백 제거 */
}
.image-thumb {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 10px;
}
.image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
}
.image-thumb .insert-image-btn {
    width: 100%;
    margin-top: 8px;
}
.image-thumb .remove-image-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255,255,255,0.9);
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    color: #c00;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, background 0.2s;
}
.image-thumb:hover .remove-image-btn {
    opacity: 1;
    pointer-events: auto;
    background: #ffeaea;
}

/* 이미지 업로드 프로그레스바 */
.image-thumb.uploading {
    position: relative;
    min-width: 120px;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f6f8fa;
    border: 1.5px dashed #bfc8dc;
    border-radius: 8px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.upload-progress-bar {
    width: 90px;
    height: 8px;
    background: #e8e8ef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}
.upload-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,#6cb7ff,#007bff);
    transition: width 0.2s;
}
.uploading-text {
    color: #007bff;
    font-size: 0.93em;
    font-weight: 500;
}
.upload-fail {
    color: #e74c3c;
    font-size: 0.95em;
    font-weight: 500;
    padding: 12px 0;
}

/* 업로드 토큰 관련 UI는 기본적으로 숨김. 필요시 안내/오류용 스타일만 추가 */
#upload-token {
    display: none;
}
.upload-token-alert {
    color: #c00;
    font-size: 0.98em;
    margin-top: 6px;
    display: none;
}

/* 닉네임/비밀번호 가로 배치 */
.nickname-password-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.nickname-field, .password-field {
    flex: 1;
}

.nickname-field .form-label, 
.password-field .form-label {
    display: block;
    margin-bottom: 8px;
}

.nickname-field .form-input-cell,
.password-field .form-input-cell {
    width: 100%;
}

/* 입력 필드 placeholder 스타일 */
::placeholder {
    color: #aaa;
    font-size: 0.9em;
}

/* Responsive adjustments */
/* 로고 이미지 반응형 */
@media (max-width: 768px) {
    .app-header .logo { margin-bottom: 15px; }
    .app-header .logo img { height: 26px; }
    
    .content-page {
        padding: 0;
    }
    
    /* 모바일 작성 폼 스타일 개선 */
    .form-table { 
        border: none; 
        background: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border-radius: 8px;
    }
    
    /* 닉네임/비밀번호 모바일에서는 세로 배치 */
    .nickname-password-row {
        flex-direction: column;
        gap: 0;
    }
    
    .nickname-field, .password-field {
        width: 100%;
    }
    
    .nickname-field {
        margin-bottom: 15px;
    }
    
    .form-table-row textarea { 
        min-height: 200px; 
    }
    
    .form-actions.write-actions { 
        justify-content: center; 
        padding: 15px 0; 
    }
    
    /* 에디터 스타일 조정 */
    .content-row {
        padding: 0;
    }
    
    .content-row .form-label {
        padding: 12px 15px;
    }
    
    .toastui-editor-defaultUI {
        border: none !important;
    }
}

@media (max-width: 480px) { 
    .app-header .logo img { height: 24px; }
    .content-page { padding: 0; }
    .form-table-row textarea { min-height: 180px; }
    .form-actions.write-actions { flex-direction: column; gap: 8px; }
    .form-actions.write-actions .btn { width: 100%; }
    .form-table-row input[type="text"], .form-table-row input[type="password"], .form-table-row textarea { font-size: 0.95em; padding: 8px 10px; }
    .form-table-row:first-child .form-input-cell { flex-direction: column; align-items: flex-start; }
    .form-table-row:first-child .field-hint { margin-left: 0; margin-top: 5px; }
}

/* --- END OF FILE article-write.css --- */