/* style.css - [2026-05-11] 15 SNS 통합 디자인 가이드: 15살의 감성을 담은 리라하우스형 레이아웃 및 광고 구좌 최적화 */

/* ============================================================ 1. 기본 변수 및 초기화 ============================================================ */
:root {
    --main-blue: #007bff;      /* 15 로고 및 주요 포인트 컬러 */
    --sky-blue: #00c3ff;       /* 마우스 오버 및 강조 색상 (15 테마 컬러) */
    --bg-gray: #f0f2f5;        /* 전체 배경색 (눈이 편안한 톤) */
    --text-dark: #222222;      /* 기본 글자색 */
    --border-light: #eeeeee;   /* 구분선 및 테두리 */
    --ad-width: 200px;         /* 좌우 광고 구좌 너비 고정 (15 수익 모델 레이아웃) */
}

* { margin: 0; padding: 0; box-sizing: border-box; letter-spacing: -0.8px; }
body { font-family: 'Pretendard', 'Malgun Gothic', sans-serif; background-color: var(--bg-gray); color: var(--text-dark); line-height: 1.6; overflow-x: hidden; }

/* ============================================================ 2. 상단 네비게이션 [15 전용 스타일] ============================================================ */
.main-nav { width: 100%; background: #ffffff; border-bottom: 2px solid var(--main-blue); position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.nav-content { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; }
.logo { font-size: 2.2rem; font-weight: 900; color: var(--main-blue); text-decoration: none; transition: 0.2s; letter-spacing: -2px; }
.logo:hover { color: var(--sky-blue); transform: scale(1.05); }

.menu { display: flex; align-items: center; gap: 30px; }
.menu a, .menu span { font-weight: bold; color: #555; text-decoration: none; cursor: pointer; transition: 0.2s; font-size: 1rem; }
.menu a:hover, .menu span:hover { color: var(--sky-blue); }

/* ============================================================ 3. 15 전체 레이아웃 (광고 구좌 200px 고정) ============================================================ */
.app-wrapper { display: grid; grid-template-columns: var(--ad-width) 1fr var(--ad-width); width: 100%; max-width: 1600px; margin: 0 auto; min-height: 100vh; gap: 30px; padding: 40px 20px; }

/* 광고 영역 (15 스폰서 구좌) */
.side-ad-area { width: var(--ad-width); position: sticky; top: 100px; height: fit-content; }
.ad-box { background: #ffffff; border: 1px solid #ddd; border-radius: 20px; height: 600px; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 0.9rem; box-shadow: 0 4px 15px rgba(0,0,0,0.03); text-align: center; }

/* 본문 메인 컨테이너 (정주행 집중형 디자인) */
.main-content { background: #ffffff; padding: 50px; border-radius: 35px; box-shadow: 0 10px 45px rgba(0,0,0,0.04); border: 1px solid #eee; overflow: hidden; width: 100%; }

/* ============================================================ 4. 15 정주행 게시글 디자인 (Full Mode) ============================================================ */
.full-mode-post { margin-bottom: 150px; }
.post-header h2 { font-size: 2.8rem; font-weight: 900; color: #111; line-height: 1.25; margin: 15px 0; letter-spacing: -1.5px; }

/* 이미지 및 멀티미디어 레이아웃 */
.post-content-area img { max-width: 100%; height: auto; display: block; margin: 45px auto; border-radius: 18px; box-shadow: 0 12px 35px rgba(0,0,0,0.08); transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); cursor: zoom-in; }
.post-content-area img:hover { transform: scale(1.02); }
.img-desc { color: #888; font-size: 0.95rem; text-align: center; margin-top: -25px; margin-bottom: 50px; font-weight: 600; border-bottom: 2px solid #f8f9fa; display: inline-block; padding: 0 20px 10px 20px; }

/* 유튜브 및 외부 링크 카드 디자인 */
.link-preview-box { border: 1px solid #eee; border-radius: 20px; transition: 0.3s; background: #fafafa; }
.link-preview-box:hover { border-color: var(--sky-blue) !important; background: #f0fbff !important; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,195,255,0.1); }

/* ============================================================ 5. 15 댓글 시스템 (감성 포스트잇 스타일) ============================================================ */
.comment-full-section { background: #f9f9f9; border: 1px solid #f0f0f0; border-radius: 35px; padding: 50px; margin-top: 80px; }

/* 부모 댓글 디자인 */
.parent-comment { background: #ffffff; border-left: 6px solid var(--sky-blue); padding: 25px; border-radius: 15px; box-shadow: 0 6px 18px rgba(0,0,0,0.03); margin-bottom: 20px; transition: 0.3s; }
.parent-comment:hover { transform: translateX(8px); border-left-color: var(--main-blue); box-shadow: 0 10px 25px rgba(0,0,0,0.06); }

/* 댓글 입력창 포커스 효과 */
.comment-input-area input:focus { border-color: var(--sky-blue) !important; box-shadow: 0 0 12px rgba(0,195,255,0.2); background: #ffffff; }

/* ============================================================ 6. 라이트박스 모달 (이미지 확대) ============================================================ */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 5000; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
#modal-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 10px; box-shadow: 0 0 50px rgba(0,0,0,0.5); }
.modal-info { position: absolute; top: 35px; color: #ffffff; font-size: 1.4rem; font-weight: 800; text-shadow: 0 2px 15px rgba(0,0,0,0.6); }

/* ============================================================ 7. 15 전용 유틸리티 ============================================================ */
/* 시그니처 글쓰기 버튼 */
.write-btn { background: var(--main-blue); color: #fff !important; padding: 14px 32px; border-radius: 50px; font-weight: 900; font-size: 1.1rem; border: none; transition: 0.3s; box-shadow: 0 8px 25px rgba(0,123,255,0.3); cursor: pointer; }
.write-btn:hover { background: var(--sky-blue); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,195,255,0.4); }

/* 스크롤바 디자인 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; border: 2px solid #f1f1f1; }
::-webkit-scrollbar-thumb:hover { background: var(--sky-blue); }

/* 애니메이션 */
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.main-content, .sidebar-card, .home-feed-item { animation: fadeIn 0.6s ease-out; }