/* 최종수정: 2026-02-24 01:30 */
/* 초당초 학부모회 - 프로토타입 시안 기반 */
:root {
    --primary: #2B6CB0;
    --primary-light: #EBF4FF;
    --primary-dark: #1A4971;
    --accent: #F6AD55;
    --accent-light: #FEFCBF;
    --bg: #F7FAFC;
    --card: #FFFFFF;
    --text: #1A202C;
    --text-secondary: #718096;
    --text-light: #A0AEC0;
    --border: #E2E8F0;
    --success: #48BB78;
    --danger: #FC8181;
    --warning: #F6AD55;
    --radius: 14px;
    --shadow: 0 2px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.1);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Pretendard Variable', -apple-system, sans-serif;
    background: var(--bg); color: var(--text); line-height: 1.6;
    -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
.app-wrap { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg); }
@media (min-width: 481px) { .app-wrap { border-left:1px solid var(--border); border-right:1px solid var(--border); } }
.content-area { padding-bottom: 80px; }

/* ===== 헤더 ===== */
.app-header {
    background: var(--primary); padding: 14px 16px 16px; color: white;
}
.app-header-top {
    display: flex; justify-content: space-between; align-items: center;
}
.app-header h1 { font-size: 20px; font-weight: 800; color: white; }
.app-header .slogan { font-size: 12px; opacity: 0.8; margin-top: 2px; }
.header-icons { display: flex; gap: 6px; }
.header-icon-btn {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,0.15); font-size: 16px;
    position: relative; border: none; cursor: pointer; text-decoration: none; color: white;
}
.noti-badge {
    position: absolute; top: -2px; right: -2px; background: #FC8181; color: white;
    font-size: 9px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--primary);
}

/* 뒤로가기 헤더 */
.app-header-simple {
    background: var(--primary); padding: 12px 16px; color: white;
    display: flex; align-items: center; gap: 12px;
}
.app-header-simple .back { font-size: 20px; cursor: pointer; color: white; text-decoration: none; }
.app-header-simple h1 { font-size: 17px; font-weight: 700; color: white; }

/* ===== 탭 ===== */
.tab-bar { display: flex; background: white; border-bottom: 2px solid var(--border); }
.tab-bar a {
    flex: 1; text-align: center; padding: 12px 0; font-size: 14px; font-weight: 600;
    color: var(--text-light); border: none; position: relative; white-space: nowrap;
}
.tab-bar a.active { color: var(--primary); }
.tab-bar a.active::after {
    content: ''; position: absolute; bottom: -2px; left: 20%; right: 20%;
    height: 3px; background: var(--primary); border-radius: 3px;
}

/* ===== 로그인 ===== */
.login-hero {
    text-align: center; padding: 48px 24px 32px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white;
}
.login-hero .school-icon {
    width: 80px; height: 80px; background: rgba(255,255,255,0.15);
    border-radius: 24px; display: flex; align-items: center; justify-content: center;
    font-size: 40px; margin: 0 auto 16px; backdrop-filter: blur(10px);
}
.login-hero h1 { font-size: 24px; font-weight: 800; margin-bottom: 6px; color: white; }
.login-hero p { font-size: 14px; opacity: 0.8; }
.login-form { padding: 24px 20px; }
.login-links { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-light); }
.login-links a { color: var(--text-secondary); font-weight: 600; }
.login-links span { margin: 0 10px; color: var(--border); }
.login-footer {
    text-align: center; padding: 16px; color: var(--text-light); font-size: 12px; line-height: 1.8;
}

/* ===== 폼 ===== */
.form-group { margin-bottom: 16px; text-align: left; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 14px 16px; border: 2px solid var(--border); border-radius: 12px;
    font-size: 15px; font-family: inherit; transition: border-color 0.2s; outline: none; background: white; color: var(--text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); }
.form-group .input-row { display: flex; gap: 8px; }
.form-group .input-row input { flex: 1; }
.form-hint { font-size: 11px; color: var(--text-light); margin-top: 4px; }

/* ===== 버튼 ===== */
.btn {
    display: block; width: 100%; padding: 15px; border: none; border-radius: 12px;
    font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.2s; text-align: center;
}
.btn-inline { display: inline-flex; width: auto; align-items: center; justify-content: center; gap: 6px; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { background: var(--text-light); cursor: not-allowed; }
.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-accent { background: var(--accent); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-success { background: var(--success); color: white; }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 2px solid var(--border); }
.btn-kakao { background: #FEE500; color: #191919; font-weight: 800; }
.btn-sm { display: inline-block; width: auto; padding: 8px 16px; font-size: 13px; border-radius: 8px; }
.btn-full { width: 100%; }

/* ===== 알림 ===== */
.alert { padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.alert-error { background: #FFF5F5; color: #C53030; border: 1px solid #FED7D7; }
.alert-success { background: #F0FFF4; color: var(--success); border: 1px solid #C6F6D5; }
.alert-info { background: var(--primary-light); color: var(--primary); border: 1px solid #BEE3F8; }

/* ===== 카드 ===== */
.card { background: var(--card); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; box-shadow: var(--shadow); }

/* ===== 공지 배너 ===== */
.notice-banner {
    margin: 10px 16px 0; background: var(--accent-light); border: 1px solid #F6E05E;
    border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 10px;
    text-decoration: none; overflow: hidden;
}
.notice-badge { background: var(--accent); color: white; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }
.notice-text { font-size: 13px; font-weight: 600; color: #975A16; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

/* ===== 게시글 목록 ===== */
.post-list { padding: 12px 16px; }
.post-list-wrap { background: white; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.post-item {
    padding: 16px; border-bottom: 1px solid var(--border);
}
.post-item:last-child { border-bottom: none; }
.post-item.pinned { background: #FFFFF0; }
.post-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.post-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--primary-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: var(--primary); flex-shrink: 0; overflow: hidden;
}
.post-avatar img { width:100%; height:100%; object-fit:cover; }
.post-author { font-size: 14px; font-weight: 700; color: var(--text); }
.post-class { font-size: 12px; color: var(--primary); font-weight: 600; }
.post-time { font-size: 11px; color: var(--text-light); }
.post-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; line-height: 1.4; }
.post-preview { font-size: 13px; color: var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.5; }
.post-footer { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-light); }
.post-footer span { display:flex; align-items:center; gap:3px; }
.pin-badge { font-size:11px; color:var(--accent); font-weight:700; margin-right:4px; }

/* ===== FAB ===== */
.fab {
    position: fixed; bottom: 76px; right: calc(50% - 215px); width: 52px; height: 52px;
    background: var(--primary); border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: white; box-shadow: 0 4px 16px rgba(43,108,176,0.35);
    text-decoration: none; z-index: 99;
}
.fab:active { transform: scale(0.9); }
@media (max-width: 480px) { .fab { right: 16px; } }

/* ===== 하단 네비 ===== */
.bottom-nav {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px;
    background: white; border-top: 1px solid var(--border); display: flex;
    padding: 6px 0 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); z-index: 100;
}
.nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 10px; font-weight: 600; color: var(--text-light); text-decoration: none; padding: 4px 0;
}
.nav-item.active { color: var(--primary); }
.nav-item .nav-icon { font-size: 20px; display: block; }
.nav-badge {
    background: var(--danger); color: white; font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 10px; position: relative; top: -2px; min-width: 16px; text-align: center;
}

/* ===== 프로필 ===== */
.profile-card {
    background: white; border-radius: var(--radius); padding: 24px 16px;
    margin: 16px; text-align: center; box-shadow: var(--shadow);
}
.profile-avatar {
    width: 72px; height: 72px; border-radius: 50%; background: var(--primary-light);
    margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
    font-size: 28px; overflow: hidden;
}
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-nick { font-size: 20px; font-weight: 800; color: var(--text); }
.profile-children { font-size: 14px; color: var(--primary); margin-top: 2px; }

/* 역할 배지 */
.role-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.role-admin { background: var(--accent-light); color: #975A16; border: 1px solid #F6E05E; }
.role-vice { background: var(--primary-light); color: var(--primary); border: 1px solid #90CDF4; }
.role-auditor { background: #FAF5FF; color: #6B46C1; border: 1px solid #D6BCFA; }
.role-secretary { background: #FFFFF0; color: #975A16; border: 1px solid #F6E05E; }
.role-class-rep { background: #F0FFF4; color: #276749; border: 1px solid #9AE6B4; }

/* 통계 카드 */
.stat-card {
    flex:1; text-align:center; background:white; border-radius:var(--radius);
    padding:16px 8px; box-shadow:var(--shadow);
}
.stat-num { font-size:24px; font-weight:900; color:var(--primary); }
.stat-label { font-size:11px; color:var(--text-secondary); margin-top:2px; }

/* 메뉴 아이템 */
.menu-item {
    display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:white;
    border-radius:12px; margin-bottom:8px; box-shadow:var(--shadow); text-decoration:none; color:var(--text);
}

/* ===== 글 상세 ===== */
.detail-wrap { padding:16px; }
.detail-title { font-size:20px; font-weight:800; margin-bottom:12px; line-height:1.4; }
.detail-content { font-size:15px; line-height:1.9; margin-bottom:16px; color:#374151; }
.detail-photos { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.detail-photos img { width:100%; border-radius:12px; }
.detail-actions {
    display:flex; gap:16px; padding:12px 0; border-top:1px solid var(--border);
    border-bottom:1px solid var(--border); margin-bottom:16px;
}
.detail-actions button {
    background:none; border:none; font-size:14px; color:var(--text-secondary);
    cursor:pointer; display:flex; align-items:center; gap:4px; font-family:inherit; font-weight:600;
}
.detail-actions button.liked { color:#E53E3E; }

/* 댓글 */
.comment-item { display:flex; gap:10px; padding:12px 0; border-bottom:1px solid #EDF2F7; }
.comment-avatar {
    width:32px; height:32px; border-radius:50%; background:var(--primary-light); flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--primary);
}
.comment-avatar img { width:100%; height:100%; object-fit:cover; }
.comment-author { font-size:13px; font-weight:700; }
.comment-text { font-size:14px; margin-top:2px; line-height:1.5; }
.comment-time { font-size:11px; color:var(--text-light); margin-top:4px; }
.comment-input {
    position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px;
    background:white; border-top:1px solid var(--border); padding:10px 16px; display:flex; gap:8px;
    padding-bottom:max(10px, env(safe-area-inset-bottom));
}
.comment-input input { flex:1; padding:10px 16px; border:2px solid var(--border); border-radius:20px; font-size:14px; font-family:inherit; outline:none; }
.comment-input input:focus { border-color:var(--primary); }
.comment-input button { padding:10px 18px; background:var(--primary); color:white; border:none; border-radius:20px; font-weight:700; font-family:inherit; cursor:pointer; }

/* ===== 투표 ===== */
.vote-item { background:white; border-radius:var(--radius); padding:16px; margin:0 16px 10px; box-shadow:var(--shadow); }
.vote-status { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.vote-active { background:#F0FFF4; color:var(--success); }
.vote-closed { background:var(--bg); color:var(--text-light); }

/* ===== 글쓰기 ===== */
.write-wrap { padding:16px; }
.write-wrap textarea { width:100%; min-height:200px; border:none; font-size:15px; font-family:inherit; resize:none; outline:none; line-height:1.8; }
.photo-upload-area {
    border:2px dashed var(--border); border-radius:12px; padding:20px; text-align:center; margin-top:12px;
    cursor:pointer; color:var(--text-light); font-size:14px;
}
.photo-upload-area:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.photo-preview-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.photo-thumb { width:72px; height:72px; border-radius:10px; object-fit:cover; }

/* ===== 초대하기 ===== */
.invite-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius); padding: 28px 20px; text-align: center; color: white; margin: 16px 16px 20px;
}
.invite-hero h2 { font-size:20px; font-weight:900; margin-bottom:4px; }
.invite-hero p { font-size:14px; opacity:0.8; }
.invite-method-btn {
    display:flex; align-items:center; gap:14px; padding:16px; background:white; border-radius:12px;
    border:2px solid var(--border); cursor:pointer; transition:all 0.2s; text-align:left; margin:0 16px 10px;
    text-decoration:none; color:var(--text);
}
.invite-method-btn:hover { border-color:var(--primary); background:var(--primary-light); }
.invite-method-btn .method-icon {
    width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
.invite-method-btn .method-info h3 { font-size:15px; font-weight:700; color:var(--text); }
.invite-method-btn .method-info p { font-size:12px; color:var(--text-secondary); margin-top:1px; }
.qr-box { background:white; border-radius:var(--radius); padding:24px; text-align:center; margin:0 16px; box-shadow:var(--shadow); }
.invite-code-box { background:var(--primary-light); border-radius:12px; padding:14px; text-align:center; margin:16px 16px 0; }
.invite-code-box .code { font-size:22px; font-weight:900; color:var(--primary); letter-spacing:3px; font-family:monospace; }

/* ===== 회원가입 ===== */
.signup-wrap { padding: 20px 16px 100px; }
.signup-step { display:flex; gap:6px; margin-bottom:24px; }
.signup-step .step { flex:1; height:4px; background:var(--border); border-radius:2px; }
.signup-step .step.active { background: var(--primary); }
.child-box { background:var(--primary-light); border-radius:12px; padding:14px; margin-bottom:10px; }
.nickname-preview {
    background: linear-gradient(135deg, var(--primary-light), #F0FFF4);
    border-radius: 12px; padding: 16px; text-align: center; margin: 16px 0; border: 2px solid var(--primary);
}
.nickname-preview .preview-name { font-size: 20px; font-weight: 800; color: var(--primary); }
.waiting-wrap { padding:60px 24px; text-align:center; }
.waiting-icon { font-size:64px; margin-bottom:16px; }

/* ===== 빈 상태 ===== */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-light); }
.empty-state .empty-icon { font-size:48px; margin-bottom:12px; }