@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root {
    --primary-color: #4A90E2;
    --primary-hover-color: #5a9ee9;
    --danger-color: #e94f63;
    --success-color: #2ecc71;
    --profit-color: var(--success-color);
    --loss-color: var(--danger-color);
    --background-color: #121829;
    --content-bg-color: #1e293b;
    --text-color: #e2e8f0;
    --text-secondary-color: #94a3b8;
    --border-color: #334155;
    --shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* =================================== */
/* 기본 및 레이아웃                      */
/* =================================== */
html { height: 100%; }
body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px;
    width: 100%;
    flex-grow: 1;
    box-sizing: border-box;
}
.card {
    background: var(--content-bg-color);
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.card h3 {
    font-size: 1.25em;
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

/* =================================== */
/* 네비게이션 & 푸터                    */
/* =================================== */
.main-nav { background: var(--content-bg-color); box-shadow: 0 2px 4px rgba(0,0,0,0.3); border-bottom: 1px solid var(--border-color); padding: 0 20px; width: 100%; z-index: 1000; flex-shrink: 0; box-sizing: border-box; }
.nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; height: 60px; }
.logo { font-size: 1.5em; font-weight: 700; color: var(--primary-color); text-decoration: none; }
.nav-links a { color: var(--text-secondary-color); text-decoration: none; margin-left: 20px; transition: color 0.3s; }
.nav-links a:hover { color: var(--text-color); }
.main-footer { padding: 40px 20px; background-color: var(--content-bg-color); border-top: 1px solid var(--border-color); color: var(--text-secondary-color); text-align: center; font-size: 0.9em; flex-shrink: 0; box-sizing: border-box; }
.footer-container a { color: var(--text-secondary-color); text-decoration: none; margin: 0 10px; }
.hamburger-btn { display: none; background: none; border: none; color: var(--text-color); font-size: 1.5em; cursor: pointer; }
.mobile-menu { display: none; flex-direction: column; background: var(--content-bg-color); width: 100%; border-bottom: 1px solid var(--border-color); z-index: 999; }
.mobile-menu a { color: var(--text-secondary-color); padding: 15px 20px; text-decoration: none; border-top: 1px solid var(--border-color); }
.mobile-menu a:hover { background-color: rgba(74, 144, 226, 0.1); color: var(--text-color); }
.mobile-menu.active { display: flex; }

/* =================================== */
/* 폼 요소 (공통)                      */
/* =================================== */
.form-container { background: var(--content-bg-color); padding: 40px; border-radius: 8px; box-shadow: var(--shadow); max-width: 450px; margin: 50px auto; }
.form-container h1 { text-align: center; color: var(--primary-color); margin-bottom: 10px; }
.form-container p { text-align: center; color: var(--text-secondary-color); margin-bottom: 30px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.9em; }
.form-group input[type="text"], .form-group input[type="password"], .form-group input[type="email"], .form-group input[type="number"], .form-group input[type="file"], .form-group textarea, .form-group select { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 4px; box-sizing: border-box; transition: border-color 0.3s; background-color: #1e2128; color: var(--text-color); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2); }
.form-hint { font-size: 0.8em; color: var(--text-secondary-color); margin-top: 5px; }
.form-row { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 15px; }
.form-row .form-group { flex-grow: 1; margin-bottom: 0; }
#create-form .form-row .form-group:last-child { flex-grow: 0.7; }
.form-share-toggle { display: flex; align-items: center; background-color: rgba(0,0,0,0.1); padding: 12px; border-radius: 5px; margin-top: 5px; }
.form-share-toggle label { margin: 0; display: flex; align-items: center; cursor: pointer; font-weight: 500; }
.form-share-toggle input[type="checkbox"] { width: auto; margin-right: 10px; }
.avatar-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px; margin-bottom: 15px; }
.avatar-option { position: relative; cursor: pointer; }
.avatar-option img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 3px solid transparent; transition: border-color 0.2s; }
.avatar-option input[type="radio"]:not(:checked) + img { opacity: 0.5; transition: opacity 0.2s; }
.avatar-option input[type="radio"]:not(:checked):hover + img { opacity: 0.8; }
.avatar-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.avatar-option input[type="radio"]:checked + img { border-color: var(--primary-color); opacity: 1; }

/* =================================== */
/* 버튼 & 링크 & 알림                  */
/* =================================== */
.btn { padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-weight: 700; font-size: 1em; transition: background-color 0.3s, transform 0.1s; text-decoration: none; display: inline-block; text-align: center; box-sizing: border-box; }
.primary-btn { background-color: var(--primary-color); color: white; width: 100%; }
.primary-btn:hover { background-color: var(--primary-hover-color); transform: translateY(-1px); }
.danger-btn { background-color: var(--danger-color); color: white; width: 100%; }
.secondary-btn { background-color: var(--border-color); color: var(--text-color); width: 100%; }
.secondary-btn:hover { background-color: #475569; }
.additional-links, .switch-form-link { text-align: center; margin-top: 20px; font-size: 14px; }
.additional-links a, .switch-form-link a { color: var(--primary-color); text-decoration: none; }
.flash-message { padding: 15px; margin-bottom: 20px; border-radius: 4px; text-align: center; border: 1px solid transparent; }
.flash-message.error { background-color: rgba(233, 79, 99, 0.1); color: var(--danger-color); border-color: var(--danger-color); }
.flash-message.success { background-color: rgba(46, 204, 113, 0.1); color: var(--success-color); border-color: var(--success-color); }

/* =================================== */
/* 페이지별 레이아웃                     */
/* =================================== */
.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.dashboard-column-left, .dashboard-column-right { display: flex; flex-direction: column; gap: 20px; }
.profile-container { max-width: 720px; margin-left: auto; margin-right: auto; }
.community-feed-wrapper { max-width: 720px; margin-left: auto; margin-right: auto; }
.landing-container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex-grow: 1; }
.landing-container .logo-text { font-size: 2.5em; }
.landing-actions { margin-top: 30px; width: 100%; max-width: 300px; }
.landing-actions .btn { margin-bottom: 15px; }

/* =================================== */
/* 컴포넌트 (카드, 모달 등)                */
/* =================================== */
.profile-page-header { display: flex; align-items: center; }
.profile-avatar-large { width: 100px; height: 100px; border-radius: 50%; margin-right: 30px; border: 3px solid var(--border-color); object-fit: cover; flex-shrink: 0; }
.profile-details .profile-nickname { font-size: 1.8em; }
.profile-stats { display: flex; gap: 20px; margin-bottom: 15px; }
.profile-stats a { text-decoration: none; color: var(--text-secondary-color); transition: color 0.2s; }
.profile-stats a:hover { color: var(--text-color); }
.profile-bio { margin: 0 0 20px; white-space: pre-wrap; color: var(--text-secondary-color); line-height: 1.7; }
.profile-actions { display: flex; gap: 10px; justify-content: flex-start; }
.profile-actions .btn { width: auto; flex-grow: 0; }
.profile-summary { display: flex; align-items: center; }
.profile-summary .profile-info h2 { font-size: 1.4em; margin: 0 0 5px; }
.profile-summary .profile-info p { margin: 0; }
.profile-summary img { width: 60px; height: 60px; border-radius: 50%; margin-right: 20px; object-fit: cover; }
.entry-card { border-bottom: 1px solid var(--border-color); padding-bottom: 20px; padding-top: 20px; }
.entry-card:last-child { border-bottom: none; }
.entry-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; gap: 15px; flex-wrap: wrap; }
.entry-author { flex-grow: 1; min-width: 0; display: flex; align-items: center; text-decoration: none; color: var(--text-color); }
.entry-author-info { display: flex; align-items: center; gap: 8px; }
.entry-author-info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-author img { width: 45px; height: 45px; border-radius: 50%; margin-right: 15px; object-fit: cover; }
.entry-options { flex-shrink: 0; }
.post-image { width: 100%; max-height: 500px; object-fit: cover; border-radius: 8px; margin-top: 15px; background-color: #2a3a4f; }
.youtube-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 15px 0; border-radius: 8px; }
.youtube-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.entry-actions { margin-top: 15px; padding-top: 15px; }
.comment-section { margin-top: 20px; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; overflow-y: auto; }
.modal-content { background-color: var(--content-bg-color); color: var(--text-color); padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); width: 90%; max-width: 500px; position: relative; }
.close-modal-btn { position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; color: #aaa; background: none; border: none; cursor: pointer; transition: color 0.2s; }
.close-modal-btn:hover { color: #fff; }
.comment-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.9em; }
.comment-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.like-btn { background: none; border: none; color: var(--text-secondary-color); cursor: pointer; padding: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9em; border-radius: 5px; transition: background-color 0.2s, color 0.2s; }
.like-btn:hover { background-color: rgba(255, 255, 255, 0.05); }
.like-btn i { font-size: 1.2em; transition: transform 0.2s ease, color 0.2s ease; }
.like-btn.liked i { color: var(--danger-color); font-weight: 900; }
.like-btn:active i { transform: scale(1.3); }
.search-filter-box { margin-bottom: 20px; }
.search-filter-form { display: flex; gap: 15px; align-items: center; }
.search-filter-form input[type="search"], .search-filter-form select { padding: 12px; font-size: 1em; border: 1px solid var(--border-color); border-radius: 4px; background-color: #1e2128; color: var(--text-color); box-sizing: border-box; }
.search-filter-form input[type="search"] { flex-grow: 1; }
.search-filter-form select, .search-filter-form button { flex-shrink: 0; width: auto; }
.search-filter-form button { width: 80px; }
.holding-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
.holding-card { background-color: var(--background-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.holding-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.holding-card-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 8px; font-size: 0.9em; }
.stock-name { font-weight: 700; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-quantity { font-size: 0.9em; color: var(--text-secondary-color); background-color: var(--border-color); padding: 2px 6px; border-radius: 4px; }
.holding-card-body { font-size: 0.9em; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.holding-card-body .price-label { color: var(--text-secondary-color); font-size: 0.9em; }
.holding-card-body .price-value { font-weight: 700; color: var(--primary-color); font-size: 1.2em; }
.preview-wrapper { position: relative; display: inline-block; max-width: 100%; margin-top: 10px; box-sizing: border-box; }
.preview-image-sm { max-width: 100% !important; height: auto !important; max-height: 200px !important; border-radius: 8px !important; border: 1px solid var(--border-color) !important; display: block !important; margin: 0 auto; object-fit: contain; }
.preview-remove-btn { position: absolute; top: -5px; right: -5px; background: rgba(0,0,0,0.7); color: white; border: 2px solid var(--background-color); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; line-height: 20px; text-align: center; font-size: 16px; font-weight: bold; }
.danger-zone { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--danger-color); }
.danger-zone h4 { color: var(--danger-color); }
.user-list-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.user-list-item:last-child { border-bottom: none; }
.user-list-item .user-info-link { display: flex; align-items: center; text-decoration: none; color: var(--text-color); }
.user-list-item .user-avatar-small { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; margin-right: 15px; }
.user-list-item .btn { width: auto; padding: 6px 12px; font-size: 0.85em; }
.report-btn { font-size: 0.8em; color: var(--text-secondary-color); text-decoration: none; padding: 2px 6px; border: 1px solid var(--border-color); border-radius: 4px; transition: background-color 0.2s, color 0.2s; }
.report-btn:hover { background-color: var(--danger-color); color: white; border-color: var(--danger-color); }

/* =================================== */
/* 반응형 (모바일)                       */
/* =================================== */
@media (min-width: 1024px) { .dashboard-grid { grid-template-columns: 1fr 1.5fr; align-items: start; } .dashboard-column-left { position: sticky; top: 80px; } }
@media (max-width: 768px) { .nav-links { display: none; } .hamburger-btn { display: block; } main.container { padding: 0 10px; margin: 10px auto; } .form-container { padding: 20px; } .profile-page-header { flex-direction: column; text-align: center; } .profile-avatar-large { margin-right: 0; margin-bottom: 20px; } }
/* =================================== */
/* 태블릿 및 모바일용 검색창 추가 수정     */
/* =================================== */
@media (max-width: 768px) {
    .search-filter-form {
        flex-direction: column; /* 요소들을 세로로 쌓음 */
        align-items: stretch;   /* 요소들을 컨테이너 너비에 맞게 쫙 늘림 */
    }

    .search-filter-form button {
        width: 100%; /* 버튼도 너비 100%로 맞춤 */
    }
}