#clcBtnSet, #clcBtnSet2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
#clcBtnSet2 > div > div{
    display:none;
    background: #FFFFFF;
    width: 5%;
    height: 0;
    padding-bottom: 5%;
    margin: auto;
}
#clcBtnSet > a{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 25%;
    overflow: hidden;
}
#clcBtnSet > a > img{
    position: absolute;
    object-fit: cover;
    height: 100%;
    transition: .5s;
}
#clcBtnSet > a:hover > img{
    transform: scale(1.2);
}
#clcBtnSet > a > .title{
    position: absolute;
    left: 0;
    top: 50%;
    background: rgba(85, 98, 104, .7);
    z-index: 1;
    color: #FFFFFF;
    font-size: min(2vw, 22px);
    line-height: min(2vw, 22px);
    padding: .5vw 2vw .5vw 1vw;
    transform: translateY(-50%);
}
#clcBtnSet .triangle {
    display: inline-block;
    width: .8vw;
    height: .6vw;
    background-color: #ffffff;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(90deg) translateX(-30%);
    position: absolute;
    top: 50%;
    margin-left: .5vw;
}
#clcBtnSet .onTop{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 10%;
    background: #FFFFFF;
    display:none;
}
#clcBtnSet .onBottom{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10%;
    background: #FFFFFF;
    display:none;
}
.clcForm{
    background:#FFFFFF;
    padding:20px;
}
.clcForm h3{
    font-size:140%;
    margin-bottom:15px;
    display: block;
}
.clcForm .grid37{
    display: grid;
    grid-template-columns: calc(25% - 8px) calc(75% - 2px);
    gap: 10px;
    align-items: self-start;
    margin-bottom:15px;
}
.clcForm select, .clcForm input, .clcForm textarea{
    border: none;
    background: #fde3de;
    padding: 10px;
    color: #58646b;
    font-size: 100%;
    font-family: 'Noto Sans HK', 'Noto Sans SC', sans-serif;
    width:calc(100% - 20px);
}
.clcForm select{
    width:100%;
}
.clcForm .datepicker{
    width:calc(100% - 65px);
}
.clcForm textarea::placeholder {
  color: #b48779;
  opacity: 1; /* Firefox 預設會降低不透明度，需手動設為 1 */
}

.clcForm .grid333{
    display: grid;
    grid-template-columns: 1fr 2fr  1fr;
    gap: 10px;
    align-items: self-start;
    margin-bottom:15px;
    align-items: center;
}
.clcForm .grid13{
    display: grid;
    grid-template-columns: calc(25% - 8px) calc(75% - 2px);
    gap: 10px;
    align-items: self-start;
    margin-bottom:15px;
    align-items: center;
}
.clcForm .grid13.in{
    margin-bottom:10px;
}
.clcForm .grid1111c{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    align-items: self-start;
    margin-bottom:15px;
    align-items: center;
}
.clcForm .datepicker{
    background-image: url(/images/clc_form/ico_ca.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding-left:55px;
}
.flatpickr-rContainer {
    width: 100%;
}
.flatpickr-days, .dayContainer{
    width:100% !important;
    max-width:100% !important;
}
.flatpickr-day{
    max-width:none !important;
}
.clcForm .tnc{
    text-align: center;
    margin: 40px 0;
}
.clcForm .tnc a{
    color:#516269 !important;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 768px) {
#clcBtnSet > a > .title{
    font-size: 140%;
    padding: 10px 20px 10px 10px;
}
#clcBtnSet .triangle {
    width: 14px;
    height: 10px;
}
.clcForm br{
    display:none;
}
.clcForm .tnc p{
    text-align: left;
}
}
.clcForm .tnc input[type=checkbox]{
    cursor: pointer;
}
.clc-custom-modal{
    position: relative;
    background: #fff2f0;
    padding: 20px;
    display:none;
}
.clc-custom-modal > div{
}
.clc-modal-header{
    text-align: left;
}
.clc-modal-header button{
    position: absolute;
    right: 20px;
    border: none;
    background: #556268;
    border-radius: 100px;
    width: 30px;
    height: 30px;
    color:#FFFFFF;
}
.clc-modal-title{
    font-size: 130%;
}
.clc-modal-body{
    margin: 20px 0;
}
.clc-modal-footer{
    text-align: left;
}
.clc-modal-footer button{
    background: #556268;
    color: #FFFFFF;
    border: none;
    padding: 8px 20px;
    border-radius: 3px;
}
.clc-footer{
    text-align: center;
    margin-top: 40px;
}
.clc-footer button{
    background: #556268;
    color: #FFFFFF;
    border: none;
    padding: 8px 30px;
    border-radius: 3px;
    margin-bottom: 20px;
}
.clc-footer button[type="reset"]{
    background: #88979e;
}

.form-control-74 {
    --form-control-color: #556268;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 1.5em;
    text-align: left;
    width: fit-content;
    margin: auto;
}
.form-control-74 input {
    -webkit-appearance: none;
    appearance: none;
    background-color: #FEE2DF;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.5em;
    height: 1.5em;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}
.form-control-74 input:checked::before {
    transform: scale(1);
}
.form-control-74 input::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
    background-color: CanvasText;
}

@media (max-width: 768px) {
    #clcBtnSet, #clcBtnSet2, .clcForm .grid37, .clcForm .grid333, .clcForm .grid13, .clcForm .grid1111c {
        grid-template-columns: 1fr;
    }
    #clcBtnSet{
        margin-bottom:20px;
    }
    #clcBtnSet2{
        display:none;
    }
}
.flatpickr-weekdays{
    background: #fee2de !important;
}

/* 隱藏預設的月份選擇和箭頭 */
.flatpickr-month .flatpickr-monthDropdown-months,
.flatpickr-prev-month,
.flatpickr-next-month {
    display: none !important;
}

/* 自定義按鈕容器樣式 */
.month-button-container {
    display: flex;
    justify-content: space-between; /* 改為均分空間 */
    gap: 5px;                       /* 按鈕間距 */
    padding: 8px 10px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.month-btn {
    flex: 1;                        /* 讓三個按鈕等寬 */
    padding: 6px 2px;               /* 縮減左右內距以容納文字 */
    border: 1px solid #dee2e6;
    background: #ffffff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;                /* 稍微縮小字體確保不換行 */
    font-weight: 500;
    white-space: nowrap;            /* 強制不換行 */
    transition: all 0.2s;
}

.month-btn.active {
    background: #ff7e5f;
    color: #ffffff;
    border-color: #ff7e5f;
    box-shadow: 0 2px 4px rgba(0,123,255,0.2);
}

.month-btn:hover:not(.active) {
    background: #e9ecef;
}
/* 日曆格子容器改為相對定位 */
.flatpickr-day {
    position: relative !important;
}

/* 「滿 / Full」標籤樣式 */
.slot-full-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(220, 53, 69, 0.85); /* 半透明紅色 */
    color: white;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    pointer-events: none; /* 確保標籤不影響鼠標事件 */
    white-space: nowrap;
    z-index: 3;
    font-weight: bold;
    line-height: 1.2;
}

/* 如果格子本身被禁用，確保標籤仍然清晰 */
.flatpickr-day.flatpickr-disabled .slot-full-label {
    opacity: 1;
}

/* 調整日子數字的透明度，讓「滿」字更突出 */
.flatpickr-day.has-full-label {
    color: rgba(0, 0, 0, 0.3) !important;
}