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

/* ===================================================================
   1. 전역 설정 및 변수
   =================================================================== */

:root {
    --primary-color: #005a9c;
    /* 주 색상 */
    --secondary-color: #ff7f00;
    /* 보조 색상 (버튼 등) */
    --background-color: #f4f7f6;
    --text-color: #333;
    --white-color: #fff;
    --border-radius: 8px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* box-sizing 초기화로 예측 가능한 레이아웃 설정 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 기본 스타일 초기화 및 설정 */
body {
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

/* ===================================================================
   2. 재사용 컴포넌트 (헤더, 푸터, 버튼 등)
   =================================================================== */

/* 헤더 스타일 */
.header {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 20px;
    text-align: center;
    border-radius: var(--border-radius);
    margin-bottom: 40px;
}

.header a {
    text-decoration: none;
    color: var(--white-color);
}

.header h1 {
    margin: 0;
    font-size: 3em;
}

.header p {
    font-size: 1.2em;
    opacity: 0.9;
    margin-top: 0.5em;
}

/* 메인 컨텐츠 및 섹션 스타일 */
.header-content {
    display: flex;
    /* Flexbox 레이아웃 적용 */
    justify-content: space-between;
    /* 요소들을 양쪽 끝으로 정렬 */
    align-items: center;
    /* 세로 중앙 정렬 */
    max-width: 1200px;
    /* 헤더 내용의 최대 너비 설정 */
    margin: 0 auto;
    /* 헤더 내용을 중앙에 배치 */
    gap: 20px; /* 요소들 사이의 간격 */
}

.header-brand {
    text-decoration: none;
    color: inherit;
    /* 부모 요소의 색상(흰색)을 상속 */
}

.header-brand h1 {
    margin: 0;
    font-size: 2em;
    /* 폰트 크기 약간 조정 */
}

.header-brand p {
    margin: 5px 0 0 0;
    font-size: 0.9em;
    opacity: 0.8;
}


.user-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}
.user-nav a { /* 로그인/회원가입 버튼 등에 적용 */
    color: var(--white-color);
    text-decoration: none;
    font-weight: bold;
}

.user-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    /* 버튼들 사이의 간격 */
}

.user-nav a {
    color: var(--white-color);
    text-decoration: none;
    font-weight: bold;
    padding: 8px 12px;
    border: 1px solid transparent;
    /* 기본 테두리 투명 */
    border-radius: 5px;
    transition: all 0.2s ease;
}

.user-nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.welcome-msg {
    font-size: 0.9em;
    margin-right: 10px;
}

.section {
    margin-bottom: 40px;
    background-color: var(--white-color);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.section h2 {
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.8em;
    color: var(--primary-color);
}

/* 섹션 헤더 스타일 (제목과 버튼을 양쪽으로 정렬) */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    /* 섹션 제목의 기본 하단 여백과 동일하게 설정 */
}

/* .section-header 안의 h2 태그는 더 이상 하단 여백이 필요 없습니다. */
.section-header h2 {
    margin-bottom: 0;
}

/* .section-header 안의 버튼은 더 이상 인라인으로 margin을 줄 필요가 없습니다. */
.section-header .button-primary {
    margin: 0;
}

/* 버튼 스타일 */
.cta-buttons {
    text-align: center;
    margin-top: 20px;
}

.cta-buttons a,
.button-primary {
    /* 공통 버튼 스타일 */
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--white-color);
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.1em;
    margin: 0 10px;
    transition: all 0.2s ease-in-out;
    border: none;
    cursor: pointer;
}

.cta-buttons a:hover,
.button-primary:hover {
    background-color: #e67300;
    transform: translateY(-2px);
    /* 살짝 위로 이동하는 효과 */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* 푸터 스타일 */
.footer {
    text-align: center;
    padding: 40px 20px 20px 20px;
    color: #777;
    border-top: 1px solid #ddd;
    margin-top: 40px;
}

/* ===================================================================
   3. 폼 및 알림 메시지 스타일
   =================================================================== */

/* 공통 폼 스타일 */
.form-styled {
    max-width: 500px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="date"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: inherit; /* body의 폰트를 그대로 사용하도록 설정 */
    color: inherit; /* body의 글자색을 그대로 사용하도록 설정 */
    background-color: var(--white-color);
    min-height: 48px; /* 다른 input들과 높이를 맞춤 */
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(0, 90, 156, 0.3);
}

/* 알림 메시지 박스 스타일 */
.alert-box {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
}

.alert-box.error-box {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-box.success-box {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.dashboard-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.menu-item {
    display: block;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.2s ease-in-out;
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
    border-color: var(--primary-color);
}

.menu-item h4 {
    margin: 0 0 10px 0;
    color: var(--primary-color);
    font-size: 1.2em;
}

.menu-item p {
    margin: 0;
    font-size: 0.9em;
}

.menu-item.disabled {
    background-color: #e9ecef;
    color: #6c757d;
    pointer-events: none;
    /* 클릭 안되게 설정 */
}

.menu-item.disabled h4 {
    color: #6c757d;
}

/* ===================================================================
   서브 네비게이션 스타일 (관리자/직원용)
   =================================================================== */

.sub-nav {
    display: flex;
    /* 메뉴 아이템들을 가로로 나열 */
    gap: 10px;
    /* 메뉴 아이템 사이의 간격 */
    border-bottom: 2px solid #e0e0e0;
    /* 메뉴 하단의 구분선 */
    margin-bottom: 30px;
    /* 메뉴와 아래 컨텐츠 사이의 간격 */
    padding-bottom: 10px;
}

.sub-nav a {
    padding: 10px 20px;
    text-decoration: none;
    color: #555;
    /* 기본 링크 색상 */
    font-weight: bold;
    border-radius: 8px 8px 0 0;
    /* 탭 모양처럼 위쪽 모서리만 둥글게 */
    transition: all 0.2s ease;
}

/* 마우스를 올렸을 때의 스타일 */
.sub-nav a:hover {
    background-color: #e9ecef;
    color: var(--primary-color);
}

/* 현재 활성화된 메뉴의 스타일 */
.sub-nav a.active {
    background-color: var(--primary-color);
    color: var(--white-color);
}

/* 관리자/직원용 관리 페이지 버튼 스타일 */
.user-nav a.button-manage {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.user-nav a.button-manage:hover {
    background-color: var(--white-color);
    color: var(--primary-color);
}

/* 데이터 테이블 스타일 */
.data-table {
    width: 100%;
    border-collapse: collapse;
    /* 테이블 테두리 한 줄로 합치기 */
    margin-top: 20px;
}

.data-table th,
.data-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.data-table th {
    background-color: #f8f9fa;
    font-weight: bold;
}

/* 데이터 테이블의 특정 행을 강조하는 스타일 */
.data-table tbody tr.active-row {
    background-color: #e6f7ff;
    /* 연한 하늘색 배경 */
    font-weight: bold;
}

.data-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
    /* 짝수 행에 배경색 적용 */
}

.data-table tbody tr:hover {
    background-color: #e9ecef;
    /* 마우스 올렸을 때 배경색 변경 */
}

.data-table td a {
    color: var(--primary-color);
    text-decoration: none;
    margin-right: 10px;
}

.data-table td a:hover {
    text-decoration: underline;
}

.data-table td a.link-danger {
    color: #dc3545;
    /* 삭제 링크 등 위험한 작업에 대한 색상 */
}

/* 세로형 데이터 테이블 스타일 (key-value 형태에 적합) */
.data-table-vertical {
    width: 100%;
    border-top: 2px solid var(--primary-color);
    border-bottom: 1px solid #ddd;
}

.data-table-vertical th,
.data-table-vertical td {
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.data-table-vertical th {
    background-color: #f8f9fa;
    width: 30%;
    font-weight: bold;
    text-align: left;
}

/* 테이블의 특정 행을 강조하는 스타일 */
.table-highlight-row th,
.table-highlight-row td {
    font-size: 1.2em;
}

.table-highlight-row td {
    font-weight: bold;
    color: var(--primary-color);
}

/* 중앙 정렬된 폼 컨테이너 스타일 */
.form-centered {
    text-align: center;
    margin-top: 30px;
}

/* 기존 버튼보다 큰 버튼을 위한 보조 클래스 */
.button-large {
    padding: 15px 40px;
    font-size: 1.2em;
}

/* 테이블 내 액션 링크들을 위한 스타일 */
.action-links form {
    display: inline-block;
    /* 폼들을 가로로 나란히 배치 */
    margin-right: 10px;
}

.button-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
}

.button-link:hover {
    color: #333;
}

.button-link.link-danger {
    color: #dc3545;
}

.button-link.link-success {
    color: #28a745;
}

/* 상태 표시 뱃지 스타일 */
.status-badge {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
}

.status-badge.status-active {
    background-color: #28a745;
}

.status-badge.status-suspended {
    background-color: #6c757d;
}

.status-badge.status-registered {
    background-color: var(--primary-color); /* 회원: 파란색 배경 */
}
.status-badge.status-transient {
    background-color: #6c757d; /* 방문: 회색 배경 */
}

.status-badge.status-unverified {
    background-color: #ffc107;
    color: #333;
}

/* 드롭다운 메뉴 스타일 */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 1em;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    padding: 8px 12px;
}

.dropdown-menu {
    display: none;
    /* 평소에는 숨김 */
    position: absolute;
    right: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
    padding: 5px 0;
}

.dropdown-menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-menu a:hover {
    background-color: #f1f1f1;
}

.dropdown-divider {
    height: 1px;
    margin: 5px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

.show {
    display: block;
}

/* JS로 추가될 클래스 */

/* 프로필 등 설정 페이지 아이템 스타일 */
.setting-group {
    margin-top: 30px;
}

.setting-group h4 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 1.2em;
    color: #555;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5px;
    border-bottom: 1px solid #f2f2f2;
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-item-info strong {
    font-size: 1em;
    color: var(--text-color);
}

.setting-item-info p {
    margin: 5px 0 0 0;
    color: #777;
    font-size: 0.9em;
}

.setting-item-action .button-secondary {
    text-decoration: none;
    padding: 8px 16px;
    font-size: 0.9em;
}

/* 통계 카드 스타일 */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.card {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    border: 1px solid #dee2e6;
    text-align: center;
}

.card h4 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    color: #6c757d;
}

.card p {
    margin: 0;
    font-size: 1.8em;
    font-weight: bold;
    color: var(--primary-color);
}

/* 막대 차트 스타일 */
.bar-chart-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 250px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: var(--border-radius);
    background-color: #fcfcfc;
}

.bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 10%;
    height: 100%;
    position: relative;
}

.bar {
    width: 40px;
    background-color: var(--primary-color);
    border-radius: 5px 5px 0 0;
    transition: all 0.3s ease;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
}

.bar:hover {
    background-color: var(--secondary-color);
}

.bar .tooltip {
    display: none;
    position: absolute;
    top: -30px;
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9em;
    white-space: nowrap;
}

.bar:hover .tooltip {
    display: block;
}

.bar-item .label {
    margin-top: 220px;
    /* 차트 높이에 맞게 조정 */
    font-weight: bold;
    font-size: 0.9em;
}

/* 검색 폼 스타일 */
.search-form {
    display: flex;
    gap: 10px;
    /* 입력창과 버튼 사이의 간격 */
    align-items: flex-end;
    /* 요소들의 하단 라인을 정렬 */
    max-width: 500px;
    /* 폼의 최대 너비 */
    margin-bottom: 30px;
}

.search-form .form-group {
    margin-bottom: 0;
    /* 그룹간 기본 여백 제거 */
    flex-grow: 1;
    /* 입력창 그룹이 남은 공간을 모두 차지하도록 설정 */
}

/* 스크린 리더 전용 클래스 (접근성 향상) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 작은 크기의 버튼을 위한 보조 클래스 */
.button-sm {
    padding: 5px 12px;
    font-size: 0.9em;
}

/* 페이지네이션 스타일 */
.pagination {
    text-align: center;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 5px;
}
.pagination a {
    color: var(--primary-color);
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s ease;
}
.pagination a:hover {
    background-color: #f1f1f1;
}
.pagination a.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    pointer-events: none; /* 현재 페이지는 클릭 안되게 */
}

/* 빠른 입차 버튼 그리드 컨테이너 */
.quick-checkin-grid {
    display: grid;
    /* 화면에 맞춰 150px 이상의 크기를 가진 칸으로 자동 정렬 */
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 15px; /* 버튼 사이의 간격 */
    margin-top: 20px;
}

/* 개별 입차 버튼(폼) */
.checkin-button-form {
    margin: 0;
}

.checkin-button {
    display: flex;
    flex-direction: column; /* 내용을 세로로 쌓음 */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70px;
    padding: 15px 10px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    background-color: #f8f9fa;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
}

.checkin-button:hover {
    border-color: var(--primary-color);
    background-color: #eaf5ff;
    transform: translateY(-3px);
    box-shadow: var(--box-shadow);
}

/* 버튼 안의 차량 번호 */
.checkin-button .plate-number,
.checkin-button .car-model {
    font-size: 1.1em; /* 폰트 크기 통일 */
    display: block;
    line-height: 1.3;
}
.checkin-button .plate-number {
    font-weight: bold;
    color: var(--primary-color);
}
/* 버튼 안의 차종 */
.checkin-button .car-model {
    font-weight: normal; /* 차종은 일반 굵기로 변경 */
    color: #555; /* 차량 번호보다 약간 연한 색상 */
}


/* 게시판 글작성 폼 */
.post-form {
    margin: 0 auto;
}

/* 게시글 상세 보기 스타일 */
.post-view .post-header {
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.post-view h2 {
    margin: 0 0 15px 0;
    font-size: 2em;
}
.post-meta {
    font-size: 0.9em;
    color: #777;
}
.post-meta span {
    margin-right: 15px;
}
.post-content {
    min-height: 200px;
    line-height: 1.8;
}
.post-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #eee;
}

/* 답글 섹션 스타일 */
.reply-section {
    margin-top: 40px;
    border-top: 2px solid var(--primary-color);
    padding-top: 20px;
}
.reply-item {
    padding: 15px;
    border-bottom: 1px solid #f1f1f1;
}
.reply-item:last-child {
    border-bottom: none;
}
.reply-meta {
    margin-bottom: 10px;
    font-size: 0.9em;
}
.reply-meta .reply-date {
    margin-left: 10px;
    color: #777;
}
.reply-content {
    line-height: 1.7;
}
/* 답글 아이템 들여쓰기 스타일 */
.reply-item.depth-1 { margin-left: 30px; border-left: 2px solid #f0f0f0; padding-left: 15px; }
.reply-item.depth-2 { margin-left: 60px; border-left: 2px solid #f0f0f0; padding-left: 15px; }
.reply-item.depth-3 { margin-left: 90px; border-left: 2px solid #f0f0f0; padding-left: 15px; }
/* 필요에 따라 .depth-N 클래스를 더 추가할 수 있습니다. */

/* ===================================================================
   버튼 시스템 (Button System)
   =================================================================== */

/* 기본 버튼 스타일 */
.button {
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.95em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap; /* 버튼 텍스트가 줄바꿈되지 않도록 */
}

/* Primary 버튼 (가장 중요한 행동, 예: 제출) */
.button.button-primary {
    background-color: var(--secondary-color); /* 주황색 */
    border-color: var(--secondary-color);
    color: var(--white-color);
}
.button.button-primary:hover {
    background-color: #e67300;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Secondary 버튼 (일반적인 행동, 예: 목록, 취소) */
.button.button-secondary {
    background-color: #6c757d; /* 회색 계열 */
    border-color: #6c757d;
    color: var(--white-color);
}
.button.button-secondary:hover {
    background-color: #5a6268;
}

/* Danger 버튼 (파괴적인 행동, 예: 삭제) */
.button.button-danger {
    background-color: #dc3545; /* 붉은색 */
    border-color: #dc3545;
    color: var(--white-color);
}
.button.button-danger:hover {
    background-color: #c82333;
}
/* 게시글 액션 버튼 컨테이너 (Flexbox 적용)vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv */
.post-actions {
    display: flex;
    justify-content: space-between; /* 양쪽 끝으로 정렬 */
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #eee;
}

.post-actions .actions-group {
    display: flex;
    gap: 10px; /* 버튼 사이 간격 */
}


/* 답글 액션 링크 컨테이너 */
.reply-actions {
    text-align: right;
    font-size: 0.85em;
    margin-top: 10px;
}
.reply-actions .button-edit,
.reply-actions .button-danger{
    color: var(--white-color);
    text-decoration: none;
    margin-left: 10px;
    padding: 5px;
}
.reply-actions a:hover {
    text-decoration: underline;
}
.reply-actions a.link-danger {
    color: #dc3545;
}

.reply-actions .button-edit {
    background-color: #6c757d;
    border-color: #6c757d;
}

/* 위험한 동작을 위한 버튼/링크 스타일 */
.button-danger {
    background-color: #dc3545; /* 붉은색 배경 */
    color: white;
}
.button-danger:hover {
    background-color: #c82333;
}
.link-danger { /* 링크 형태의 위험한 동작 */
    color: #dc3545;
    font-weight: bold;
}


/* QR코드 섹션 스타일 */
.qr-code-section {
    text-align: center; /* 내용물 전체 중앙 정렬 */
    background-color: var(--white-color);
}

.qr-code-section h2 {
    margin-bottom: 10px;
}

.qr-code-section p {
    margin-bottom: 25px;
    color: #555;
}

.qr-code-section img {
    border: 5px solid white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 10px;
}



/* ===================================================================
   4. 반응형 스타일
   =================================================================== */

@media (max-width: 768px) {
    .container {
        padding: 15px;
    }

    .header {
        padding: 30px 15px;
    }

    .header h1 {
        font-size: 2.2em;
    }

    .header p {
        font-size: 1.1em;
    }

    /* 헤더를 위한 반응형 스타일 */
    .header-content {
        flex-direction: column;
        /* 세로로 쌓이도록 변경 */
        gap: 20px;
        /* 위아래 간격 */
    }

    .header-brand {
        text-align: center;
        /* 모바일에서 로고/슬로건 중앙 정렬 */
    }

    .header-brand h1 {
        font-size: 1.8em;
    }

    .section h2 {
        font-size: 1.5em;
    }

    .cta-buttons a,
    .button-primary {
        display: block;
        width: 100%;
        margin: 10px 0;
    }

    .search-form {
        flex-direction: column;
        /* 화면이 좁아지면 세로로 쌓이도록 변경 */
        align-items: stretch;
        /* 요소들이 꽉 차도록 정렬 변경 */
        max-width: none;
        /* 최대 너비 제한 해제 */
    }

    .search-form .form-group {
        width: 100%;
    }

    .search-form .button-primary {
        width: 100%;
    }

}