/* 引用字體 */
@font-face {
    font-family: 'LINE Seed Sans';
    src: url('fonts/LINESeedTW_OTF_Rg.woff2') format('woff2'), url('fonts/LINESeedTW_OTF_Rg.woff') format('woff'),
        url('fonts/LINESeedTW_TTF_Rg.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Huiwen-mincho';
    src: url('fonts/Huiwenmincho-improved.woff2') format('woff2'),
        url('fonts/Huiwenmincho-improved.woff') format('woff'),
        url('fonts/Huiwenmincho-improved.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* --- 基本重置與設定 --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-image: url('images/bg.jpg');
    background-size: cover;
    background-attachment: fixed;
    font-family: 'LINE Seed Sans', 'Huiwen-mincho', 'Noto Sans TC', sans-serif;
}

.page_wrapper {
    width: 100%;
    padding: 2em 1em; /* 負責提供頁面整體的上下左右邊距 */
    display: flex;
    justify-content: center; /* 將內部的 main_container 水平置中 */
    flex-grow: 1; /* 讓它填滿 body 的可用空間，將 footer 推向底部 */
}

/* --- 主要容器 --- */
.main_container {
    width: 381px;
    display: flex;
    flex-direction: column; /* 讓內部元素由上到下排列 */
    align-items: center; /* 讓內部元素水平置中 */
}

/* --- Footer --- */
.footer {
    width: 100%;
    padding: 1.5em;
    background-color: #a08164; /* 底部的深色條 */
}
.footer_logo {
    display: block;
    margin: 0 auto;
    height: 26px;
}

/* --- 通用區塊樣式 --- */
.wait_time_section,
.artwork_section,
.info_section {
    width: 100%;
    padding: 2em 23px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.info_section {
    border-bottom: none;
}

.section_title {
    color: #4c4c4c;
    font-family: 'Huiwen-mincho', serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1.2px;
    margin-bottom: 0.5em;
    text-align: center;
}
.section_subtitle {
    color: #4c4c4c;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.56px;
    text-align: center;
    margin-bottom: 1.5em;
    text-align: center;
}

/* --- 等待時間區塊 --- */
.timer_display {
    display: flex;
    align-items: center;
    margin-bottom: 1.5em;
    justify-content: center; /* <-- 請加上這一行 */
    width: 100%; 
}
.time_icon {
    width: 30px;
    margin-right: 10px;
}
.timer_box {
    background: #f1e5cc;
    box-shadow: inset 0px 2px 4px #cab68b;
    border-radius: 10px;
    padding: 0.2em 1.5em;
    display: flex;
    align-items: baseline;
}
.timer_value {
    color: #4c4c4c;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
}
.timer_unit {
    color: #80654c;
    font-size: 14px;
    font-weight: 700;
    margin-left: 0.8em;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.notice {
    position: relative; /* 讓內部絕對定位的元素有所依據 */
    height: 290px;
    width: 335px;
    margin-top: 10px;
    display: flex;
    flex-direction: column; /* 內部元素垂直排列 */
    justify-content: center; /* 將所有內部元素在垂直方向上置中 */
}

.notice_bg_blur {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    background: rgba(254, 248, 234, 0.36);
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 6px solid rgba(228, 211, 178, 0.5);
    filter: blur(3px);
}

.notice_bg_border {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    outline: 3px solid #9e8063;
    outline-offset: -1.5px;
}

.notice_text,
.notice_text_eng {
    color: #4c4c4c;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.84px;
    text-align: center;
    position: relative; /* 確保文字在背景之上 */
    z-index: 1;
    padding: 0 1em;
}
.notice_text_eng {
    margin-top: 1em;
}

/* --- 過期提示區塊 --- */
.expired {
    position: relative; /* 讓內部絕對定位的元素有所依據 */
    height: 240px;
    width: 335px;
    margin-top: 10px;
    display: flex;
    flex-direction: column; /* 內部元素垂直排列 */
    justify-content: center; /* 將所有內部元素在垂直方向上置中 */
}

.expired_bg_blur {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    background: rgba(254, 248, 234, 0.36);
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 6px solid rgba(228, 211, 178, 0.5);
    filter: blur(3px);
}

.expired_bg_border {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    outline: 3px solid #9e8063;
    outline-offset: -1.5px;
}

.expired_text,
.expired_text_eng {
    color: #4c4c4c;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.84px;
    text-align: center;
    position: relative; /* 確保文字在背景之上 */
    z-index: 1;
    padding: 0 1em;
}
.expired_text_eng {
    margin-top: 1em;
}

/* --- 作品與介紹區塊 --- */
.image_container {
    width: 100%;
    background: #ebe7dc;
    border: 2px solid #ceb196;
}
.artwork_image,
.intro_image {
    width: 100%;
    display: block;
}

.download_notice {
    margin-top: 1.5em;
    color: #4c4c4c;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}
.btn_download {
    display: block;
    width: 227px;
    height: 56px;
    margin: 1em auto 0 auto;
    background: linear-gradient(165deg, #a08164 0%, #795f47 100%);
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    color: #f8f0e0;
    font-size: 16px;
    line-height: 56px;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.96px;
    transition: opacity 0.2s;
}
.btn_download:hover {
    background: linear-gradient(165deg, #be8045 0%, #a08164 100%);
}

.btn_download:active {
    background: linear-gradient(165deg, #623d1b 0%, #a08164 100%);
}