/* 전체 배경 이미지 (고정) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../images/background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    z-index: -2;
}

body {
    background-color: transparent;
    margin: 0;
    font-family: sans-serif;
    padding-right: 40px; 
    box-sizing: border-box;
}

/* 왼쪽 상단 로고 */
.fixed-seal {
    position: fixed;
    top: 15px;
    left: 20px;
    height: 160px;
    width: auto;
    z-index: 1001;
}

/* 오른쪽 고정 메뉴 버튼 */
.menu-button {
    position: fixed;
    top: 10%; /* 위에서 10% 아래 */
    right: 0; /* 오른쪽 붙임 */
    transform: translateY(-50%);
    width: 40px;
    padding: 10px 0;
    background-color: black;
    color: white;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    cursor: pointer;
    z-index: 1001; /* 다른 요소들 위 */
    border: none;
    font-size: 16px;
    letter-spacing: 2px;
}

/* 사이드 메뉴 (오른쪽에서 나옴) */
.side-menu {
    background-image: url('../images/menu.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    padding-top: 20px;
    z-index: 1002; /* 메뉴 버튼(1001) */
    transition: transform 0.4s ease-in-out; /* 부드러운 효과 */
    transform: translateX(100%); /* 평소 화면 오른쪽으로 숨기기 */
    right: 0;
    display: flex; 
    flex-direction: column; /*세로쌓기 */
    justify-content: center; /* 세로 중앙 정렬 */
}

/* 메뉴 열기 */
.side-menu.is-open {
    transform: translateX(0);
}

/* Close 공간 확보 */
.side-menu-content {
    padding-left: 35px;
}

/* Close 버튼 디자인 */
.menu-close-button {
    position: absolute; 
    top: 10%;
    left: 0;
    transform: translateY(-50%);
    width: 40px;
    padding: 10px 0;
    background-color: rgba(0,0,0,0.4);
    color: white;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    cursor: pointer;
    border: none;
    font-size: 16px;
    letter-spacing: 1px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* 메뉴 그룹 디자인 */
.side-menu h2 {
    color: black;
    font-size: 24px;
    font-weight: bold;
    padding-left: 16px;
}

/* 메뉴 그룹 구분선 */
.side-menu hr {
    border: 0;
    height: 1px;
    background-color: rgba(0, 0, 0, 0);
    margin: 10px 16px 15px 16px;
}

/* 메뉴 항목 박스 디자인 */
.menu-group-box {
    background-color: rgba(0, 0, 0, 0.25); /* 살짝 비치는 검은색 배경 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 테두리 */
    border-radius: 8px;
    margin: 0 16px 20px 16px;
    
    /* 배경 흐림 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 메뉴 옵션 스타일 */
.side-menu .w3-bar-item {
    color: white !important; /* 글자 강제 흰색 */
    background-color: transparent !important;
}

/* 메뉴 오버레이 */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000; /* 메뉴(1002), 메뉴버튼(1001) */
    display: none; /* 메뉴 열 때만 작동 */
}

/* 메인 컨테이너 */
.main-container {
    
    background-color: white;
    min-height: 100vh;
    box-sizing: border-box
}

/* 메인 이미지 */
.hero-image {
    width: 100%;
    height: 100vh;
    background-image: url('../images/main_image.png');
    background-size: cover;
    background-position: center;
}

/* 자주 사용하는 사이트 */
.site-slider-swiper {
    background-color: #2a2a2a;
    padding: 16px 100px; 
}
.swiper-slide {
    text-align: center;
}
.site-slider-item {
    display: inline-block;
    text-decoration: none;
}
.site-slider-item img {
    height: 160px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
    margin-bottom: 5px;
}
.site-slider-item p {
    margin-left: 100px;
    margin-right: 100px;
    color: #eee;
    font-size: 14px;
    font-weight: bold;
}

/* 슬라이더 컨테이너 */
.slider-container {
    position: relative; /* 화살표 기준점 */
    background-color: #2a2a2a;
    padding: 16px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* 슬라이더 여백 */
.site-slider-swiper {
    padding: 0;
    margin: 0 50px; /* 화살표 여백 */
}

/* 화살표 버튼 디자인 */
.slider-container .swiper-button-prev,
.slider-container .swiper-button-next {
    color: #eee;
    top: 50%;
    transform: translateY(-50%);
}
.slider-container .swiper-button-prev {
    left: 10px;
}
.slider-container .swiper-button-next {
    right: 10px;
}

/* 화살표 크기 */
.slider-container .swiper-button-prev::after,
.slider-container .swiper-button-next::after {
    font-size: 24px !important; 
}

/* 게시판 영역 */
.board-area {
    padding: 16px;
}
.board-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.board-grid .full-width {
    grid-column: 1 / -1;
}
.board-card {
    border: 1px solid #ddd;
}
.board-card header {
    font-weight: bold;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ddd;
}
.board-card a {
    text-decoration: none;
}

/* 푸터 */
.main-footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 32px;
}

/* 로그인、게시판 콘테이너 설정 */
.login-container, .board-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    
    /* 로고 겹침 방지 */
    padding-left: 40px; 
    
    /* 게시판 컨테이너 상하 여백 */
    padding-top: 160px;
    padding-bottom: 40px;
    
    /* 오른쪽 여백 (menu 라인 확보) */
    padding-right: 20px; 
    
    box-sizing: border-box;
}

/* 로그인 제목 */
.login-page-title {
    background-color: #fff;
    color: #333;
    padding: 8px 30px;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px; /* 겹침 방지 */
    z-index: 1;
    position: relative;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 4px;
}

/* 바깥쪽 오버레이 */
.login-form-white {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 100%;
    max-width: none;
}

/* 타이틀 텍스트 */
.login-form-white h2 {
    font-weight: bold;
    margin-bottom: 8px;
}

/* 문단 타이틀 텍스트 */
.login-form-white h2 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-top: 16px;
}

/* 문단 텍스트 */
.login-form-white .subtitle {
    font-weight: 300;
    color: #555;
    margin-bottom: 24px;
}

/* 안쪽 오버레이 */
.login-form-grey {
    background-color: #f1f1f1;
    padding: 24px;
    border-radius: 8px;
}

/* ID/PW 입력칸 */
.input-group {
    text-align: left;
    margin-bottom: 16px;
}
.input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}
.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

/* 계정 분실 링크 */
.forgot-account {
    display: block;
    margin-top: 16px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    text-align: center;
}
.forgot-account:hover {
    text-decoration: underline;
}

/* 로그인 버튼 */
.login-button {
    width: 100%;
    padding: 14px;
    margin-top: 16px;
    border: none;
    border-radius: 50px; /* 모서리 깎기 */
    background: linear-gradient(90deg, #5588ff, #99ccff);
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}
.login-button:hover {
    transform: scale(1.02);
}

/* 로그인 래핑 */
.login-wrapper {
    width: 100%;
    max-width: 500px;
}

/* 게시판 래핑 */
.board-wrapper {
    width: 100%;
    max-width: 1080px;
}

/* 게시판 제목 */
.board-page-title {
    background-color: #fff;
    color: #333;
    padding: 8px 30px;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    z-index: 1;
    position: relative;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 4px;
}

/* 흰색 프레임 */
.board-frame-white {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 60px;
}

/* 검색창 */
.search-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.search-bar input {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    margin-right: 5px;
}
.search-bar button {
    border: none;
    background-color: #33ccff;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

/* 게시글 목록 */
.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.post-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
.post-item:last-child {
    border-bottom: none;
}

/* 날짜 디자인 */
.post-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    margin-right: 20px;
    text-align: center;
}
.post-date .year-month {
    font-size: 14px;
    color: #888;
}
.post-date .day {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    line-height: 1;
}

/* 게시글 제목 */
.post-title {
    flex-grow: 1;
}
.post-title a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
}
.post-title a:hover {
    text-decoration: underline;
}

/* 게시글 없을 때 */
.no-posts {
    text-align: center;
    padding: 50px 0;
    color: #888;
}

/* 페이지네이션과 글쓰기 버튼 */
.board-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}
.pagination .page-number {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.write-button {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

/* 게시글 상세 보기 디자인*/
.post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px;
}
.post-meta {
    display: flex;
    align-items: center;
}
.board-name-link {
    font-size: 18px;
    font-weight: bold;
    color: #5588ff;
    text-decoration: none;
    margin-right: 20px;
    align-self: flex-start; /* 위쪽 정렬 */
}
.post-date {
    margin-right: 20px;
}
.post-title-detail {
    font-size: 32px;
    font-weight: bold;
    margin: 0;
}
.post-actions {
    display: flex;
    gap: 10px;
}
.action-button {
    background-color: #333;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}
.action-button.delete { background-color: #dc3545; }
.action-button.cancel { background-color: #6c757d; }

.gradient-line {
    height: 3px;
    border: 0;
    background-image: linear-gradient(to right, #5588ff, #99ccff);
    margin: 0 40px;
}
.post-content {
    padding: 40px;
    line-height: 1.8;
}
.post-content img { /* 본문 이미지 스타일 */
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 글쓰기/수정 디자인 */
.form-field {
    margin-bottom: 20px;
}
.form-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}
.form-field input[type="text"],
.form-field select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}
.django-summernote-widget { /* Summernote 에디터 여백 조정 */
    margin-top: 8px; 
    width: 100vh !important;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 30px;
}

/* 페이지네이션 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
}
.pagination a, .pagination span {
    color: #333;
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color .3s;
}
.pagination a:hover {
    background-color: #f1f1f1;
}
.pagination .current {
    background-color: #39ddcc;
    color: white;
    border-color: #39ddcc;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    /* 게시판/로그인/워퍼 넓이 줄임 */
    .board-wrapper, .login-wrapper {
        max-width: 100%; 
    }
}

/* 프로젝트 카드, 그리드 */
.project-card-grid {
    display: grid;
    /* 개수 조절 */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 20px 0;
}
.project-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: box-shadow 0.2s;
    overflow: hidden;
}
.project-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.project-card-image {
    width: 100%;
    height: 150px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-card-image span {
    color: #aaa;
    font-weight: bold;
}
.project-card-title {
    padding: 15px;
    font-weight: bold;
    text-align: center;
    background-color: #f9f9f9;
}

/* 코드 뷰어 */
.code-breadcrumb-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 8px 8px 0 0;
    margin-top: 40px;
}
.code-breadcrumb-bar a {
    color: #f1f1f1;
    text-decoration: none;
}
.code-date {
    margin-left: 15px;
    font-size: 14px;
    color: #aaa;
}

/* 레이아웃 */
.code-viewer-layout {
    display: flex;
    padding: 0; /* 내부에서 다시 패딩 조절 */
    min-height: 70vh;
    width: 100%;
}

/* 파일 트리 */
.file-tree {
    width: 250px;
    flex-shrink: 0;
    background-color: #f7f7f7;
    border-right: 1px solid #ddd;
    border-radius: 0 0 0 16px;
    overflow-y: auto;
}
.file-tree-header {
    font-weight: bold;
    padding: 15px;
    background-color: #eee;
    border-bottom: 1px solid #ddd;
}
.file-tree ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.file-tree li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
}
.file-tree li a:hover {
    background-color: #e9e9e9;
}
.file-tree li.selected a {
    background-color: #5588ff;
    color: white;
    font-weight: bold;
}

/* 코드 컨텐츠 (오른쪽) */
.code-content {
    display: flex;
    flex-direction: column;
    width: calc(100% - 251px);
}
.code-header-bar {
    display: flex;
    justify-content: space-between;
    background-color: #f1f1f1;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    color: #555;
}
.code-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px;
    background-color: #3a3a3a;
    border-bottom: 1px solid #555;
}

/* 프리즘 커스텀 */
.code-content pre {
    flex-grow: 1;
    margin: 0 !important;
    border-radius: 0 0 16px 0 !important;
    overflow-x: auto;
}
/* 프리즘 라인 넘버 */
.line-numbers .line-numbers-rows {
    border-right-color: #555 !important;
}

/* 코드 뷰어 이미지 */
.image-viewer {
    display: flex;
    background-color: #272822;
    flex-grow: 1;
    border-radius: 0 0 16px 0;
    overflow: auto;
    text-align: center;
    padding: 20px;
    box-sizing: border-box; /* 패딩이 크기 증가 방지 */
}
/* span 인라인 블록화 */
.image-viewer span {
    display: inline-block;
}
.image-viewer img {
    max-width: none;     /* 원본 크기 유지 */
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

.no-files-selected {
    padding: 40px;
    text-align: center;
    color: #888;
    width: 100%;
}

/* 페이지 최대 너비 늘리기 */
.cord-wrapper {
    max-width: 1680px;
}

/* 파일 트리 형태 */
.tree-container {
    padding: 10px 0;
}

/* 리스트 기본 스타일 제거 */
ul.tree-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 들여쓰기 */
.tree-children {
    padding-left: 18px;
    border-left: 1px solid #e0e0e0;
}

/* 폴더 */
summary.folder-node {
    cursor: pointer;
    padding: 5px 10px;
    font-weight: bold;
    list-style: none;
    color: #444;
}
/* 크롬등 기본 화살표 제거 */
summary.folder-node::-webkit-details-marker {
    display: none;
}
summary.folder-node:hover {
    background-color: #e9e9e9;
}

/* 파일 링크 */
a.file-node {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    color: #555;
    font-size: 14px;
}
a.file-node:hover {
    background-color: #e9e9e9;
}

/* 선택 파일 강조 */
a.file-node.selected {
    background-color: #5588ff !important;
    color: white !important;
    font-weight: bold;
}

/* 아이콘 간격 */
.folder-icon, .file-icon {
    margin-right: 5px;
    display: inline-block;
    width: 16px;
    text-align: center;
}


/* 자기소개 페이지 스타일 */

/* 레이아웃 조정 */
.intro-layout {
    padding: 60px 80px;
    text-align: left;
}

/* 텍스트 이미지 분할 */
.intro-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.intro-text-box {
    flex: 1;
    min-width: 300px;
}
.intro-subtitle {
    font-size: 20px;
    color: #5588ff;
    font-weight: bold;
    margin-bottom: 10px;
}
.intro-title {
    font-size: 48px;
    font-weight: 800;
    margin: 0 0 20px 0;
    line-height: 1.2;
    color: #333;
}
.intro-title .highlight {
    color: #5588ff;
}
.intro-desc {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}
.intro-links {
    display: flex;
    gap: 15px;
}
.social-btn {
    padding: 10px 24px;
    background-color: #333;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: transform 0.2s, background-color 0.2s;
}
.social-btn:hover {
    background-color: #5588ff;
    transform: translateY(-3px);
}

/* 프로필 */
.intro-image-box {
    flex: 0 0 250px;
    display: flex;
    justify-content: center;
}
.profile-img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* 섹션 타이틀 */
.section-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 30px;
    border-left: 5px solid #5588ff;
    padding-left: 15px;
}

/* 기술 섹션 */
.skills-grid {
    display: flex;
    flex-direction: column;
    gap: 15px; /*카드 사이 간격*/
}

.skill-card {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    padding: 20px 30px;
    border-radius: 12px;
    border: 1px solid #eee;
    text-align: left;
    transition: transform 0.2s, box-shadow 0.2s;
}

.skill-card:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: #5588ff;
    background-color: #fff;
}

.skill-icon {
    font-size: 32px;
    display: inline-block;
    margin-bottom: 0;
    margin-right: 25px;
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.skill-card h4 {
    font-weight: 800;
    margin: 0;
    margin-right: 20px;
    min-width: 130px;
    color: #333;
}

.skill-card p {
    font-size: 16px;
    color: #555;
    margin: 0;
    flex: 1; /* 남은 공간을 모두 차지 */
    line-height: 1.4;
}

/* 모바일 설정 */
@media (max-width: 768px) {
    .skill-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
    .skill-icon {
        margin-bottom: 10px;
    }
    .skill-card h4 {
        margin-bottom: 5px;
    }
}

/* 히스토리 리스트 */
.history-list {
    list-style: none;
    padding: 0;
}
.history-list li {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
.history-list .year {
    font-weight: bold;
    color: #5588ff;
    width: 80px;
    font-size: 18px;
}
.history-list .content {
    font-size: 16px;
    color: #444;
}

/* 모바일 설정 */
@media (max-width: 768px) {
    .intro-layout { padding: 40px 20px; }
    .intro-hero { flex-direction: column-reverse; text-align: center; }
    .intro-links { justify-content: center; }
    .section-title { text-align: left; }
}


/* 자기소개 페이지 추가 스타일*/

/* 프로필 정보 바 (이메일, 연락처 등) */
.profile-info-bar {
    display: flex;
    justify-content: space-between; /* 간격 균등 */
    flex-wrap: wrap; /* 화면 좁으면 줄바꿈 */
    background-color: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    margin-top: 50px;
    border: 1px solid #e9ecef;
}

.info-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 150px;
    margin: 10px 0;
}

.info-label {
    font-size: 14px;
    color: #888;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.info-value {
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

/* 모바일 반응형 조정 */
@media (max-width: 768px) {
    .profile-info-bar {
        flex-direction: column;
        gap: 20px;
    }
}

/* 가이드라인 디자인 */

.guide-layout {
    padding: 60px 80px;
    text-align: left;
}

/* 헤더 */
.guide-header {
    text-align: center;
    margin-bottom: 40px;
}
.guide-title {
    font-size: 42px;
    font-weight: 900;
    margin: 0 0 10px 0;
    color: #333;
    letter-spacing: 2px;
}
.guide-subtitle {
    font-size: 18px;
    color: #666;
    margin-bottom: 15px;
}
.guide-date {
    font-size: 14px;
    color: #999;
    display: inline-block;
    padding: 5px 15px;
    background-color: #f5f5f5;
    border-radius: 20px;
}

/*공통 */
.guide-section {
    margin-bottom: 60px;
}
.section-head {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.section-head .number {
    color: #5588ff;
    font-size: 28px;
    font-weight: 900;
    margin-right: 15px;
    font-style: italic;
}

/* 본문 */
.section-body {
    padding-left: 40px; /* 들여쓰기 */
    color: #555;
    line-height: 1.8;
}
.section-body p {
    margin-bottom: 15px;
}

/* 리스트 스타일 */
.guide-list {
    list-style: disc;
    padding-left: 20px;
}
.guide-list li {
    margin-bottom: 8px;
}

/* 허용/금지 박스 */
.rule-box {
    padding: 20px;
    border-radius: 8px;
    margin: 15px 0;
    border-left: 5px solid #ccc;
}
.rule-box h4 {
    font-weight: bold;
    margin: 0 0 10px 0;
    font-size: 18px;
}
.rule-box ul {
    margin: 0;
    padding-left: 20px;
}

/* 허용 박스 */
.rule-box.allow {
    background-color: #eefdf5;
    border-left-color: #28a745;
}
.rule-box.allow h4 { color: #28a745; }

/* 금지 박스 */
.rule-box.ban {
    background-color: #fff5f5;
    border-left-color: #dc3545;
}
.rule-box.ban h4 { color: #dc3545; }

/* 링크 */
.guide-link {
    color: #5588ff;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.guide-link:hover {
    border-bottom-color: #5588ff;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .guide-layout { padding: 40px 20px; }
    .section-body { padding-left: 0; }
}

/* 모바일 화면 추가작업 */
@media screen and (max-width: 768px) {

    /* 패팅 40px제거 */
    html, body {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* 실링 제거 */
    .fixed-seal {
        display: none !important;
    }


    /* 메뉴 버튼 디자인 */
    .menu-button {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important; /* 넓이 */
        height: 50px !important; /* 높이 */
        background-color: #333 !important;
        color: white !important;
        
        /* 텍스트 디자인 */
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
        
        /* 내용 정렬 */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-right: 20px !important;
        
        border-radius: 0 !important;
        z-index: 1003 !important;
    }

    /* 모바일 메뉴 패널 디자인 */
    .side-menu {
        width: 100% !important;          /* 너비 100% */
        height: 100vh !important;        /* 높이 화면 전체 */
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        
        /* 위쪽에서 아래로 내려오게 설정 */
        transform: translateY(-100%) !important; 
        padding-top: 0 !important;
        background-color: transparent !important;
        background-image: url('../images/menu.png') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        z-index: 1004 !important;
    }

    .side-menu.is-open {
        transform: translateY(0) !important; /* 열리면 내려옴 */
    }
    
    /* 메뉴 닫기 버튼 위치 조정 */
    .menu-close-button {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important; /* 가로 100% */
        height: 50px !important;
        
        background-color: rgba(0,0,0,0.6) !important; /* 반투명 검정 배경 */
        color: white !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.3) !important;
        
        /* 텍스트 중앙 정렬 */
        writing-mode: horizontal-tb !important; /* 가로쓰기 */
        transform: none !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        
        font-size: 18px !important;
        font-weight: bold !important;
        z-index: 1005 !important;
    }


    /* 메뉴 내용물 여백 조정 */
    .side-menu-content {
        margin-top: 60px !important;
        padding: 0 20px !important;
    }

    /* 모바일 메인페이지 조정 */
    .main-container {
        padding: 0 0 0 0 !important;
        margin-top: 50px !important; /* 메뉴 높이 조정*/
    }
    
    .hero-image {
        height: 33vh !important;         /* 모바일 이미지 높이 33% */
        background-attachment: scroll !important;
    }


    /* 링크 이미지 */
    .site-slider-swiper {
        padding: 15px 10px !important;
        margin: 0 !important;
        height: auto !important;
    }
    .swiper-slide {
        width: 33% !important; 
        display: flex;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    .site-slider-item img {
        height: 80px !important; 
        width: auto !important;
        max-width: 80% !important;
        object-fit: contain !important;
        margin: 0auto 5px auto !important;
        display: block !important;
    }

    .site-slider-item p {
        font-size: 13px !important;
        margin: 0 !important;
        text-align: center !important;
    }


    /* 게시판 배치 */
    .board-grid {
        display: flex !important;
        flex-direction: column !important; /* 세로로 쌓기 */
        gap: 20px !important;
    }
    
    /* 컨테이너 여백 조정 */
    .board-container, .login-container {
        padding: 80px 15px 20px 15px !important;
        width: 100% !important;
        min-height: auto !important;
    }


    /* 게시글 리스트- */
    .post-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 20px 10px !important;
        gap: 20px !important;
        border-bottom: 1px solid #f1f1f1 !important; /* 구분선 */
    }
    
    .post-title {
        flex: 1 !important;
        font-size: 16px !important;
        font-weight: bold !important;
        line-height: 1.4 !important;
        word-break: break-all !important; /* 긴 제목 줄바꿈 */
    }


    /* 게시글 상세보기 */
    .post-header {
        display: flex !important;
        flex-direction: column !important; /* 세로쌓기 */
        padding: 30px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 20px !important;
    }

    /* 상단 정보줄 */
    .post-meta {
        display: flex !important;
        flex-direction: row !important;  
        justify-content: space-between !important;
        align-items: flex-start !important; 
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important; /* 구분선 */
        padding-bottom: 15px !important;
    }

    /* < 게시판명 */
    .board-name-link {
        font-size: 15px !important;
        color: #5588ff !important;
        font-weight: bold !important;
        text-decoration: none !important;
        margin-top: 5px !important;
    }

    /* 날짜 */
    .post-date {
        display: flex !important;
        flex-direction: column !important; /* 날짜 디자인 */
        align-items: flex-end !important;  /* 날짜 오른쪽 */
        justify-content: center !important;
        color: #888 !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    
    /* 연.월 */
    .post-date .year-month {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }
    
    /* 일*/
    .post-date .day {
        font-size: 28px !important;
        font-weight: 900 !important;
        color: #333 !important;
        line-height: 1 !important;
    }

    /* 제목 */
    .post-title-detail {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #333 !important;
        margin: 10px 0 0 0 !important;
        line-height: 1.4 !important;
        word-break: keep-all !important;
    }
    
    .post-actions {
        display: none !important;
    }

    /* 2. 게시글 */
    .post-title-detail {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 26px !important;
        font-weight: 800 !important;
        color: #333 !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        word-break: keep-all !important;
    }
    
    /* 관리자 버튼 위치 */
    .post-actions {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
        margin-top: 10px !important;
    }


    /* 모바일 검색창 디자인 */
    .search-bar {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .search-bar input {
        width: 100% !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
    }
    
    .search-bar button {
        width: 100% !important; /* 검색창과 같은 크기로(버튼) */
        padding: 12px !important;
        background-color: #33ccff !important;
    }


    /* 모바일 코드 보기 설정 */
    .cord-wrapper {
        padding: 60px 10px 10px 10px !important;
    }

    .code-viewer-layout {
        flex-direction: column !important; /* 세로 배치 */
    }

    /* 코드 영역은 위로 */
    .code-content {
        order: 1 !important;             /* 위 */
        width: 100% !important;
        border-radius: 8px 8px 0 0 !important;
        min-height: 50vh !important;     /* 최소 높이 50% 이상 */
    }
    
    .code-content pre {
        border-radius: 0 !important;     /* 둥근 모서리 제거 */
    }

    /* 파일 탐색기를 아래로 */
    .file-tree {
        order: 2 !important;             /* 아래 */
        width: 100% !important;
        height: 300px !important;        /* 스크롤 가능 */
        border-radius: 0 0 8px 8px !important;
        border-right: none !important;
        border-top: 1px solid #ddd !important;
    }


    /* 모바일 자기소개 */
    .intro-hero {
        flex-direction: column-reverse !important;
    }
    .intro-image-box, .profile-img {
        width: 200px !important;
        height: 200px !important;
    }
    .skills-grid {
        flex-direction: column !important;
    }
    .intro-layout, .guide-layout {
        padding: 70px 20px 20px 20px !important;
    }


    /* 모바일 footer */
    .main-footer {
        color: white;
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        width: 100%;
        box-sizing: border-box;
        margin-top: auto;
    }

    /* 링크 목록 */
    .footer-links {
        display: flex;
        flex-wrap: wrap; /* 화면 좁으면 줄바꿈 */
        justify-content: center;
        gap: 15px;
        margin-bottom: 10px;
    }

    .footer-links a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
        padding-right: 15px;
        border-right: 1px solid rgba(255,255,255,0.6); /* 구분선 */
        white-space: nowrap;
    }

    .footer-links a:last-child {
        border-right: none; /* 마지막 구분선 사용 X */
    }

    /* 로고 디자인 */
    .footer-lara-logo {
        width: 120px;
        height: auto;
        opacity: 0.9;
    }

    .footer-copyright {
        font-size: 12px;
        color: #eee;
        margin-top: 5px;
    }
}

/* footer 작업 */
@media screen and (min-width: 769px) {
    .footer-links {
        display: flex;
        flex-wrap: wrap; /* 화면 좁으면 줄바꿈 */
        justify-content: center;
        gap: 15px;
        margin-bottom: 10px;
    }

    .footer-links a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
        padding-right: 15px;
        border-right: 1px solid rgba(255,255,255,0.6); /* 구분선 */
        white-space: nowrap;
    }

    .footer-links a:last-child {
        border-right: none;
    }

    .footer-lara-logo {
        width: 160px;
        height: auto;
        opacity: 0.8;
        transition: opacity 0.3s;
    }

    .footer-lara-logo:hover {
        opacity: 1;
    }

    .footer-copyright {
        font-size: 12px;
        color: #eee;
        margin-top: 5px;
    }
}

/* 보드 문제 해결 */
.post-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 
        "cat cat"   /* 카테고리 전체 */
        "date title"; /* 날짜 제목 */
    gap: 10px 20px;
    align-items: end; /* 날짜 제목 맞춤 */
    padding: 30px 40px;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
}

/* 카테고리 */
.board-name-link {
    grid-area: cat;
    font-size: 16px;
    color: #5588ff;
    font-weight: bold;
    text-decoration: none;
}

/* 날짜 유지 */
.post-date {
    grid-area: date;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #888;
    line-height: 1;
}
.post-date .year-month { font-size: 14px; margin-bottom: 4px; }
.post-date .day { font-size: 32px; font-weight: 900; color: #333; }

/* 제목 */
.post-title-detail {
    grid-area: title;
    font-size: 32px;
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
    padding-bottom: 5px;
}

/* 관리자용 */
.post-actions {
    grid-column: 1 / -1;
    text-align: right;
    margin-top: 10px;
}