@charset "UTF-8";
/*** 꼼다: 입력폼 ***/

/**
 * 글로벌 입력폼 스타일
 * 
 * 참조: docs/[템플릿] 글로벌 입력폼.md
 * 버전: 1.5.0
 * 최종 수정: 2026-02-04
 */

/* ============================================
   1. BOTTOM FORM WRAPPER (컨테이너)
   ============================================ */
   .bottom-form-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--card-bg);
    border-radius: 30px 30px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
    z-index: var(--z-header);
    transition: transform 0.3s ease;
}

/* 폼 접힘 상태 */
.bottom-form-wrapper.collapsed {
    transform: translateY(calc(100% - 45px));
}/*** [YB]폼 접힌 상태에서 노출 정도 추후 보정 ***/

/* ============================================
   2. DRAG HANDLE (드래그 핸들)
   ============================================ */
.form-drag-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 11px 0 30px;/*** [YB] padding 값 수정 ***/
    cursor: pointer;
    touch-action: none;
}

.form-drag-handle::before {
    content: '';
    width: 50px;
    height: 4px;
    background: var(--g-border-light);
    border-radius: 2px;
    transition: background 0.2s, width 0.2s;
}

.form-drag-handle:hover::before,
.form-drag-handle:active::before {
    width: 60px;
}/*** [YB] 모바일 환경에서는 의미 없음, 추후 삭제 가능 ***/

/* ============================================
   3. PLANNER FORM CONTENT (폼 컨텐츠)
   ============================================ */
.planner-form-content {
    padding: 0 30px 45px;/*** [YB] 15 → 30 비율 수정 ***/
    display: flex;
    flex-direction: column;
    gap: 6px;/*** [YB] 7 → 6 수정 ***/
}

.planner-form-content .form-row {
    display: flex;
    gap: 6px;/*** [YB] 7 → 6 수정 ***/
    align-items: center;
}

/* ============================================
   4. 입력 필드 공통
   ============================================ */
.planner-form-content input,
.planner-form-content select {
    width: 100%;/*** [YB] 추가 ***/
    height: 36px;/*** [YB] 추가 ***/
    padding: 0 12px;/*** [YB] 6 10 → 0 12 수정***/
    border-radius: 6px;
    border: none;
    background: var(--g-page-bg);
    font-size: 0.875rem;
    outline: none;
    font-family: inherit;
}

/* 텍스트 입력 (flex 확장) */
.planner-form-content input[type="text"] {
    flex: 1;
    min-width: 0;
}

/* 숫자 입력 (고정 너비) *//***
.planner-form-content input[type="number"] {
    width: 100%;
    flex: 0 0 50px;
    text-align: center;
    font-weight: 600;
    padding: 10px 5px;
}***//*** [YB] 삭제 ***/

/* 시간 입력 */
.planner-form-content input[type="time"] {
    flex: 0 0 auto;
}

/* 셀렉트 박스 */
.planner-form-content select {
    flex: 1;
}

/* 체크박스 */
.planner-form-content input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/*** ============================================
   5. 입력 + 단위용 스타일 추가 [YB]
	ex) 100 분, 100 도토리
   ============================================ ***/

.input-box {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 입력 요소 단위 글자수 별 패딩(input 태그에 추가) */
.input-box .input-unit1 {
    padding-right: 28px;
}

.input-box .input-unit2 {
    padding-right: 38px;
}

.input-box .input-unit3 {
    padding-right: 48px;
}

/* 입력 요소 단위 표시(span 태그에 추가) */
.unit {
    position: absolute;
    right: 12px;
    pointer-events: none;
    font-size: 0.75rem;
    color: #555555;
}

/* ============================================
   6. 추가/수정 버튼
   ============================================ */
.planner-submit-btn {
    background: var(--accent-dark-green);
    color: white;
    border: none;
    height: 36px;/*** [YB] 높이 추가 ***/
    padding: 0 12px;/*** [YB] 6 12 → 0 12 수정***/
    border-radius: 6px;
    font-weight: 600;
    font-size: var(--fs-md);
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.planner-submit-btn:hover {
    opacity: 0.9;
}

/* ============================================
   7. 반응형 - 데스크탑 (768px 이상)
   ============================================ */
@media (min-width: 768px) {
    .bottom-form-wrapper {
        max-width: 600px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .bottom-form-wrapper.collapsed {
        transform: translateX(-50%) translateY(calc(100% - 45px));
    }
}

/* ============================================
   ============================================
   템플릿별 테마 오버라이드
   ============================================
   ============================================ */


/* ============================================
   WEEKPLAN (주간계획표) 테마
   ============================================ */

/* 컨테이너 배경 */
body:has(.weekplan-page) .bottom-form-wrapper {
    background: var(--g-calendar-bg);
    border-top: 1px solid var(--g-border-light);
}

/* 드래그 핸들 */
body:has(.weekplan-page) .bottom-form-wrapper .form-drag-handle::before {
    background: var(--g-accent);
}

/* 입력 필드 테두리 */
body:has(.weekplan-page) .bottom-form-wrapper .planner-form-content input,
body:has(.weekplan-page) .bottom-form-wrapper .planner-form-content select {
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
}

body:has(.weekplan-page) .bottom-form-wrapper .planner-form-content input:focus,
body:has(.weekplan-page) .bottom-form-wrapper .planner-form-content select:focus {
    border-color: var(--g-accent);
}

/* 버튼 색상 */
body:has(.weekplan-page) .bottom-form-wrapper .planner-submit-btn {
    background: var(--g-accent);
    color: var(--g-text-inverted);
}

body:has(.weekplan-page) .bottom-form-wrapper .planner-submit-btn:hover {
    background: var(--g-accent-dark);
}

/* ===== 요일 체크박스 (원형) ===== */
body:has(.weekplan-page) .bottom-form-wrapper .wp-day-checks {
    display: flex;
    gap: 6px;/*** [YB] 4 → 6 수정 ***/
    flex-shrink: 0;
}

body:has(.weekplan-page) .bottom-form-wrapper .wp-day-check {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body:has(.weekplan-page) .bottom-form-wrapper .wp-day-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

body:has(.weekplan-page) .bottom-form-wrapper .wp-day-check span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;/*** [YB] 26 → 36 수정 ***/
    height: 36px;/*** [YB] 26 → 36 수정 ***/
    background: var(--g-page-bg);
    border: 1.5px solid var(--g-border-default);
    border-radius: 50%;
    font-size: var(--fs-md);/*** [YB] 11 → 0.875rem 수정 ***/
    font-weight: 600;/*** [YB] 500 → 600 수정, --fw-sb(semi bold) 추가할 것 ***/
    color: #999999;
    transition: all 0.15s ease;
}

body:has(.weekplan-page) .bottom-form-wrapper .wp-day-check:hover span {
    border-color: var(--g-accent);
    color: var(--g-accent);
}

body:has(.weekplan-page) .bottom-form-wrapper .wp-day-check input:checked + span {
    background: var(--g-accent);
    border-color: var(--g-accent);
    color: var(--g-text-inverted);
    font-weight: 600;
}

/* ===== 시간 선택 행 (시작 ~ 종료) ===== */
body:has(.weekplan-page) .bottom-form-wrapper .wp-time-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body:has(.weekplan-page) .bottom-form-wrapper .wp-time-pair {
    display: flex;
    align-items: center;
    gap: 4px;
}

body:has(.weekplan-page) .bottom-form-wrapper .wp-time-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    flex-shrink: 0;
    min-width: 24px;
    text-align: center;
}

body:has(.weekplan-page) .bottom-form-wrapper .wp-time-pair select {
    width: 54px;
    height: 36px;
    padding: 0 4px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    flex: 0 0 54px;
}

body:has(.weekplan-page) .bottom-form-wrapper .wp-time-sep {
    font-size: 0.875rem;
    font-weight: 600;
    color: #555;
}

body:has(.weekplan-page) .bottom-form-wrapper .wp-time-wave {
    font-size: 0.875rem;
    font-weight: 600;
    color: #999;
    flex-shrink: 0;
}

/* ===== 아이콘 버튼 (40x40) ===== *//***
body:has(.weekplan-page) .bottom-form-wrapper .wp-icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--fs-xl);
    flex-shrink: 0;
    transition: all 0.15s ease;
}***//*** [YB] 삭제 ***/

/*** ===== 아이콘 버튼 (36x36) 추가 [YB] ===== ***/
.btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--fs-lg);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.btn-icon .selected-icon {
    line-height: 1;
}

.btn-icon  svg {
    width: 16px;
    height: 16px;
    fill: #555;
} 

body:has(.weekplan-page) .bottom-form-wrapper .btn-icon:hover {
    border-color: var(--g-accent);
}/*** [YB] .wp-icon-btn → .btn-icon 클래스 수정***/


/* ============================================
   MONTHLY (월간스케줄러) 테마
   ============================================ */

/* 컨테이너 배경 */
body:has(.monthly-page) .bottom-form-wrapper {
    background: var(--g-calendar-bg);
    /*** border-top: 1px solid #C7CEBF;***//*** [YB] 삭제 ***/
}

/* 드래그 핸들 */
body:has(.monthly-page) .bottom-form-wrapper .form-drag-handle::before {
    background: #6CA587;
}

/* 입력 필드 테두리 */
body:has(.monthly-page) .bottom-form-wrapper .planner-form-content input,
body:has(.monthly-page) .bottom-form-wrapper .planner-form-content select {
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
}

body:has(.monthly-page) .bottom-form-wrapper .planner-form-content input:focus,
body:has(.monthly-page) .bottom-form-wrapper .planner-form-content select:focus {
    border-color: #6CA587;
}

/* 버튼 색상 */
body:has(.monthly-page) .bottom-form-wrapper .planner-submit-btn {
    background: #6CA587;
    color: var(--g-text-inverted);
}

body:has(.monthly-page) .bottom-form-wrapper .planner-submit-btn:hover {
    background: #5A9475;
}

/* 시간 입력 */
body:has(.monthly-page) .bottom-form-wrapper .planner-form-content input[type="time"] {
    width: 100px;
    height: 40px;
    padding: 6px 8px;
    text-align: center;
}

/* 제목 입력칸 */
body:has(.monthly-page) .bottom-form-wrapper .planner-form-content input#fTitle {
    flex: 1;
    height: 40px;
    padding: 10px 12px;
}

/* 타입 선택 */
body:has(.monthly-page) .bottom-form-wrapper .planner-form-content select#fType {
    flex: 1;
    height: 40px;
    padding: 6px 10px;
}

/* ============================================
   RECOMMENDEDLIST (추천 리스트) 테마
   ============================================ */

/* 컨테이너 배경 */
body:has(.recommendedlist-page) .bottom-form-wrapper {
    background: #FFF8E7;
    border-top: 1px solid #F5DEB3;
}

/* 드래그 핸들 */
body:has(.recommendedlist-page) .bottom-form-wrapper .form-drag-handle::before {
    background: #F5A663;
}

/* 입력 필드 테두리 */
body:has(.recommendedlist-page) .bottom-form-wrapper .planner-form-content input,
body:has(.recommendedlist-page) .bottom-form-wrapper .planner-form-content select {
    background: var(--g-page-bg);
    border: 1px solid #E8DCC8;
}

body:has(.recommendedlist-page) .bottom-form-wrapper .planner-form-content input:focus,
body:has(.recommendedlist-page) .bottom-form-wrapper .planner-form-content select:focus {
    border-color: #F5A663;
}

/* 버튼 색상 */
body:has(.recommendedlist-page) .bottom-form-wrapper .planner-submit-btn {
    background: #F5A663;
    color: var(--g-text-inverted);
}

body:has(.recommendedlist-page) .bottom-form-wrapper .planner-submit-btn:hover {
    background: #E09550;
}

/* 별점 입력 */
body:has(.recommendedlist-page) .bottom-form-wrapper .star-rating-input {
    display: flex;
    gap: 4px;
    padding: 6px 10px;
    background: var(--g-page-bg);
    border: 1px solid #E8DCC8;
    border-radius: 6px;
    flex-shrink: 0;
}

body:has(.recommendedlist-page) .bottom-form-wrapper .star-rating-input .star {
    font-size: 20px;
    color: #D9D9D9;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
}

body:has(.recommendedlist-page) .bottom-form-wrapper .star-rating-input .star.filled {
    color: #F5A663;
}

body:has(.recommendedlist-page) .bottom-form-wrapper .star-rating-input .star:hover {
    transform: scale(1.15);
    color: #F5A663;
}

/* 고급 버튼 */
body:has(.recommendedlist-page) .bottom-form-wrapper .btn-advanced {
    width: 36px;
    height: 36px;
    border: 1px solid #E8DCC8;
    border-radius: 6px;
    background: var(--g-page-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}

body:has(.recommendedlist-page) .bottom-form-wrapper .btn-advanced:hover {
    background: #FFF8E7;
    border-color: #F5A663;
}

body:has(.recommendedlist-page) .bottom-form-wrapper .btn-advanced svg {
    fill: #888888;
}

/* 모바일 (390px - 479px) */
@media (min-width: 390px) and (max-width: 479px) {

    .bottom-form-wrapper {
        border-radius: 12px 12px 0 0;
    }

   .planner-form-content {
        padding: 0 12px 45px;
    }

    .planner-form-content .form-row {
	gap: 4px;
    }

.planner-form-content input,
.planner-form-content select {
    height: 32px;
    padding: 0 6px;
}

    .planner-submit-btn {
        height: 32px;
    }

    body:has(.weekplan-page) .bottom-form-wrapper .wp-day-checks {
        gap: 4px;
}

    body:has(.weekplan-page) .bottom-form-wrapper .wp-day-check span {
        width: 24px;
        height: 24px;
    }

    body:has(.weekplan-page) .bottom-form-wrapper .wp-time-pair select {
        width: 46px;
        height: 32px;
        font-size: 0.8125rem;
        padding: 0 2px;
    }

    body:has(.weekplan-page) .bottom-form-wrapper .wp-time-label {
        font-size: 0.6875rem;
        min-width: 20px;
    }

    .btn-icon {
        width: 32px;
        height: 32px;
    }
}

/* 모바일 (480px - 499px) */
@media (min-width: 480px) and (max-width: 499px) {

    .bottom-form-wrapper {
        border-radius: 16px 16px 0 0;
    }

   .planner-form-content {
        padding: 0 16px 45px;
    }

    .planner-form-content .form-row {
	gap: 6px;
    }

    body:has(.weekplan-page) .bottom-form-wrapper .wp-day-checks {
        gap: 6px;
}

    body:has(.weekplan-page) .bottom-form-wrapper .wp-day-check span {
        width: 28px;
        height: 28px;
    }

    body:has(.weekplan-page) .bottom-form-wrapper .wp-time-pair select {
        width: 50px;
        height: 32px;
    }
}

/* 모바일 (500px - 767px) */
@media (min-width: 500px) and (max-width: 767px) {

    .bottom-form-wrapper {
        border-radius: 20px 20px 0 0;
    }

   .planner-form-content {
        padding: 0 20px 45px;
    }

    body:has(.weekplan-page) .bottom-form-wrapper .wp-day-check span {
        width: 32px;
        height: 32px;
    }
}



/* ============================================
   TRAVELPLANER (여행계획표) 테마
   ============================================ */

/* 컨테이너 배경 */
body:has(.travelplaner-page) .bottom-form-wrapper {
    background: var(--g-hover-bg);
    border-top: 1px solid #D9D6CC;
}

/* 드래그 핸들 */
body:has(.travelplaner-page) .bottom-form-wrapper .form-drag-handle::before {
    background: var(--g-accent-dark);
}

/* 입력 필드 테두리 */
body:has(.travelplaner-page) .bottom-form-wrapper .planner-form-content input,
body:has(.travelplaner-page) .bottom-form-wrapper .planner-form-content select {
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
}

body:has(.travelplaner-page) .bottom-form-wrapper .planner-form-content input:focus,
body:has(.travelplaner-page) .bottom-form-wrapper .planner-form-content select:focus {
    border-color: var(--g-accent-dark);
}

/* 버튼 색상 */
body:has(.travelplaner-page) .bottom-form-wrapper .planner-submit-btn {
    background: var(--g-accent-dark);
    color: var(--g-text-inverted);
}

body:has(.travelplaner-page) .bottom-form-wrapper .planner-submit-btn:hover {
    background: #3d6a4a;
}

/* ===== GPS 버튼 (36x36) ===== */
body:has(.travelplaner-page) .bottom-form-wrapper .gps-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

body:has(.travelplaner-page) .bottom-form-wrapper .gps-btn:hover {
    border-color: var(--g-accent-dark);
    background: var(--g-today-bg);
}

body:has(.travelplaner-page) .bottom-form-wrapper .gps-btn svg {
    width: 18px;
    height: 18px;
    color: var(--g-accent-dark);
}

/* ===== 시간 입력 (width: auto 오버라이드) ===== */
body:has(.travelplaner-page) .bottom-form-wrapper .planner-form-content input[type="time"] {
    width: auto;
    flex: 0 0 auto;
}

/* ===== 좌표 입력 ===== */
body:has(.travelplaner-page) .bottom-form-wrapper .planner-form-content input#fCoords {
    flex: 1;
    min-width: 0;
}

/* ===== 일차 선택기 ===== */
body:has(.travelplaner-page) .bottom-form-wrapper .day-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

body:has(.travelplaner-page) .bottom-form-wrapper .day-selector-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--g-border-default);
    background: var(--g-page-bg);
    border-radius: 6px;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--g-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}

body:has(.travelplaner-page) .bottom-form-wrapper .day-selector-btn:hover {
    background: var(--g-accent-dark);
    color: var(--g-text-inverted);
    border-color: var(--g-accent-dark);
}

body:has(.travelplaner-page) .bottom-form-wrapper .day-selector-display {
    font-size: var(--fs-sm, 0.75rem);
    font-weight: 600;
    color: #333;
    min-width: 42px;
    text-align: center;
    white-space: nowrap;
}

/* 반응형 - 390px ~ 479px */
@media (min-width: 390px) and (max-width: 479px) {
    body:has(.travelplaner-page) .bottom-form-wrapper .gps-btn {
        width: 32px;
        height: 32px;
    }

    body:has(.travelplaner-page) .bottom-form-wrapper .gps-btn svg {
        width: 16px;
        height: 16px;
    }

    body:has(.travelplaner-page) .bottom-form-wrapper .day-selector-btn {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    body:has(.travelplaner-page) .bottom-form-wrapper .day-selector-display {
        min-width: 36px;
        font-size: 0.625rem;
    }
}


/* ============================================
   CHECKLIST (기본체크리스트) 테마
   ============================================ */

/* 컨테이너 배경 */
body:has(.checklist-page) .bottom-form-wrapper {
    background: var(--g-calendar-bg);
    border-top: 1px solid var(--g-border-light);
}

/* 드래그 핸들 */
body:has(.checklist-page) .bottom-form-wrapper .form-drag-handle::before {
    background: var(--g-accent);
}

/* 입력 필드 테두리 */
body:has(.checklist-page) .bottom-form-wrapper .planner-form-content input,
body:has(.checklist-page) .bottom-form-wrapper .planner-form-content select {
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
}

body:has(.checklist-page) .bottom-form-wrapper .planner-form-content input:focus,
body:has(.checklist-page) .bottom-form-wrapper .planner-form-content select:focus {
    border-color: var(--g-accent);
}

/* 버튼 색상 */
body:has(.checklist-page) .bottom-form-wrapper .planner-submit-btn {
    background: var(--g-accent);
    color: var(--g-text-inverted);
}

body:has(.checklist-page) .bottom-form-wrapper .planner-submit-btn:hover {
    background: var(--g-accent-dark);
}

/* ===== 숫자 입력 (분) ===== */
body:has(.checklist-page) .bottom-form-wrapper .input-box {
    flex: 0 0 70px;
}

body:has(.checklist-page) .bottom-form-wrapper .input-box input[type="number"] {
    width: 100%;
    text-align: center;
    font-weight: 600;
}

/* ===== 색상 선택 ===== */
body:has(.checklist-page) .bottom-form-wrapper select#fColor {
    flex: 0 0 80px;
}

/* 반응형 - 390px ~ 479px */
@media (min-width: 390px) and (max-width: 479px) {
    body:has(.checklist-page) .bottom-form-wrapper .input-box {
        flex: 0 0 60px;
    }

    body:has(.checklist-page) .bottom-form-wrapper select#fColor {
        flex: 0 0 70px;
    }
}


/* ============================================
   PROJECT (프로젝트 관리) 테마
   ============================================ */

/* 컨테이너 배경 */
body:has(.project-manage-page) .bottom-form-wrapper {
    background: var(--g-calendar-bg);
}

/* 드래그 핸들 */
body:has(.project-manage-page) .bottom-form-wrapper .form-drag-handle::before {
    background: var(--g-accent);
}

/* 입력 필드 테두리 */
body:has(.project-manage-page) .bottom-form-wrapper .planner-form-content input,
body:has(.project-manage-page) .bottom-form-wrapper .planner-form-content select {
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
}

body:has(.project-manage-page) .bottom-form-wrapper .planner-form-content input:focus,
body:has(.project-manage-page) .bottom-form-wrapper .planner-form-content select:focus {
    border-color: var(--g-accent);
}

/* 버튼 색상 */
body:has(.project-manage-page) .bottom-form-wrapper .planner-submit-btn {
    background: var(--g-accent);
    color: var(--g-text-inverted);
}

body:has(.project-manage-page) .bottom-form-wrapper .planner-submit-btn:hover {
    background: var(--g-accent-dark);
}

/* ===== 카테고리 선택 ===== */
body:has(.project-manage-page) .bottom-form-wrapper .form-select-cat {
    flex: 0 0 auto;
    min-width: 100px;
    max-width: 140px;
}

/* ===== 날짜 입력 ===== */
body:has(.project-manage-page) .bottom-form-wrapper .form-date {
    flex: 0 0 auto;
    width: 130px;
}

/* ===== 작업일수 입력 ===== */
body:has(.project-manage-page) .bottom-form-wrapper .input-box {
    flex: 0 0 70px;
}

body:has(.project-manage-page) .bottom-form-wrapper .input-box input[type="number"] {
    width: 100%;
    text-align: center;
    font-weight: 600;
}

/* 반응형 - 390px ~ 479px */
@media (min-width: 390px) and (max-width: 479px) {
    body:has(.project-manage-page) .bottom-form-wrapper .form-select-cat {
        min-width: 80px;
    }

    body:has(.project-manage-page) .bottom-form-wrapper .form-date {
        width: 110px;
    }

    body:has(.project-manage-page) .bottom-form-wrapper .input-box {
        flex: 0 0 60px;
    }
}


/* ============================================
   FAMILYSCHEDULER (가족스케줄러) 테마
   ============================================ */

/* 컨테이너 배경 */
body:has(.familyscheduler-page) .bottom-form-wrapper {
    background: var(--g-calendar-bg);
}

/* 드래그 핸들 */
body:has(.familyscheduler-page) .bottom-form-wrapper .form-drag-handle::before {
    background: #6CA587;
}

/* 입력 필드 테두리 */
body:has(.familyscheduler-page) .bottom-form-wrapper .planner-form-content input,
body:has(.familyscheduler-page) .bottom-form-wrapper .planner-form-content select {
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
}

body:has(.familyscheduler-page) .bottom-form-wrapper .planner-form-content input:focus,
body:has(.familyscheduler-page) .bottom-form-wrapper .planner-form-content select:focus {
    border-color: #6CA587;
}

/* 버튼 색상 */
body:has(.familyscheduler-page) .bottom-form-wrapper .planner-submit-btn {
    background: #6CA587;
    color: var(--g-text-inverted);
}

body:has(.familyscheduler-page) .bottom-form-wrapper .planner-submit-btn:hover {
    background: #5A9475;
}

/* ===== 시간 입력 ===== */
body:has(.familyscheduler-page) .bottom-form-wrapper .planner-form-content input[type="time"] {
    width: auto;
    flex: 0 0 auto;
}

/* ===== 타입 선택기 (커스텀 셀렉트) ===== */
.fs-type-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
    border-radius: 6px;
    flex-shrink: 0;
    padding: 0 28px 0 10px;
    cursor: pointer;
}

.fs-type-label {
    font-size: 0.875rem;
    white-space: nowrap;
    color: #333;
    pointer-events: none;
}

.fs-type-selector::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #888;
    pointer-events: none;
}

.fs-type-selector select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 반응형 - 390px ~ 479px */
@media (min-width: 390px) and (max-width: 479px) {
    .fs-type-selector {
        height: 32px;
        padding: 0 24px 0 8px;
    }

    .fs-type-label {
        font-size: 0.75rem;
    }
}

/* ===== 동적 폼 요소 크기 ===== */
body:has(.familyscheduler-page) .bottom-form-wrapper #dynamicRow input[type="number"] {
    flex: 0 0 70px;
    text-align: center;
    font-weight: 600;
}

body:has(.familyscheduler-page) .bottom-form-wrapper #dynamicRow input[type="date"] {
    flex: 0 0 auto;
}

/* 반응형 - 390px ~ 479px */
@media (min-width: 390px) and (max-width: 479px) {
    body:has(.familyscheduler-page) .bottom-form-wrapper #dynamicRow input[type="number"] {
        flex: 0 0 60px;
    }
}


/* ============================================
   RECIPE - 레시피 기록
   ============================================ */

/* 컨테이너 배경 */
body:has(.recipe-page) .bottom-form-wrapper {
    background: var(--g-hover-bg);
    border-top: 1px solid #D9D6CC;
}

/* 드래그 핸들 */
body:has(.recipe-page) .bottom-form-wrapper .form-drag-handle::before {
    background: var(--g-accent);
}

/* 입력 필드 테두리 */
body:has(.recipe-page) .bottom-form-wrapper .planner-form-content input,
body:has(.recipe-page) .bottom-form-wrapper .planner-form-content select {
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
}

body:has(.recipe-page) .bottom-form-wrapper .planner-form-content input:focus,
body:has(.recipe-page) .bottom-form-wrapper .planner-form-content select:focus {
    border-color: var(--g-accent);
}

/* 버튼 색상 */
body:has(.recipe-page) .bottom-form-wrapper .planner-submit-btn {
    background: var(--g-accent);
    color: var(--g-text-inverted);
}

body:has(.recipe-page) .bottom-form-wrapper .planner-submit-btn:hover {
    background: #6B8F4E;
}

/* 수정 버튼 */
body:has(.recipe-page) .bottom-form-wrapper .planner-submit-btn.edit-btn {
    background: var(--g-edit);
}

body:has(.recipe-page) .bottom-form-wrapper .planner-submit-btn.edit-btn:hover {
    background: var(--g-edit-dark);
}

/* ============================================
   BUDGET - 지출계획
   ============================================ */

/* 컨테이너 배경 */
body:has(.budget-page) .bottom-form-wrapper {
    background: var(--g-hover-bg);
    border-top: 1px solid var(--g-border-default);
}

/* 드래그 핸들 */
body:has(.budget-page) .bottom-form-wrapper .form-drag-handle::before {
    background: var(--g-accent);
}

/* 입력 필드 테두리 */
body:has(.budget-page) .bottom-form-wrapper .planner-form-content input,
body:has(.budget-page) .bottom-form-wrapper .planner-form-content select {
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
}

body:has(.budget-page) .bottom-form-wrapper .planner-form-content input:focus,
body:has(.budget-page) .bottom-form-wrapper .planner-form-content select:focus {
    border-color: var(--g-accent);
}

/* 버튼 색상 */
body:has(.budget-page) .bottom-form-wrapper .planner-submit-btn {
    background: var(--g-accent);
    color: var(--g-text-inverted);
}

body:has(.budget-page) .bottom-form-wrapper .planner-submit-btn:hover {
    background: var(--g-accent-dark);
}

/* 수정 버튼 */
body:has(.budget-page) .bottom-form-wrapper .planner-submit-btn.edit-btn {
    background: var(--g-edit);
}

body:has(.budget-page) .bottom-form-wrapper .planner-submit-btn.edit-btn:hover {
    background: var(--g-edit-dark);
}

/* ============================================
   STUDYPLANNER - 학습 플래너
   ============================================ */

/* studyplanner는 bottom-form-wrapper 미사용 */
body:has(.studyplanner-page) .bottom-form-wrapper {
    display: none;
}

/* ============================================
   READINGLOG - 독서기록
   ============================================ */

/* 컨테이너 배경 */
body:has(.readinglog-page) .bottom-form-wrapper {
    background: var(--g-hover-bg);
    border-top: 1px solid var(--g-border-default);
}

/* 드래그 핸들 */
body:has(.readinglog-page) .bottom-form-wrapper .form-drag-handle::before {
    background: var(--g-accent);
}

/* 입력 필드 테두리 */
body:has(.readinglog-page) .bottom-form-wrapper .planner-form-content input,
body:has(.readinglog-page) .bottom-form-wrapper .planner-form-content select {
    background: var(--g-page-bg);
    border: 1px solid var(--g-border-default);
}

body:has(.readinglog-page) .bottom-form-wrapper .planner-form-content input:focus,
body:has(.readinglog-page) .bottom-form-wrapper .planner-form-content select:focus {
    border-color: var(--g-accent);
}

/* 버튼 색상 */
body:has(.readinglog-page) .bottom-form-wrapper .planner-submit-btn {
    background: var(--g-accent);
    color: var(--g-text-inverted);
}

body:has(.readinglog-page) .bottom-form-wrapper .planner-submit-btn:hover {
    background: var(--g-accent-dark);
}

/* 수정 버튼 */
body:has(.readinglog-page) .bottom-form-wrapper .planner-submit-btn.edit-btn {
    background: var(--g-edit);
}

body:has(.readinglog-page) .bottom-form-wrapper .planner-submit-btn.edit-btn:hover {
    background: var(--g-edit-dark);
}

/* ISBN 검색 wrap */
.rl-isbn-search-wrap {
    display: flex;
    gap: 4px;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.rl-isbn-search-wrap input {
    flex: 1;
    min-width: 0;
}
.rl-barcode-scan-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 15px;
    line-height: 32px;
    text-align: center;
    background: var(--g-hover-bg, #f5f5f5);
    border: 1px solid var(--g-border-default, #e0e0e0);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}
.rl-barcode-scan-btn:hover { background: var(--g-border-default, #e0e0e0); }
.rl-isbn-search-btn {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    background: var(--g-accent, #B16D42);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
}
.rl-isbn-search-btn:hover { opacity: .85; }
.rl-isbn-search-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 바코드 스캔 모달 */
.rl-barcode-scan-area {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.rl-barcode-scan-area video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.rl-barcode-guide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 36%;
    pointer-events: none;
    z-index: 2;
}
.rl-barcode-guide-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.rl-guide-corner {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rl-guide-scanline {
    stroke: #ff4444;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .85;
    animation: rl-scan-line 2s ease-in-out infinite;
}
@keyframes rl-scan-line {
    0%, 100% { transform: translateY(-20px); opacity: .85; }
    50% { transform: translateY(20px); opacity: .6; }
}
.rl-barcode-status {
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--g-text-secondary, #888);
    white-space: pre-line;
}
/* html5-qrcode 라이브러리 컨테이너 */
.rl-barcode-reader-container {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}
.rl-barcode-reader-container video {
    border-radius: 8px;
}
/* html5-qrcode 내부: 자체 UI 숨기고 커스텀 가이드 사용 */
.rl-barcode-reader-container #qr-shaded-region { border: none !important; }
.rl-barcode-reader-container img[alt="Info icon"],
.rl-barcode-reader-container span[style*="font-size"] { display: none !important; }
.rl-barcode-reader-container > div { position: static !important; }

/* 도서 선택 목록 (복수 결과) */
.rl-book-select-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rl-book-select-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--g-border-default, #e0e0e0);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}
.rl-book-select-item:hover {
    background: var(--g-hover-bg, #f5f5f5);
}
.rl-book-select-cover {
    width: 48px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--g-hover-bg, #f0f0f0);
}
.rl-book-select-nocover {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.rl-book-select-info {
    flex: 1;
    min-width: 0;
}
.rl-book-select-title {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rl-book-select-meta {
    font-size: 11px;
    color: var(--g-text-secondary, #888);
}
.rl-book-select-isbn {
    font-size: 10px;
    color: var(--g-text-tertiary, #aaa);
    margin-top: 2px;
}

/* ISBN 검색 결과 안내 모달 */
.rl-isbn-result-wrap {
    padding: 4px 0;
    text-align: center;
}
.rl-isbn-preview-cover {
    margin: 0 auto 12px;
    width: 100px;
    height: 140px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.rl-isbn-preview-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 표지 없을 때: 제목/저자 텍스트 표시 */
.rl-isbn-preview-info {
    margin-bottom: 16px;
}
.rl-isbn-preview-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--g-text-primary, #222);
    margin-bottom: 2px;
    line-height: 1.3;
}
.rl-isbn-preview-meta {
    font-size: 12px;
    color: var(--g-text-secondary, #888);
}
.rl-isbn-result-section {
    text-align: left;
    margin-top: 12px;
}
.rl-isbn-result-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rl-isbn-result-label span {
    font-size: 11px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.rl-isbn-result-filled {
    color: var(--g-primary, #4A90D9);
}
.rl-isbn-result-filled span {
    background: var(--g-primary, #4A90D9);
}
.rl-isbn-result-missing {
    color: var(--g-text-tertiary, #aaa);
}
.rl-isbn-result-missing span {
    background: var(--g-text-tertiary, #aaa);
}
.rl-isbn-result-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.rl-isbn-tag {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    line-height: 1.4;
}
.rl-isbn-tag-filled {
    background: rgba(74, 144, 217, 0.1);
    color: var(--g-primary, #4A90D9);
}
.rl-isbn-tag-missing {
    background: var(--g-bg-secondary, #f5f5f5);
    color: var(--g-text-tertiary, #aaa);
    text-decoration: line-through;
}

/* === DOCGUIDE === */
body:has(.docguide-page) .bottom-form-wrapper {
    background: var(--dg-accent-light, #F3F6EF);
    border-top: 1px solid var(--g-border-light);
}

body:has(.docguide-page) .bottom-form-wrapper .form-drag-handle::before {
    background: var(--dg-accent, #8BA86E);
}

body:has(.docguide-page) .bottom-form-wrapper .planner-form-content input,
body:has(.docguide-page) .bottom-form-wrapper .planner-form-content select {
    background: var(--g-card-bg);
    border: 1px solid var(--g-border-light);
}

body:has(.docguide-page) .bottom-form-wrapper .planner-form-content input:focus,
body:has(.docguide-page) .bottom-form-wrapper .planner-form-content select:focus {
    border-color: var(--dg-accent, #8BA86E);
}

/* 버튼 색상 */
body:has(.docguide-page) .bottom-form-wrapper .planner-submit-btn {
    background: var(--dg-accent, #8BA86E);
    color: var(--g-text-inverted);
}

body:has(.docguide-page) .bottom-form-wrapper .planner-submit-btn:hover {
    background: var(--dg-accent-dark, #7E9B63);
}

/* 수정 버튼 */
body:has(.docguide-page) .bottom-form-wrapper .planner-submit-btn.edit-btn {
    background: var(--g-edit);
}

body:has(.docguide-page) .bottom-form-wrapper .planner-submit-btn.edit-btn:hover {
    background: var(--g-edit-dark);
}