@font-face {
    font-family: 'GenSenRounded2TW_B';
    src: url("./font/GenSenRounded2TW-B.otf");
}

@font-face {
    font-family: 'Noto Sans TC';
    src: url('./font/NotoSansTC-VariableFont_wght.ttf');
}

html {
	background-color: #FFF3EB;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
	font-family: "Noto Sans TC", serif;
    color: #9A5E32;
    text-align: center;
    background-color: #FFF3EB;
}

.mobile_mock {
    height: 100%;
    width: 100%;
    /* max-height: 700px; */
    max-width: 414px;
    
    background-color: #FFF3EB; /* 模擬手機內部背景 */
    border: 1px solid #ccc;  /* 加個邊框更像手機 */
    box-shadow: 0 0 20px rgba(0,0,0,0.2); /* 陰影 */
    overflow-y: hidden;
}

.container {
    background-color: #FFF3EB;
    min-height: calc(100vh - 72px);
    height: 100%;
    width: 100%;
    max-width: 100vw;
    padding-top: 10px;
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: 32px;
    overflow-x: hidden;
}

/* #log {
    font-family: Kai;
} */

/* ------------ Button ------------ */

.btn_Group {
    height: fit-content;
    /* margin-top: 34px; */
    position: absolute;
    bottom: 40px;

    padding: 0px 32px;

    width: 100%;

    z-index: 5;
}

.edit_Txt_Btn_Group,
.edit_Persona_Btn_Group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;

    width: 100%;
}



.edit_Img_Confirm_Group,
.edit_Img_menu_Group,
/* .edit_Txt_Btn_Group, */
.state_Btn_Group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;

    width: 100%;
}

.state_Btn_Group {
    margin-top: 24px;
}

.btn_main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 18px;
    gap: 4px;

    width: 100%;
    height: 48px;

    /* UI/主色 */
    background: #A66C44;
    /* M3/Elevation Light/1 */
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    border-radius: 16px;

    flex-grow: 1;

    font-weight: 700;
    font-size: 25px;
    line-height: 150%;
    
    /* UI/輔色 */
    color: #FFFFFF;
}

.btn_main:hover {
    color: #F0F0F0;
    background-color: #753911;
}

.btn_main:disabled {
    color: #43200e;
    background-color: #c7c7c7;
}

.btn_main_column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    gap: 4px;

    width: 100%;
    height: 106px;

    /* UI/主色 */
    background: #A66C44;
    /* M3/Elevation Light/1 */
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    border-radius: 16px;

    flex-grow: 1;

    font-weight: 700;
    font-size: 25px;
    line-height: 150%;
    
    /* UI/輔色 */
    color: #FFFFFF;
}

.btn_main_white_column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
    gap: 5px;

    width: 100%;
    height: 108px;

    /* UI/輔色 */
    background: #FFFFFF;
    /* M3/Elevation Light/1 */
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    border-radius: 16px;

    align-self: stretch;
    flex-grow: 1;

    font-weight: 700;
    font-size: 25px;
    line-height: 150%;

    /* UI/主色 */
    color: #A66C44;
}

.btn_main_white_column:hover {
    color: #F0F0F0;
    background-color: #753911;
}

.btn_main_white_column:disabled {
    color: #43200e;
    background-color: #c7c7c7;
}

.btn_main_white {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    gap: 4px;

    width: 100%;
    height: 48px;

    /* UI/輔色 */
    background: #FFFFFF;
    /* M3/Elevation Light/1 */
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    border-radius: 16px;

    flex-grow: 1;


    font-weight: 700;
    font-size: 25px;
    line-height: 100%;

    /* UI/主色 */
    color: #A66C44;
}

.btn_main_white:hover, .btn_main_white:disabled {
    color: #70391D;
    background-color: #F0F0F0;
}

.btn_main_Green {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 18px;
    gap: 4px;

    width: 100%;
    height: 48px;

    /* 漸層 綠 */
    background: linear-gradient(180deg, #B1BF34 0%, #3F8243 100%);
    /* M3/Elevation Light/1 */
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    border-radius: 16px;

    /* UI/副標題 25 Bold */
    font-weight: 700;
    font-size: 25px;
    line-height: 150%;

    /* UI/輔色 */
    color: #FFFFFF;
}

.btn_main_Green:hover, .btn_main_Green:disabled {
    color: #70391D;
    background: #F0F0F0;
    border: 0px;
}

.circle_btn {
    height: 48px;
    width: 48px;
    background-color: #FFFFFF;
    border: 0px;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle_btn:disabled {
    color: #70391D;
    background-color: #F0F0F0;
}

/* ---- Title ---- */

.header {
    width: 100%;
    height: 72px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    /* gap: 10px; */
    isolation: isolate;

    /* UI/主色 */
    background: #A66C44;
}

.title {
}

.main_title {

    /* UI/副標題 25 Bold */
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 150%;
    letter-spacing: 0.04em;

    width: fit-content;

    /* UI/輔色 */
    color: #FFFFFF;


    /* Inside auto layout */
    flex: none;
    order: 3;
    flex-grow: 1;
    z-index: 3;

    margin-left: 48px;


}

.sub_title {
    color: #9A5E32;
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: bold;
}

.home_Btn {

    /* display: none; */

    /* cursor: pointer; */

    background: transparent;
    border: 0px;
    cursor: pointer;

    position: flex;
    /* left: 0px; */

    /* display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 6px; */

    width: 32px;
    height: 32px;
    /* Inside auto layout */
    
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 5;
}

#Btn_previousImage {
    display: none;
}

#showState {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    gap: 4px;

    margin: 0 auto;
    width: max-content;
    height: 28px;

    /* UI/彈窗底色 */
    background: #F9E8DC;
    border-radius: 16px;

    /* Inside auto layout */
    flex: none;
    order: 3;
    flex-grow: 0;
    z-index: 1;

}

#state_icon {

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #F66464;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

#state_txt {

    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.04em;

    /* UI/主色 */
    color: #A66C44;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.textColor_primary {
    color: #9A5E32;
}

.main_hr {
    /* Rectangle 234 */

    height: 4px;

    margin-bottom: 20px;

    /* UI/彈窗底色 */
    background: #F9E8DC;
    border-radius: 2px;
    transform: matrix(1, 0, 0, -1, 0, 0);
}

/* ---- Silder ---- */

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    background: #E3C1AA;
    border-radius: 15px;
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

/* .slider:hover,
.slider:focus {
    opacity: 1;
} */

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    /* UI/輔色 */
    background: #FFFFFF;
    /* UI/主色 */
    border: 9px solid #A66C44;
    border-radius: 50%;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #A66C44;
    cursor: pointer;
}

/* ------------ input_Area ------------ */

/* #input_prompt_area, */
#upload_img_area {
    margin-top: 32px;
    
    width: 100%;
    aspect-ratio: 1/1;

    padding: 8px;

    /* UI/輔色 */
    background: #FFFFFF;
    border-radius: 20px;
}

#input_prompt_area {

    margin-top: 60px;

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 10px;

    width: 100%;
    /* aspect-ratio: 1/1; */
    height: 100%;
}

#input_prompt_box,
#upload_img_box {

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    /* gap: 24px; */

    width: 100%;
    /* aspect-ratio: 1/1; */
    height: 100%;

    background: linear-gradient(180deg, #FFFDFB 0%, #FFEEE1 100%);
    /* UI/主色 淺 */
    border: 4px solid #C58D67;
    border-radius: 16px;
}

/* ------------ input_prompt ------------ */
#input_area {
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 18px;
    gap: 4px;

    width: 240px;
    height: 48px;

    margin-top: 24px;

    /* UI/輔色 */
    background: #FFFFFF;
    border-radius: 16px;  

    background: linear-gradient(white, white) padding-box,
                linear-gradient(to bottom, #C58D67, #A66C44) border-box;
    border-radius: 16px;
    border: 2px solid transparent;
}

#input_prompt {
    
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 36px;
    gap: 10px;

    width: 100%;
    height: 120px;

    /* UI/輔色 */
    background: #FFFFFF;
    /* UI/主色 */
    border: 3px solid #A66C44;
    border-radius: 20px;

    color: #70391D;
    text-align: left;
    font-weight: bold;

    font-weight: 700;
    font-size: 25px;
    line-height: 150%;

    overflow: hidden;
}

/* #input_prompt, */
#input_element,
#display_prompt {
    height: 100%;
    /* padding-top: 18px; */
    display: table-cell;
    align-items: center;
    justify-self: center;
    text-align: center;
    font-size: 16px;
    font-weight: bolder;
    border-width: 0px;
    color: #70391D;
    overflow: hidden;
    resize: none;
    background-color: transparent;
}

#input_prompt:focus {
    outline: none !important;
}

::placeholder {
    color: #C58D67;
}

/* ------------ Sample ------------ */

.sample_area {
    margin-top: 50px;
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* gap: 16px; */

    width: 100%;

    padding: 0;
}

#Btn_show_sample {

    /* transition: color 0.2s ease-in-out, background 0.2s ease-in-out; */
    transition: all 0.4s ease-in-out;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    
    width: 100%;
    height: 39px;

    /* UI/彈窗底色 */
    background: #F9E8DC;
    border-radius: 16px;
    border: 0px;

    font-weight: 700;
    font-size: 16px;
    line-height: 150%;

    /* UI/主色 */
    color: #A66C44;
}

/* 展開時的樣式 */
#Btn_show_sample.expand {
    background: #C58D67;
    border-radius: 16px 16px 0px 0px;
    color: #FFFFFF;
}

.sample_box {
    width: 100%;
    height: 0;

    overflow: hidden;
    transition: height 0.3s ease-in-out; /* 平滑展開動畫 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;

    padding: 0;

    /* UI/彈窗底色 */
    background: #F9E8DC;
    border-radius: 0px 0px 16px 16px;
}

/* 展開時的樣式 */
.sample_box.active {
    height: 186px; /* 展開後的高度 */
    padding: 16px;
}


.sample_item_title {
    width: fit-content;
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 120px;

    font-weight: 700;
    font-size: 16px;
    line-height: 150%;

    /* UI/主色 */
    color: #A66C44;
}

.sample_item_title p {
    margin: 0;
}

.sample_item {
    width: fit-content;
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* ------------ notice_area ------------ */

.notice_area {
    margin-top: 12px;
    gap: 5px;

    display: none;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.notice_title {
    margin: 0;

    font-weight: 700;
    font-size: 25px;
    line-height: 150%;

    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.04em;

    /* UI/主色 */
    color: #A66C44;
}

.notice_content {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 24px 0px;

    width: 348px;
    height: 84px;

    /* UI/輔色 */
    background: #FFFFFF;
    border-radius: 16px;
}

.notice_content_txt {
    margin: 0;
    
    font-weight: bold;
    font-size: 16px;
    line-height: 150%;

    display: flex;
    align-items: center;
    text-align: center;

    /* UI/主色 淺 */
    color: #A66C44;
}

/* ------------ image_generator ------------ */

.image_generator {
    height: 100%;
    /* max-height: 500px; */
    width: 100%;
    /* padding-top: 24px; */
    /* padding-left: 32px;
    padding-right: 32px; */
    /* padding-bottom: 24px; */
    /* margin-left: 5px; */

    display: flex;
    justify-content: center;
}

.image_display_area {
    margin-top: 36px;
    /* margin-bottom: 15px; */
    width: 100%;
    height: fit-content;
    /* display: flex; */
    justify-content: center;

    padding: 0px;
}

#AI_img_area {
    height: fit-content;
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 20px;
    /* display: flex; */
    justify-self: center;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

#AI_img_box {
    /* height: 100%; */
    aspect-ratio: 1/1;
    width: 100%;
    background-color: #F9E8DC;
    border: 4px solid #C58D67;
    border-radius: 16px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;

    /* padding: 11px 32px 17px 32px; */
}

.loading_box {
    /* margin-top: 29px; */
}

.txt_loading {
    color: #9A5E32;
    font-weight: bold;
    font-size: 22px;
    text-align: left;
    
    height: max-content;
    margin: 0px;
}

#img_loading {
    /* margin-left: 106px; */
    align-items: center;

    /* animation-name: bounce2;
    animation-duration: 1.8s;
    animation-iteration-count: infinite; */
}

#img_AI, 
#img_AI_Canva,
#img_AI_with_Txt {
    border-radius: 16px;

    width: 100%;
    aspect-ratio: 1/1;
}

.form-select {
    width: fit-content;
    display: inline;
}

.progress_area {
    margin-top: 30px;
}

.progress {
    /* background-color: #FFFFFF;
    height: 25px; */
    margin-top: 12px;

    padding: 3px;

    width: 100%;
    height: 24px;

    box-sizing: border-box;

    /* UI/輔色 */
    background: #FFFFFF;
    /* UI/主色 淺 */
    border: 3px solid #C58D67;
    border-radius: 120px;
}

.progress-bar {
    /* background-color: #688955;
    font-weight: bold; */

    height: 12px;

    /* 漸層 綠 */
    background: linear-gradient(180deg, #B1BF34 0%, #3F8243 100%);
    border-radius: 120px;
}

.success_generate {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0px;

    width: 100%;
    height: 64px;

    margin-top: 12px;

    /* 白底漸層 */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);

    font-weight: 700;
    font-size: 25px;
    line-height: 150%;

    /* UI/主色 */
    color: #A66C44;

}

.success_generate_hr {
    margin: 0 auto;
    width: 100%;
    height: 1px;

    /* 棕線漸層 */
    background: linear-gradient(90deg, rgba(197, 141, 103, 0) 0%, #C58D67 50%, rgba(197, 141, 103, 0) 100%);
}

/* ------------ Animation ------------ */

.rotating {
    animation: rotate 1.5s infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.bounce {
    animation: bounce 2s ease infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

/* ------------ Swal 2 ------------ */

div:where(.swal2-container) div:where(.swal2-popup) {
    background: #FFF3EB;
    border: 2px solid #FFFFFF;
    color: #A66C44;

    border-radius: 16px;
}

div:where(.swal2-container) h2:where(.swal2-title) {
    font-weight: bolder;
    padding-top: 32px;
    font-size: 28px;
}

div:where(.swal2-container) div:where(.swal2-html-container) {
    font-weight: bold;
    font-size: 20px;
    padding-top: 15px;
    padding-left: 24px;
    padding-right: 24px;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    padding: 5px 18px;

    width: 152px;
    height: 48px;

    /* UI/主色 */
    background: #A66C44;
    /* M3/Elevation Light/1 */
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    border-radius: 16px;

    font-weight: 700;
    font-size: 25px;

    /* UI/輔色 */
    color: #FFFFFF;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel) {

    padding: 5px 18px;

    width: 152px;
    height: 48px;

    /* UI/主色 */
    background: #FFFFFF;
    /* M3/Elevation Light/1 */
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    border-radius: 16px;

    font-weight: 700;
    font-size: 25px;

    /* UI/輔色 */
    color: #A66C44;
}

.swal_htmlContainer_download {
    padding-top: 10px;
    padding-bottom: 18px;
}

.swal_image_download {
    margin-top: 20px;
    margin-bottom: 24px;
    border-radius: 16px;
}

.swal_title_previous {
    padding-top: 24px;
    font-size: 30px;
}

.swal_title_download {
    padding-top: 0px;
}

.swal_action_previous,
.swal_action_download {
    margin: 0px;
}

.swal_htmlContainer_previous {
    padding-top: 24px;
    padding-bottom: 24px;

    font-size: 20px;
}

.swal_container_previous {
    padding-bottom: 24px;
}