/* frontend/style.css */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    /* 다크 모드 (기본) */
    --bg-color: #202225;
    --text-color: #e3e3e3;
    --sub-text-color: #b9bbbe;
    --card-bg-color: #2f3136;
    --border-color: #40444b;
    --input-bg-color: #2a2c30;
    --button-bg-color: #5865f2;
    --button-hover-bg-color: #4752c4;
    --highlight-color: #5865f2;
    --header-text-color: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --meal-border-style: dashed;
}

/* 라이트 모드 (화이트 모드) */
body.light-mode {
    --bg-color: #f2f3f5;
    --text-color: #2e3338;
    --sub-text-color: #5e6772;
    --card-bg-color: #ffffff;
    --border-color: #dce0e5;
    --input-bg-color: #f8f9fa;
    --button-bg-color: #5865f2;
    --button-hover-bg-color: #4752c4;
    --highlight-color: #5865f2;
    --header-text-color: #2e3338;
    --shadow-color: rgba(0, 0, 0, 0.05);
    --meal-border-style: solid;
}

body {
    font-family: 'Pretendard', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: 900px; margin: auto; position: relative; }

/* 헤더 및 모드 토글 버튼 */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

h1 { 
    margin: 0; 
    color: var(--header-text-color); 
    font-weight: 700; 
    text-align: center;
    flex-grow: 1;
}

.theme-toggle {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 1.2rem;
    padding: 8px 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 5px var(--shadow-color);
}
.theme-toggle:hover { transform: scale(1.1); }

h2, h3 { border: none; padding-bottom: 10px; color: var(--text-color); font-weight: 600; }
h2 { margin: 0; font-size: 1.2em; }

/* 입력 요소 공통 */
input, select, button, textarea { 
    padding: 12px; 
    margin: 5px; 
    border-radius: 5px; 
    border: 1px solid var(--border-color); 
    background-color: var(--input-bg-color); 
    color: var(--text-color); 
    font-size: 15px; 
    font-family: 'Pretendard', sans-serif; 
    transition: border-color 0.2s, background-color 0.2s;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--highlight-color); border-color: transparent; }

button { background-color: var(--button-bg-color); color: #fff; cursor: pointer; font-weight: 500; border: none; }
button:hover { background-color: var(--button-hover-bg-color); }

.search-area, .info-box { background-color: var(--card-bg-color); padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 8px var(--shadow-color); transition: background-color 0.3s; }
.search-box { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
#schoolNameInput, #selectedSchoolName { flex-grow: 1; }
#selectedSchoolName { background-color: var(--input-bg-color); cursor: not-allowed; opacity: 0.7; }

#schoolResults { margin-top: 10px; max-height: 200px; overflow-y: auto; }
.school-item { padding: 10px; cursor: pointer; border-radius: 4px; transition: background-color 0.2s; color: var(--text-color); }
.school-item:hover { background-color: var(--border-color); }

.info-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.info-group { display: flex; align-items: center; gap: 5px; }
#grade, #classNum { width: 50px; text-align: center; }
.info-group > input { margin: 0; }

.content { display: flex; gap: 20px; flex-direction: column; }
@media (min-width: 768px) { .content { flex-direction: row; } }
#timetable, #meal { flex: 1; background-color: var(--card-bg-color); padding: 20px; border-radius: 8px; min-width: 0; box-shadow: 0 2px 8px var(--shadow-color); transition: background-color 0.3s; }

.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
#toggleViewBtn { padding: 6px 12px; font-size: 13px; background-color: var(--border-color); color: var(--text-color); margin: 0; }

#countdown-area { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; margin-bottom: 15px; background-color: var(--input-bg-color); border-radius: 6px; font-size: 0.9em; border: 1px solid var(--border-color); }
#countdown-label { color: var(--sub-text-color); }
#countdown-time { font-weight: bold; font-family: 'Courier New', Courier, monospace; color: var(--highlight-color); font-size: 1.2em; }

#timetable-list { list-style-type: none; padding: 0; margin: 0; }
#timetable-list li { display: flex; justify-content: space-between; align-items: center; background-color: var(--input-bg-color); padding: 12px 15px; margin-bottom: 8px; border-radius: 4px; font-size: 0.95em; border: 1px solid transparent; }
#timetable-list .time { color: var(--sub-text-color); font-size: 0.9em; }
#timetable-list li.current { border-left: 4px solid var(--highlight-color); background-color: var(--input-bg-color); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-color); }

.timetable-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 5px; }
#timetable-grid { display: grid; grid-template-columns: 0.6fr repeat(5, 1fr); gap: 6px; text-align: center; min-width: 500px; }
.grid-header, .grid-cell, .period-label { padding: 12px 5px; border-radius: 4px; background-color: var(--input-bg-color); display: flex; align-items: center; justify-content: center; min-height: 30px; word-break: keep-all; font-size: 0.95em; color: var(--text-color); }
.grid-header { background-color: var(--border-color); font-weight: 600; color: var(--text-color); }
.period-label { font-weight: 500; background-color: transparent; color: var(--sub-text-color); }
.grid-header.today, .grid-cell.today { background-color: var(--input-bg-color); border: 2px solid var(--highlight-color); box-sizing: border-box;}
.grid-cell.current { background-color: var(--highlight-color); color: #fff; font-weight: 600; }
.fallback-text { grid-column: 1 / -1; text-align: center; padding: 20px; color: var(--sub-text-color); }

/* 급식 스타일 수정 (왼쪽 정렬 추가) */
#meal { text-align: center; }
#meal-info {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--input-bg-color);
    border-radius: 5px;
    gap: 0; 
    padding: 15px;
}
#meal-info li {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text-color);
    width: 100%;
    /* 수정된 부분: 왼쪽 정렬 및 패딩 추가 */
    text-align: left;
    padding: 8px 10px;
    box-sizing: border-box;
    border-bottom: 1px var(--meal-border-style) var(--border-color);
}
#meal-info li:last-child { border-bottom: none; }
.meal-empty { color: var(--sub-text-color); font-size: 1em; border: none !important; text-align: center !important; }

.hidden { display: none !important; }
.loading-spinner { border: 4px solid var(--border-color); border-top: 4px solid var(--highlight-color); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.retry-container { text-align: center; margin-top: 20px; }
.retry-container p { margin-bottom: 10px; color: var(--sub-text-color); }
.retry-container button { width: auto; padding: 8px 16px; background-color: var(--border-color); color: var(--text-color); }

#submission-container { margin-top: 30px; }
#submission-container summary { cursor: pointer; background-color: var(--card-bg-color); padding: 15px; border-radius: 8px; font-weight: bold; list-style: inside; color: var(--text-color); box-shadow: 0 2px 8px var(--shadow-color); transition: background-color 0.3s; }
#submission-container[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#submission-area { margin-top: 0; background-color: var(--card-bg-color); padding: 20px; border-top: 1px solid var(--border-color); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0 4px 8px var(--shadow-color); }
.submission-box p { line-height: 1.6; color: var(--sub-text-color); text-align: center; margin-bottom: 25px; }
#timetable-submission, #meal-submission { margin-top: 20px; }
.input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 15px; }
#meal-textarea { box-sizing: border-box; width: 100%; padding: 10px; margin: 5px 0; border-radius: 5px; border: 1px solid var(--border-color); background-color: var(--input-bg-color); color: var(--text-color); font-size: 16px; resize: vertical; }
#submission-area button { width: 100%; margin: 5px 0; }
.tab-container { border: 1px solid var(--border-color); border-radius: 5px; margin-bottom: 15px; }
.tabs { display: flex; background-color: var(--input-bg-color); border-bottom: 1px solid var(--border-color); }
.tab-button { background-color: transparent; border: none; padding: 12px 18px; cursor: pointer; color: var(--sub-text-color); flex-grow: 1; border-radius: 0; margin: 0; transition: color 0.2s, background-color 0.2s; }
.tab-button.active { background-color: var(--highlight-color); color: #fff; }
.tab-content { padding: 15px; display: none; }
.add-period { width: auto; font-size: 14px; padding: 8px 12px; background-color: var(--border-color); color: var(--text-color); }

/* Admin Style adjustments for themes */
.login-form, .submission-item { background-color: var(--card-bg-color); color: var(--text-color); box-shadow: 0 2px 8px var(--shadow-color); }
.submission-item div > ul > li { background-color: var(--input-bg-color); color: var(--text-color); border: 1px solid var(--border-color); }
.submission-item pre { background-color: var(--input-bg-color); color: var(--text-color); border: 1px solid var(--border-color); }
.link-item { background-color: var(--input-bg-color); border: 1px solid var(--border-color); }
.period-input-container { background-color: var(--input-bg-color); border: 1px solid var(--border-color); }