/* ===============================================
   아이콘 커스텀 스타일
   framework/icons.html에 정의된 아이콘 프레임워크 사용
   =============================================== */

/* 닫기 버튼 스타일 */
.button-close {
    opacity: 1 !important;
    z-index: 100;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--palette-white);
    border-radius: 50%;
    transition: all var(--transition-base);
    border: none !important;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    backdrop-filter: none;
    filter: none !important;
    position: absolute !important;
    top: var(--spacing-300) !important;
    right: var(--spacing-300) !important;
    margin: 0 !important;
    visibility: visible !important;
    box-shadow: var(--shadow-200);
    cursor: pointer !important;
}

.button-close:hover {
    background-color: var(--palette-gray-200);
    transform: scale(1.05);
    opacity: 1 !important;
    box-shadow: var(--shadow-300);
}

.button-close-white {
    filter: none !important;
    background-color: var(--palette-white) !important;
    border: none !important;
}

/* 이미지 모달 닫기 버튼 - Bootstrap Icons 사용 */
[data-bs-theme="dark"] .button-close,
[data-bs-theme="dark"] #imageModal .button-close {
    background-color: var(--palette-white) !important;
    border: none !important;
    filter: none !important;
}

[data-bs-theme="dark"] .button-close .bi,
[data-bs-theme="dark"] .button-close .bi-x-lg,
[data-bs-theme="dark"] #imageModal .button-close .bi,
[data-bs-theme="dark"] #imageModal .button-close .bi-x-lg {
    color: var(--bs-dark) !important;
}

[data-bs-theme="dark"] .button-close:hover,
[data-bs-theme="dark"] #imageModal .button-close:hover {
    background-color: var(--palette-gray-200) !important;
    border: none !important;
}

[data-bs-theme="dark"] .button-close:hover .bi,
[data-bs-theme="dark"] .button-close:hover .bi-x-lg,
[data-bs-theme="dark"] #imageModal .button-close:hover .bi,
[data-bs-theme="dark"] #imageModal .button-close:hover .bi-x-lg {
    color: var(--bs-dark) !important;
}

[data-bs-theme="dark"] .button-close-white {
    filter: none !important;
    background-color: var(--palette-white) !important;
    border: none !important;
}

[data-bs-theme="dark"] .button-close-white .bi,
[data-bs-theme="dark"] .button-close-white .bi-x-lg {
    color: var(--bs-dark) !important;
}

/* 반응형 개선 */
@media (max-width: 768px) {
    .button-close,
    #imageModal .button-close {
        width: 2.25rem;
        height: 2.25rem;
        margin: var(--spacing-300) !important;
    }
}

/* ===============================================
   커스텀 버튼 스타일
   =============================================== */

.button {
    display: inline-block;
    padding: var(--spacing-200) var(--spacing-300);
    font-size: var(--size-font-200);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-base);
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--border-color);
    border-radius: var(--size-radius-200);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
    user-select: none;
}

.button:hover {
    background-color: var(--bg-secondary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-200);
    text-decoration: none;
}

.button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-100);
}

.button:disabled,
.button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* 버튼 색상 변형 */
.button-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.button-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

.button-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.button-secondary:hover {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: var(--color-white);
}

.button-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

.button-success:hover {
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
    color: var(--color-white);
}

.button-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-white);
}

.button-danger:hover {
    background-color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
    color: var(--color-white);
}

.button-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-dark);
}

.button-warning:hover {
    background-color: var(--color-warning-light);
    border-color: var(--color-warning-light);
    color: var(--color-dark);
}

.button-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-dark);
}

.button-info:hover {
    background-color: var(--color-info-light);
    border-color: var(--color-info-light);
    color: var(--color-dark);
}

/* 아웃라인 버튼 */
.button-outline {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-primary);
}

.button-outline-primary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.button-outline-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.button-outline-secondary {
    background-color: transparent;
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.button-outline-secondary:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.button-outline-success {
    background-color: transparent;
    border-color: var(--color-success);
    color: var(--color-success);
}

.button-outline-success:hover {
    background-color: var(--color-success);
    color: var(--color-white);
}

.button-outline-danger {
    background-color: transparent;
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.button-outline-danger:hover {
    background-color: var(--color-danger);
    color: var(--color-white);
}

.button-outline-warning {
    background-color: transparent;
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.button-outline-warning:hover {
    background-color: var(--color-warning);
    color: var(--color-dark);
}

.button-outline-info {
    background-color: transparent;
    border-color: var(--color-info);
    color: var(--color-info);
}

.button-outline-info:hover {
    background-color: var(--color-info);
    color: var(--color-dark);
}

/* 버튼 크기 */
.button-small {
    padding: var(--spacing-100) var(--spacing-200);
    font-size: var(--size-font-100);
}

.button-large {
    padding: var(--spacing-300) var(--spacing-400);
    font-size: var(--size-font-300);
}

.button-block {
    display: block;
    width: 100%;
}

/* ===============================================
   커스텀 폼 컨트롤 스타일
   =============================================== */

.form-control {
    display: block;
    width: 100%;
    padding: var(--spacing-200) var(--spacing-300);
    font-size: var(--size-font-300);
    font-family: var(--font-family-base);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--size-radius-200);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--bg-secondary);
    opacity: 0.6;
    cursor: not-allowed;
}

.form-control-small {
    padding: var(--spacing-100) var(--spacing-200);
    font-size: var(--size-font-200);
    border-radius: var(--size-radius-100);
}

.form-control-large {
    padding: var(--spacing-300) var(--spacing-400);
    font-size: var(--size-font-400);
    border-radius: var(--size-radius-300);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-100);
    font-weight: var(--font-weight-medium);
    font-size: var(--size-font-200);
    color: var(--text-primary);
}

.form-select {
    display: block;
    width: 100%;
    padding: var(--spacing-200) var(--spacing-300);
    font-size: var(--size-font-300);
    font-family: var(--font-family-base);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--size-radius-200);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
}

.form-select:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
}

/* ===============================================
   커스텀 배지 스타일
   =============================================== */

.badge {
    display: inline-block;
    padding: var(--spacing-100) var(--spacing-200);
    font-size: var(--size-font-100);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--size-radius-100);
}

.badge-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.badge-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.badge-success {
    background-color: var(--color-success);
    color: var(--color-white);
}

.badge-danger {
    background-color: var(--color-danger);
    color: var(--color-white);
}

.badge-warning {
    background-color: var(--color-warning);
    color: var(--color-dark);
}

.badge-info {
    background-color: var(--color-info);
    color: var(--color-dark);
}

/* ===============================================
   커스텀 알림 스타일
   =============================================== */

.alert {
    padding: var(--spacing-300);
    margin-bottom: var(--spacing-300);
    border: none;
    border-radius: var(--size-radius-400);
    box-shadow: var(--shadow-100);
}

.alert-primary {
    background-color: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary-dark);
    border-left: 4px solid var(--color-primary);
}

.alert-secondary {
    background-color: rgba(var(--color-secondary-rgb), 0.1);
    color: var(--color-secondary);
    border-left: 4px solid var(--color-secondary);
}

.alert-success {
    background-color: rgba(var(--color-success-rgb), 0.1);
    color: var(--color-success);
    border-left: 4px solid var(--color-success);
}

.alert-danger {
    background-color: rgba(var(--color-danger-rgb), 0.1);
    color: var(--color-danger);
    border-left: 4px solid var(--color-danger);
}

.alert-warning {
    background-color: rgba(var(--color-warning-rgb), 0.1);
    color: var(--palette-gray-800);
    border-left: 4px solid var(--color-warning);
}

.alert-info {
    background-color: rgba(var(--color-info-rgb), 0.1);
    color: var(--color-info);
    border-left: 4px solid var(--color-info);
}

/* ===============================================
   커스텀 다크모드 지원
   =============================================== */

[data-theme="dark"] .button,
[data-bs-theme="dark"] .button {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .button-primary,
[data-bs-theme="dark"] .button-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

[data-theme="dark"] .button-outline-primary,
[data-bs-theme="dark"] .button-outline-primary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
}

/* ===============================================
   관리자 컨트롤 스타일
   =============================================== */

/* 포스트 관리 컨트롤 */
.admin-post-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-200);
    padding: var(--spacing-300) 0;
}

.admin-post-controls .btn-group {
    margin-right: auto;
}

/* 댓글 관리 컨트롤 */
.comment-admin-controls {
    display: flex;
    gap: var(--spacing-200);
    flex-wrap: wrap;
    align-items: center;
}

.comment-admin-controls .btn {
    white-space: nowrap;
}

/* 고정 버튼 아이콘 스타일 */
#toggle-pin-btn i.bi-pin-fill {
    color: var(--color-danger);
}

/* ===============================================
   아이콘 스타일 시스템
   모든 아이콘은 Bootstrap Icons를 사용하며,
   여기서 일관된 스타일을 관리합니다.
   =============================================== */

/* 기본 아이콘 스타일 */
.icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 아이콘 크기 변형 */
.icon-xs {
    font-size: var(--size-font-100);
}

.icon-sm {
    font-size: var(--size-font-200);
}

.icon-md {
    font-size: var(--size-font-300);
}

.icon-lg {
    font-size: var(--size-font-400);
}

.icon-xl {
    font-size: var(--size-font-500);
}

.icon-2x {
    font-size: calc(var(--size-font-500) * 1.33);
}

/* 아이콘 색상 변형 */
.icon-primary {
    color: var(--bs-primary);
}

.icon-secondary {
    color: var(--bs-secondary);
}

.icon-success {
    color: var(--bs-success);
}

.icon-danger {
    color: var(--bs-danger);
}

.icon-warning {
    color: var(--bs-warning);
}

.icon-info {
    color: var(--bs-info);
}

.icon-light {
    color: var(--bs-light);
}

.icon-dark {
    color: var(--bs-dark);
}

/* 아이콘 간격 */
.icon-spacing {
    margin-right: var(--spacing-200);
}

.icon-spacing-sm {
    margin-right: var(--spacing-100);
}

.icon-spacing-lg {
    margin-right: var(--spacing-300);
}

/* 아이콘 정렬 */
.icon-align-top {
    vertical-align: top;
}

.icon-align-middle {
    vertical-align: middle;
}

.icon-align-bottom {
    vertical-align: bottom;
}

/* 다크모드 아이콘 색상 */
[data-bs-theme="dark"] .icon-primary {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .icon-secondary {
    color: var(--bs-secondary);
}

/* 다크모드 일반 아이콘 색상 조정 */
[data-bs-theme="dark"] .bi {
    color: inherit;
}

/* 다크모드에서 텍스트 muted 아이콘 조정 */
[data-bs-theme="dark"] .text-muted .bi,
[data-bs-theme="dark"] .bi.text-muted {
    color: var(--bs-secondary) !important;
}

/* 다크모드에서 텍스트 색상과 함께 사용되는 아이콘 */
[data-bs-theme="dark"] .bi-calendar3,
[data-bs-theme="dark"] .bi-tag,
[data-bs-theme="dark"] .bi-tag-fill {
    color: var(--bs-secondary);
}

/* 다크모드 닫기 버튼 아이콘 */
[data-bs-theme="dark"] .button-close .bi,
[data-bs-theme="dark"] .button-close .bi-x-lg {
    color: var(--bs-dark);
}

/* 다크모드 네비게이션 아이콘 */
[data-bs-theme="dark"] .navbar-light .bi,
[data-bs-theme="dark"] .navbar-dark .bi {
    color: inherit;
}

/* 다크모드 버튼 내 아이콘 */
[data-bs-theme="dark"] .btn .bi {
    color: inherit;
}

[data-bs-theme="dark"] .btn-outline-light .bi {
    color: rgba(255, 255, 255, 0.8);
}

[data-bs-theme="dark"] .btn-outline-light:hover .bi {
    color: #fff;
}

/* 다크모드 링크 내 아이콘 */
[data-bs-theme="dark"] a .bi {
    color: inherit;
}

/* 다크모드 배지 내 아이콘 */
[data-bs-theme="dark"] .badge .bi {
    color: inherit;
}

/* Featured image radio icon-only style */
.featured-radio {
    display: inline-flex;
    align-items: center;
}

.featured-image-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.featured-radio-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* 
 * components.css
 * Bootstrap 컴포넌트 확장 및 개선
 */

/* 네비게이션 개선 */
.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-brand,
.nav-link {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
}

.nav-link {
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.95rem;
}

.nav-link:hover {
    background-color: rgba(65, 105, 225, 0.05);
    border-radius: 0.25rem;
}

/* navbar-dark 스타일 */
.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.8);
}

.navbar-dark .nav-link:hover {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .nav-link.active {
    color: #fff;
    background-color: rgba(65, 105, 225, 0.3);
}

/* 버튼 개선 */
.btn {
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
    font-size: var(--size-font-200);
    padding: var(--spacing-sm) var(--spacing-300);
}

.btn-lg {
    font-size: var(--size-font-300);
    padding: var(--spacing-200) var(--spacing-300);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-200);
}

/* 카드 개선 */
.card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--size-radius-300);
    box-shadow: var(--shadow-100);
    transition: all var(--transition-base);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-300);
    transform: translateY(-2px);
}

.card-body {
    padding: var(--spacing-300);
}

.card-header {
    padding: var(--spacing-200) var(--spacing-300);
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    font-weight: var(--font-weight-semibold);
}

.card-footer {
    padding: var(--spacing-200) var(--spacing-300);
    background-color: transparent;
    border-top: 1px solid var(--border-color);
}

.card-header.bg-light {
    background-color: var(--bs-light) !important;
    border-bottom: 1px solid var(--bs-border-color);
}

.card-header h5 {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* 배지 개선 - 커스텀 배지 스타일 사용 */

/* 폼 개선 - 커스텀 폼 컨트롤 스타일 사용 */
.form-control-lg,
.form-select-lg {
    font-size: var(--size-font-400);
    padding: var(--spacing-300) var(--spacing-400);
    border-radius: var(--size-radius-300);
}

/* 제목 스타일 개선 */
.display-4,
.display-5,
.display-6 {
    line-height: 1.3;
    letter-spacing: -0.02em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

/* 테이블 개선 */
.table {
    border-radius: 0.5rem;
    overflow: hidden;
}

.table th {
    background-color: var(--bs-light);
    font-weight: 600;
    border-bottom: 2px solid var(--bs-border-color);
}

/* 알림 개선 - 커스텀 알림 스타일 사용 */

/* 드롭다운 개선 */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 0.75rem;
}

.dropdown-item {
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--bs-primary);
    color: white;
}

/* 모달 개선 */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

.modal-content {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-header {
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 1rem 1rem 0 0;
}

.modal-footer {
    border-top: 1px solid var(--bs-border-color);
    border-radius: 0 0 1rem 1rem;
}

.modal .btn:hover {
    transform: translateY(-1px);
}

.modal .btn-primary:hover {
    box-shadow: 0 4px 12px rgba(65, 105, 225, 0.3);
}

.modal .btn-secondary:hover {
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

/* 페이지네이션 개선 */
.pagination {
    margin-bottom: 0;
    gap: 0.25rem; /* Bootstrap 5+ gap 지원 */
}

.pagination .page-link {
    border-radius: 0.5rem;
    margin: 0 0.125rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    transition: all 0.2s ease;
}

/* Bootstrap 호환성을 위한 개별 간격 조정 */
.pagination .page-item {
    margin: 0 0.125rem;
}

.pagination .page-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.pagination .page-item:first-child .page-link {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.pagination .page-item:last-child .page-link {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* 로딩 스피너 개선 */
.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
}

/* 툴팁 개선 */
.tooltip {
    font-size: 0.875rem;
}

.tooltip-inner {
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}

/* 팝오버 개선 */
.popover {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.popover-header {
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0.75rem 0.75rem 0 0;
}

/* 진행률 바 개선 */
.progress {
    height: 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--bs-light);
}

.progress-bar {
    border-radius: 0.25rem;
    transition: width 0.3s ease;
}

/* 리스트 그룹 개선 */
.list-group-item {
    border: 1px solid var(--bs-border-color);
    transition: all 0.2s ease;
    background-color: transparent;
}

.list-group-item:hover {
    background-color: transparent;
    transform: translateX(4px);
}

.list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* 아코디언 개선 */
.accordion-item {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem !important;
    margin-bottom: 0.5rem;
}

.accordion-button {
    border-radius: 0.5rem !important;
    font-weight: 500;
}

.accordion-button:not(.collapsed) {
    background-color: var(--bs-primary);
    color: white;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(65, 105, 225, 0.25);
}

/* 오프캔버스 개선 */
.offcanvas {
    border-radius: 0 1rem 1rem 0;
}

.offcanvas-header {
    border-bottom: 1px solid var(--bs-border-color);
}

/* 토스트 개선 */
.toast {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast-header {
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0.75rem 0.75rem 0 0;
}

/* 캐러셀 개선 */
.carousel-item {
    transition: transform 0.6s ease-in-out;
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 100%, 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 네비게이션 탭 개선 */
.nav-tabs .nav-link {
    border: none;
    border-radius: 0.5rem 0.5rem 0 0;
    margin-right: 0.25rem;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    background-color: var(--bs-light);
}

.nav-tabs .nav-link.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

/* 네비게이션 필 개선 */
.nav-pills .nav-link {
    border-radius: 0.5rem;
    margin-right: 0.25rem;
    transition: all 0.2s ease;
}

.nav-pills .nav-link:hover {
    background-color: var(--bs-light);
}

.nav-pills .nav-link.active {
    background-color: var(--bs-primary);
}

/* 브레드크럼 개선 */
.breadcrumb {
    background-color: transparent;
    padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--bs-secondary);
}

.breadcrumb-item a {
    color: var(--bs-primary);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

/* 입력 그룹 개선 */
.input-group {
    border-radius: 0.5rem;
    overflow: hidden;
}

.input-group .form-control {
    border-radius: 0.5rem 0 0 0.5rem;
}

.input-group .btn {
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 0.5rem 1rem;
}

.input-group-lg {
    border-radius: 0.5rem;
    overflow: hidden;
}

.input-group-lg .form-control {
    border-radius: 0.5rem 0 0 0.5rem;
}

.input-group-lg .btn {
    border-radius: 0 0.5rem 0.5rem 0;
}

/* 마크다운 콘텐츠 이미지 스타일링 */
.markdown-content .image-container {
    margin: 1.5em 0;
    text-align: center;
}

.markdown-content .external-image {
    background: linear-gradient(135deg, var(--palette-gray-100) 0%, var(--palette-gray-200) 100%);
    border: 1px solid var(--palette-gray-300);
    border-radius: var(--size-radius-400);
    padding: var(--spacing-300);
    box-shadow: var(--shadow-100);
}

[data-bs-theme="dark"] .markdown-content .external-image {
    background: linear-gradient(135deg, var(--palette-gray-200) 0%, var(--palette-gray-400) 100%);
    border-color: var(--palette-gray-500);
}

.markdown-content .external-image img {
    border-radius: var(--size-radius-300);
    box-shadow: var(--shadow-200);
    transition: transform var(--transition-base);
}

.markdown-content .external-image img:hover {
    transform: scale(1.02);
}

.markdown-content .image-source {
    font-size: var(--size-font-100);
    color: var(--palette-gray-600);
    margin-top: var(--spacing-200);
    word-break: break-all;
    padding: var(--spacing-100) var(--spacing-200);
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--size-radius-100);
    border: 1px solid var(--palette-gray-300);
}

[data-bs-theme="dark"] .markdown-content .image-source {
    color: var(--palette-gray-500);
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--palette-gray-500);
}

.markdown-content .image-error {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid #f5c6cb;
    border-radius: 0.5rem;
    background-color: #f8d7da;
    color: #721c24;
    font-size: 0.875rem;
    margin: 0.5rem 0;
}

[data-bs-theme="dark"] .markdown-content .image-error {
    border-color: #721c24;
    background-color: #721c24;
    color: #f8d7da;
}

/* Pinned post styles - Compact */
.pinned-posts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pinned-post-item-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
}

.pinned-post-item-compact:hover {
    background-color: rgba(65, 105, 225, 0.05);
    border-left-color: var(--bs-primary);
    padding-left: 0.75rem;
}

.pinned-post-title {
    flex: 1;
    font-size: var(--size-font-200);
    font-weight: var(--font-weight-medium);
    color: var(--palette-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-base);
}

.pinned-post-item-compact:hover .pinned-post-title {
    color: var(--bs-primary);
}

.pinned-post-date {
    flex-shrink: 0;
    font-size: var(--size-font-100);
    color: var(--palette-gray-600);
    white-space: nowrap;
}

[data-bs-theme="dark"] .pinned-post-title {
    color: var(--palette-gray-100);
}

[data-bs-theme="dark"] .pinned-post-item-compact:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .pinned-post-item-compact:hover .pinned-post-title {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .pinned-post-date {
    color: var(--palette-gray-500);
}

/* ===============================================
   다크모드 추가 컴포넌트 스타일
   =============================================== */

/* 다크모드 드롭다운 */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: var(--bs-primary);
    color: white;
}

/* 다크모드 제목 */
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .modal-title {
    color: #f8f9fa;
}

/* 다크모드 알림 */
[data-bs-theme="dark"] .alert {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* 다크모드 리스트 그룹 */
[data-bs-theme="dark"] .list-group-item {
    background-color: transparent;
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .list-group-item:hover {
    background-color: transparent;
}

/* 다크모드 테이블 */
[data-bs-theme="dark"] .table {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table th {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

/* 다크모드 입력 그룹 */
[data-bs-theme="dark"] .input-group .btn {
    border-color: var(--bs-border-color);
}

/* ========================================
   카테고리 트리 위젯
   ======================================== */

.category-tree {
    font-size: 0.875rem;
    line-height: 1.4;
    min-height: 120px; /* 초기 높이 설정으로 깜빡임 방지 */
    transition: min-height 0.3s ease;
    position: relative;
    z-index: 1; /* 헤더보다 낮은 z-index 설정 */
}

.category-node {
    margin: 0.25rem 0;
}

/* 카테고리 아이템 - 간소화된 스타일 */
.category-item {
    display: flex;
    align-items: center;
    margin: 0.25rem 0;
    line-height: 1.6;
}

/* 카테고리 링크 - 간소화된 스타일 */
.category-link {
    display: block;
    padding: 0.375rem 0.625rem;
    color: var(--bs-body-color);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: var(--bs-border-radius-sm);
    transition: all 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-link:hover {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border-left-color: var(--bs-primary);
    text-decoration: none;
}

/* 특별한 카테고리 링크 (모두보기, 고정된 포스트) */
.category-special .category-link {
    font-weight: 600;
}

.category-special .category-name {
    font-weight: 600;
}

.category-special .category-name i {
    font-size: 0.875rem;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.category-special .category-link:hover .category-name i {
    opacity: 1;
}

.category-name {
    font-weight: 500;
    margin-right: 0.5rem;
}

.category-count {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    font-weight: 600;
    margin-left: auto;
}

/* 카테고리 레벨별 들여쓰기 - 계층 구분 강화 (0.5rem 단위) */
.category-level-0 {
    padding-left: 0;
}

.category-level-0 .category-link {
    font-weight: 600;
    font-size: 1rem; /* 최상위 계층 글자 크기 키우기 (0.875rem → 1rem) */
}

.category-level-0 .category-name {
    font-size: 1rem; /* 최상위 계층 글자 크기 키우기 */
}

.category-level-1 {
    padding-left: 0.75rem; /* 사이드바 폭에 맞춰 조정 */
}

.category-level-2 {
    padding-left: 1.5rem; /* 사이드바 폭에 맞춰 조정 */
}

.category-level-3 {
    padding-left: 2.25rem; /* 사이드바 폭에 맞춰 조정 */
}

.category-level-4 {
    padding-left: 3rem; /* 사이드바 폭에 맞춰 조정 */
}

.category-level-5 {
    padding-left: 3.75rem; /* 사이드바 폭에 맞춰 조정 */
}

/* 카테고리 상태 메시지 */
.category-empty,
.category-error {
    text-align: center;
    padding: 1rem;
    color: var(--bs-secondary);
    font-size: 0.875rem;
}

.category-error {
    color: var(--bs-danger);
}

.category-error i {
    margin-right: 0.5rem;
}

/* 반응형 조정 - 들여쓰기 2배 적용 */
@media (max-width: 991.98px) {
    .category-tree {
        font-size: 0.8rem;
    }
    
    .category-level-1 { padding-left: 1rem; }
    .category-level-2 { padding-left: 2rem; }
    .category-level-3 { padding-left: 3rem; }
    .category-level-4 { padding-left: 4rem; }
    .category-level-5 { padding-left: 5rem; }
}

/* 태그 클라우드 - 기존 스타일 유지 */
.tag-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
    overflow: hidden;
    max-width: 100%;
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    background-color: transparent;
    color: var(--bs-secondary);
    text-decoration: none;
    border-radius: var(--bs-border-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
    border: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: none;
}

.tag-badge:hover {
    color: var(--bs-primary);
    background-color: transparent;
    text-decoration: none;
    transform: none;
    box-shadow: none;
}

[data-bs-theme="dark"] .tag-badge {
    background-color: transparent;
    color: var(--bs-secondary);
}

[data-bs-theme="dark"] .tag-badge:hover {
    color: var(--bs-primary);
    background-color: transparent;
}

.tag-badge .text-primary {
    color: var(--bs-primary) !important;
    font-weight: 600;
}

.tag-badge:hover .text-primary {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 태그 클라우드 스타일 - Bootstrap 버튼 스타일 적용 */
.tag-bubble-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    justify-content: flex-start;
    align-items: flex-start;
}

.tag-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-secondary);
    color: white;
    text-decoration: none;
    border-radius: 1.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0.875rem;
    border: none;
    max-width: 100%;
}

.tag-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: white;
    background-color: var(--bs-secondary);
    filter: brightness(1.1);
}

/* 버블 크기별 스타일 */
.bubble-xs {
    font-size: 0.75rem;
    padding: 0.375rem 0.625rem;
    border-radius: 1rem;
    background-color: var(--bs-secondary);
}

.bubble-sm {
    font-size: 0.8125rem;
    padding: 0.4375rem 0.75rem;
    border-radius: 1.25rem;
    background-color: var(--bs-secondary);
}

.bubble-md {
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
    border-radius: 1.5rem;
    background-color: var(--bs-primary);
}

.bubble-lg {
    font-size: 0.9375rem;
    padding: 0.5625rem 1rem;
    border-radius: 1.5rem;
    background-color: var(--bs-primary);
}

.bubble-xl {
    font-size: 1rem;
    padding: 0.625rem 1.125rem;
    border-radius: 1.75rem;
    background-color: var(--bs-primary);
    font-weight: 600;
}

/* 버블 내부 텍스트 스타일 */
.tag-bubble-text {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1.3;
    word-break: keep-all;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 카운트 표시 (선택적) */
.tag-bubble-count {
    display: none; /* 카운트는 title 속성으로 표시 */
}

/* 활성 버블 스타일 */
.tag-bubble--active {
    background-color: var(--bs-success);
    box-shadow: 0 3px 8px rgba(var(--bs-success-rgb), 0.3);
    font-weight: 600;
}

.tag-bubble--active:hover {
    box-shadow: 0 4px 12px rgba(var(--bs-success-rgb), 0.4);
    filter: brightness(1.1);
}

/* 다크 모드 버블 스타일 */
[data-bs-theme="dark"] .tag-bubble {
    background-color: var(--bs-secondary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .tag-bubble:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    filter: brightness(1.15);
}

[data-bs-theme="dark"] .bubble-md,
[data-bs-theme="dark"] .bubble-lg,
[data-bs-theme="dark"] .bubble-xl {
    background-color: var(--bs-primary);
}

[data-bs-theme="dark"] .tag-bubble--active {
    background-color: var(--bs-success);
    box-shadow: 0 3px 10px rgba(var(--bs-success-rgb), 0.4);
}

/* 반응형 조정 */
@media (max-width: 768px) {
    .tag-bubble-cloud {
        gap: 0.375rem;
    }
    
    .bubble-xs { font-size: 0.6875rem; padding: 0.3125rem 0.5rem; }
    .bubble-sm { font-size: 0.75rem; padding: 0.375rem 0.625rem; }
    .bubble-md { font-size: 0.8125rem; padding: 0.4375rem 0.75rem; }
    .bubble-lg { font-size: 0.875rem; padding: 0.5rem 0.875rem; }
    .bubble-xl { font-size: 0.9375rem; padding: 0.5625rem 1rem; }
}

/* 애니메이션 효과 - 부드러운 페이드인 */
@keyframes tagFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tag-bubble {
    animation: tagFadeIn 0.4s ease-out;
}

.tag-bubble:nth-child(1) { animation-delay: 0.05s; }
.tag-bubble:nth-child(2) { animation-delay: 0.1s; }
.tag-bubble:nth-child(3) { animation-delay: 0.15s; }
.tag-bubble:nth-child(4) { animation-delay: 0.2s; }
.tag-bubble:nth-child(5) { animation-delay: 0.25s; }
.tag-bubble:nth-child(6) { animation-delay: 0.3s; }
.tag-bubble:nth-child(7) { animation-delay: 0.35s; }
.tag-bubble:nth-child(8) { animation-delay: 0.4s; }
.tag-bubble:nth-child(n+9) { animation-delay: 0.45s; }





/* Success/Error Messages - 커스텀 알림 스타일 사용 */


/* ===============================================
   이미지 모달 스타일
   =============================================== */

/* 이미지 모달 배경 */
#imageModal .modal-content {
    background-color: transparent;
    border: none;
}

#imageModal .modal-body {
    padding: 1rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 0.5rem;
    max-width: fit-content;
    max-height: fit-content;
    margin: auto;
}

/* 확대 이미지 스타일 */
#modalImage {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: block;
    box-shadow: none !important;
    border-radius: 0 !important;
    filter: none !important;
}

#modalImage:hover {
    transform: scale(1.01);
}

/* 이미지 컨테이너와 관련 요소의 그림자 모두 제거 */
#imageModal .modal-body img,
#imageModal img {
    box-shadow: none !important;
    filter: none !important;
}

#imageModal .modal-body {
    box-shadow: none !important;
}

#imageModal .modal-content {
    box-shadow: none !important;
}

/* 모달 배경 클릭 시 닫기 */
#imageModal .modal-dialog {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    max-width: 100%;
    height: 100%;
}

#imageModal .modal-content {
    pointer-events: auto;
    margin: 0;
}

/* 다크모드 지원 */
[data-bs-theme="dark"] #imageModal .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.85);
}

[data-bs-theme="dark"] #imageModal .modal-body {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] #modalImage {
    filter: brightness(1.05);
}

/* ===============================================
   JavaScript Template 스타일
   =============================================== */



/* 댓글 답글 */
.comment-reply-inline {
    margin-top: var(--spacing-200);
    margin-bottom: var(--spacing-300);
    margin-left: var(--spacing-300);
    padding-left: var(--spacing-200);
    border-left: 2px solid var(--border-color);
}

.comment-reply-content {
    margin-left: var(--spacing-200);
}

/* 댓글 로딩 */
.comment-loading {
    font-size: var(--size-font-200);
    color: var(--text-secondary);
    text-align: center;
    padding: var(--spacing-300);
}

/* 템플릿 아이콘 매핑 (Bootstrap Icons 사용) */
.icon-warning::before {
    content: "\f33e"; /* bi-exclamation-triangle */
    font-family: "bootstrap-icons";
}


/* 다크 모드 */

[data-theme="dark"] .comment-reply-inline,
[data-bs-theme="dark"] .comment-reply-inline {
    border-left-color: var(--border-color);
}

/* ===============================================
   Settings Card 스타일
   =============================================== */

.settings-card {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.2s ease;
}

.settings-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.settings-card .btn {
    transition: all 0.2s ease;
}

.settings-card .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.settings-card-header {
    padding: 1rem 1.25rem;
    background-color: var(--bs-light);
    border-bottom: 1px solid var(--bs-border-color);
}

.settings-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
}

.settings-card-body {
    padding: 1.25rem;
}

.settings-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

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

.settings-info-item strong {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* 다크모드 지원 */
[data-bs-theme="dark"] .settings-card {
    background-color: var(--palette-gray-100);
    border-color: var(--palette-gray-400);
}

[data-bs-theme="dark"] .settings-card-header {
    background-color: var(--palette-gray-200);
    border-bottom-color: var(--palette-gray-400);
}

[data-bs-theme="dark"] .settings-card-title {
    color: var(--palette-gray-800);
}

[data-bs-theme="dark"] .settings-info-item {
    border-bottom-color: var(--palette-gray-400);
}

[data-bs-theme="dark"] .settings-info-item strong {
    color: var(--palette-gray-800);
}

/* ===============================================
   Post Editor Form Styles
   =============================================== */

/* Post Form Label */
.post-form-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
}

.post-form-label.small {
    font-size: 0.8125rem;
}

/* Type Selector - Button Group Style */
.type-selector {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0;
    background-color: transparent;
    border: none;
}

.type-selector .btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.type-selector .btn {
    margin: 0;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* 선택된 버튼의 font-weight만 추가 */
.type-selector .btn-check:checked + .btn {
    font-weight: 600;
}

/* 메모 버튼은 선택 시 어두운 텍스트 사용 */
.type-selector .btn-check:checked + .btn-outline-warning {
    color: var(--bs-dark);
}

/* Post Title Input */
.post-title-input {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0.75rem 1rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.post-title-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Admin Header Actions */
.admin-header-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* 다크 모드 지원 */
[data-bs-theme="dark"] .post-form-label {
    color: var(--palette-gray-800);
}

/* 다크 모드 - 메모 버튼 선택 시 텍스트 색상만 조정 */
[data-bs-theme="dark"] .type-selector .btn-check:checked + .btn-outline-warning {
    color: var(--bs-dark);
}

[data-bs-theme="dark"] .post-title-input {
    background-color: var(--palette-gray-100);
    border-color: var(--palette-gray-400);
    color: var(--palette-gray-800);
}

[data-bs-theme="dark"] .post-title-input:focus {
    border-color: var(--bs-primary);
}

/* 다크 모드 카드 헤더 */
[data-bs-theme="dark"] .card-header.bg-light {
    background-color: var(--palette-gray-200) !important;
    border-bottom-color: var(--palette-gray-400);
}

[data-bs-theme="dark"] .card-header h5 {
    color: var(--palette-gray-800);
}

/* 반응형 */
@media (max-width: 768px) {
    .admin-header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .admin-header-actions .btn {
        width: 100%;
    }
    
    .type-selector {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    
    .type-selector .btn {
        width: 100%;
        border-radius: 0.5rem;
    }
}