:root {
    --bg-body: #f8f9fa;
    --bg-card: #ffffff;
    --bg-header: rgba(255, 255, 255, 0.9);
    --text-main: #1a1a1a;
    --text-muted: #6c757d;
    --primary: #3b5998;
    --border: #e9ecef;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --header-height: 60px;
    --aside-width: 240px;
}

[data-theme='dark'] {
    color-scheme: dark; /* 브라우저 기본 UI(스크롤바 포함)를 다크모드로 강제 */
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --bg-header: rgba(30, 30, 30, 0.9);
    --text-main: #e9ecef;
    --text-muted: #adb5bd;
    --primary: #4c6ef5;
    --border: #2d2d2d;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    margin: 0; padding: 0; font-family: 'Pretendard', sans-serif;
    background: var(--bg-body); color: var(--text-main);
    display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}

.no-transition * { transition: none !important; }

header {
    height: var(--header-height);
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 15px; /* 메뉴 버튼과 검색창 사이 간격을 조금 넓힙니다 */
    z-index: 1000;
    backdrop-filter: blur(12px);
    flex-shrink: 0;
}
.menu-btn { font-size: 1.5em; cursor: pointer; padding: 5px; color: var(--text-main); }
.logo { font-size: 1.2em; font-weight: 800; color: var(--primary); cursor: pointer; white-space: nowrap; }

.search-container { flex: 1; display: flex; background: var(--bg-body); border-radius: 10px; border: 1px solid var(--border); }
.search-container select option {
    background: var(--bg-card);
    color: var(--text-main);
}
#search-bar {
    flex: 1; /* 인풋창이 남은 공간을 다 채우도록 */
    background: none;
    border: none;
    padding: 8px 12px;
    color: var(--text-main);
    outline: none;
    font-size: 16px;
}

.container { display: flex; flex: 1; overflow: hidden; position: relative; }

aside {
    width: var(--aside-width); background: var(--bg-card);
    border-right: 1px solid var(--border); display: flex; flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 1100;
    transform: translateX(0);
}
aside.collapsed { transform: translateX(-100%); }

.aside-content { flex: 1; padding: 20px; overflow-y: auto; }
.aside-footer {
    display: flex;
    flex-wrap: wrap; /* 여러 개일 때 줄바꿈 */
    gap: 15px;
    padding: 20px;
    border-top: 1px solid var(--border);
    justify-content: space-around;
}

/* 스위치 개별 컨테이너 */
.switch-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* 스위치 레이블 (이모지) */
.switch-label {
    font-size: 1.1rem;
    transition: transform 0.2s;
}

/* 스위치 본체 */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

/* 활성화 상태 (체크됨) */
input:checked + .slider {
    background-color: var(--primary); /* 메인 컬러로 변경 */
}

input:checked + .slider:before {
    transform: translateX(16px);
}

/* 마우스 호버 시 이모지 살짝 커짐 */
.switch-wrapper:hover .switch-label {
    transform: scale(1.2);
}

.menu-item {
    padding: 10px 12px;
    margin: 4px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-main);
}

.menu-item:hover {
    background: var(--border);
}

.menu-item.active {
    background: var(--primary);
    color: #fff;
    font-weight: bold;
}

/* 검색창 내부 정렬 버튼 스타일 */
.icon-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 15px;
    cursor: pointer;
    border-left: 1px solid var(--border);
    color: var(--text-main);
    font-size: 0.85em;
    white-space: nowrap;
}

/* 스위치 공통 디자인 */
.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 0.9em;
}

main {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 16px; width: 100%;
    -webkit-overflow-scrolling: touch;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
    gap: 16px;
    width: 100%;
}

.post-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; /* 트랜지션 추가 */
    position: relative;
    width: 100%;
    overflow: hidden;
}
/* 마우스 호버 시 효과 추가 */
.post-card:hover {
    transform: translateY(-5px); /* 위로 살짝 들림 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* 그림자 깊게 */
    border-color: var(--primary); /* 테두리 강조 */
}
/* 다크모드일 때 호버 그림자 강도 조절 */
[data-theme='dark'] .post-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* 공통 아이콘 스타일 */
.sp-nick {
    display: inline-block;
    overflow: hidden;
    background: url('icons/sp_nick.png') no-repeat;
    background-size: 44px 26px;
    width: 14px;
    height: 13px;
    margin-left: 3px;
    vertical-align: middle;
}

/* 타입별 좌표 설정 */
.nogonick     { background-position: 0 -14px; }
.gonick       { background-position: 0 0; }
.sub-nogonick { background-position: -30px -14px; }
.sub-gonick   { background-position: -30px 0; }
.m-nogonick   { background-position: -15px -14px; }
.m-gonick     { background-position: -15px 0; }

.author-id {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-left: 4px;
}

.author-id-link {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-left: 4px;
    text-decoration: none;
}

.author-id-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.title-link { font-size: 1.1em; font-weight: 700; margin-bottom: 8px; text-decoration: none; color: inherit; display: block; z-index: 20; word-break: break-all; }
.card-meta { font-size: 0.85em; color: var(--text-muted); margin-bottom: 12px; }
.card-summary { font-size: 0.9em; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px; }

/* 이미지가 비활성화되었을 때 thumb-wrapper를 숨김 */
.hide-images .thumb-wrapper {
    display: none !important;
}

.thumb-wrapper {
    position: relative;
    margin-top: auto;
    /* width: 100%를 제거하고 아래 설정 추가 */
    width: max-content;
    max-width: 100%; /* 부모 카드를 넘지 않게 제한 */
}

.thumb-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 0;
    /* width: 100% 제거 */
    touch-action: pan-x;
}
.thumb-scroll::-webkit-scrollbar { display: none; }
.thumb-scroll img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; background: var(--border); flex-shrink: 0; cursor: zoom-in; pointer-events: auto; }

/* 갤러리 모드 활성화 시 */
.post-grid.gallery-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.gallery-view .post-card {
    aspect-ratio: 1/1;
    padding: 0;
    position: relative;
    border: none;
}
.gallery-view .card-meta, .gallery-view .card-summary { display: none; }
.gallery-view .thumb-wrapper, .gallery-view .thumb-img { height: 100%; width: 100%; object-fit: cover; margin: 0; }
.gallery-view .title-link {
    position: absolute; bottom: 0; background: rgba(0,0,0,0.7);
    color: #fff !important; width: 100%; padding: 8px; font-size: 0.8em;
}

#modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: flex-start; z-index: 2000; }
#modal-content {
    background: var(--bg-card); width: 100%; max-width: 800px; height: 100%; max-height: 100vh;
    overflow-y: auto; padding: 60px 20px 40px 20px; position: relative; border-radius: 0;
    overflow-x: hidden;
}

#modal-body-text { width: 100%; }
#modal-body-text img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 15px auto;
    border-radius: 8px;
    cursor: zoom-in;
    content-visibility: auto; /* 화면 밖 요소의 렌더링 생략 */
}

#viewer-mode { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 3000; display: none; flex-direction: column; overflow-y: auto; align-items: center; }
.viewer-header { position: sticky; top: 0; width: 100%; padding: 12px 16px; background: rgba(0,0,0,0.8); color: #fff; display: flex; justify-content: space-between; align-items: center; z-index: 3100; }
.viewer-content { width: 100%; max-width: 900px; }
.viewer-content img { width: 100%; height: auto; display: block; }

@media (min-width: 769px) {
    aside { position: relative; transform: none; }
    aside.collapsed { margin-left: calc(var(--aside-width) * -1); transform: none; }
    #modal-content { height: auto; max-height: 90vh; margin-top: 40px; border-radius: 20px; padding: 40px; }
}
@media (max-width: 768px) {
    header {
        padding: 0 10px;
        gap: 10px;
    }
}

#modal-body-text {
    white-space: pre-wrap; /* 줄바꿈과 공백을 유지하며 너비에 맞춰 자동 줄바꿈 */
    word-break: break-all; /* 긴 단어도 줄바꿈 허용 */
}

img.con {
    /* 크기를 미리 지정하면 이미지가 뜨기 전에도 자리를 잡고 있습니다 */
    width: 100px;
    height: 100px;
    background: var(--border); /* 로딩 전 회색 박스 효과 */
    content-visibility: auto;  /* 화면 밖 이미지는 렌더링 생략 (매우 빠름) */
}

.loader {
    border: 4px solid var(--border);
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}