:root {
    --pink: #df6f8f;
    --pink-deep: #a94b67;
    --pink-text: #d85e76;
    --brown: #8d4548;
    --blue: #3f91cb;
    --white: #fff;
    --panel-max: 820px;
    --text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}

html[lang="ja"] body {
    font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}
html[lang="zh-TW"] body {
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
html[lang="zh-CN"] body {
    font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
html[lang="en"] body {
    font-family: Arial, "Noto Sans", sans-serif;
}

body {
    min-height: 100vh;
    color: var(--brown);
    background: #f7c9d9 url("../images/bg.webp") center 20% / cover no-repeat fixed;
    padding-top: 8rem;
    overflow-x: hidden;
}

body#bonus,
body#result{
    padding-top: 12rem;
}


.site {
    position: relative;
    min-height: 100vh;
    padding: 0px 18px 0px;
}

/* ========================================
   主視覺
======================================== */
.cover {
    position: relative;
    z-index: 99;
    width: min(960px, 94vw);
    margin: 0 auto 6px;
    text-align: center;
}

.cover__logo {
    width: clamp(180px, 23vw, 250px);
    margin: 0 auto 1rem;
}

.cover__title {
    width: min(680px, 94vw);
    margin: -2rem auto 0;
    opacity: 0;
}
/* ========================================
   裝飾角色
======================================== */

.deco {
    position: fixed;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 10px 12px rgba(123, 48, 74, .12));
}
.deco--feather {
    opacity: .72;
    mix-blend-mode: screen;
}
.deco--feather-1 { width: 190px; left: 3%; top: 46%; transform: rotate(-14deg); }
.deco--feather-2 { width: 160px; right: 5%; top: 60%; transform: rotate(12deg); }

/* ----- 主視覺角色 ----- */
.deco-ch {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    user-select: none;
    height: auto;
    filter: drop-shadow(0 8px 10px rgba(118, 52, 74, .08));
}

.deco-ch--left {
    width: clamp(270px, 29vw, 300px);
    top: -1rem;
    left: 16%;
    /* left: max(-36px, calc(50% - 720px)); */
}

.deco-ch--right {
    width: clamp(270px, 29vw, 350px);
    top: -2rem;
    right: 11.5%;
    /* right: max(-36px, calc(50% - 720px)); */
}

.deco-ch--cat {
    width: clamp(86px, 9vw, 138px);
    top: clamp(350px, 20vw, 100px);
    right: 35%;
    transform: translateX(-50%) rotate(-3deg);
}


/* ----- 表單框前景角色 ----- */
.frame-shell {
    isolation: isolate;
}

.frame-inner {
    z-index: 5;
}

.panel-ch {
    position: absolute;
    z-index: 8;
    pointer-events: none;
    user-select: none;
    height: auto;
    filter: drop-shadow(0 10px 10px rgba(104, 54, 67, .08));
}

.panel-ch--left {
    width: clamp(245px, 25vw, 400px);
    left: -40%;
    bottom: -140px;
}

.panel-ch--right {
    width: clamp(230px, 24vw, 340px);
    right: -35%;
    bottom: -96px;
}








/* ========================================
   三段式共用內容框
   frame_t：標題列
   frame_m：內容區，可依內容高度伸縮
   frame_b：底框
======================================== */
.content-frame {
    position: relative;
    z-index: 5;
    width: min(var(--panel-max), 94vw);
    margin: 1rem auto 5rem;
}

.content-frame_t {
    position: relative;
    width: 100%;
    aspect-ratio: 1500 / 150;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../images/frame/frame_t.webp") center bottom / 100% 100% no-repeat;
    /* margin-top: 5rem; */
}

.frame-title {
    width: 95%;
    max-width: 760px;
    margin: 1rem auto 0;

    /* 字色：偏粉白，不用純白 */
    color: #fff7f8;

    font-size: clamp(17px, 1.9vw, 24px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .03em;
    text-align: center;

    /*
     * 仿示意圖：
     * 深紅棕外框 + 粉白高光 + 柔和陰影
     */
    text-shadow:
        -2px -2px 0 #6b142a, 
        2px -2px 0 #6b142a,
        -2px 2px 0 #6b142a,
        2px 2px 0 #6b142a,
        -3px 0 0 #6b142a,
        3px 0 0 #6b142a,
        0 -3px 0 #6b142a,
        0 3px 0 #6b142a,
        0 2px 0 rgba(255, 255, 255, .9), 0 4px 5px rgba(120, 45, 60, .18);
}
.content-frame_m {
    position: relative;
    width: 100%;
    min-height: 300px;
    background: url("../images/frame/frame_m.webp") center center / 100% 100% no-repeat;
}
    #bonus .content-frame_m,
    #result .content-frame_m{
        min-height:360px;
    }

.content-frame__inner {
    position: relative;
    padding: clamp(10px, 3vw, 26px) clamp(50px, 7vw, 85px) clamp(10px, 3.2vw, 26px);
}

.content-frame_b {
    width: 100%;
    aspect-ratio: 1500 / 80;
    background: url("../images/frame/frame_b.webp") center top / 100% 100% no-repeat;
}

/* ========================================
   文案
======================================== */
.lead {
    margin-bottom: clamp(16px, 2vw, 25px);
    text-align: center;
    color: var(--pink-text);
    font-size: clamp(15px, 1.45vw, 19px);
    font-weight: 700;
    line-height: 1.8;
    text-shadow: var(--text-shadow);
}

.lead p + p {
    margin-top: .2em;
}

.description {
    margin: 0 auto clamp(16px, 2.2vw, 26px);
    max-width: 680px;
    color: #8d5856;
    font-size: clamp(13px, 1.15vw, 15px);
    line-height: 1.8;
    text-align: center;
}


/* ========================================
   表單
======================================== */
.form {
    width: min(740px, 100%);
    margin: 0 auto;
}

.form-row {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 0px;
    margin-bottom: 2rem;
}

.form-row--simple {
    grid-template-columns: 165px 1fr;
}

.form-row--password {
    grid-template-columns: 130px 1fr;
}

.form-label {
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 800;
    text-align: center;
    color: #8a4546;
    margin-bottom: 0;
}

.input-wrap {
    position: relative;
}

.form-input {
    width: 100%;
    height: 50px;
    border: 2px solid #dfa0b1;
    border-radius: 7px;
    padding: 0 50px 0 15px;
    color: #6f3d42;
    background: rgba(255, 224, 234, .72);
    outline: none;
    box-shadow: inset 0 1px 3px rgba(122, 64, 85, .05);
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.form-input:focus {
    border-color: #d36b8c;
    background: rgba(255, 237, 243, .95);
    box-shadow: 0 0 0 4px rgba(217, 104, 137, .12);
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: .78;
}

.password-toggle:hover {
    opacity: 1;
}

.password-toggle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ========================================
   圖片底按鈕 + 系統文字
======================================== */
.btn {
    --btn-image: url("../images/btn/btn-blue.webp");
    position: relative;
    min-width: 225px;
    height: 60px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: var(--btn-image);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    font-size: clamp(16px, 1.1vw, 20px);
    font-weight: 800;
    letter-spacing: .02em;
    text-align: center;
    text-shadow: 0 2px 2px rgba(28, 74, 109, .32);
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease;
    white-space: nowrap;
}

.btn:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.btn:active {
    color: #fff !important;
    transform: translateY(0);
    border: none !important;
}

.btn--pink {
    --btn-image: url("../images/btn/btn-pink.webp");
    text-shadow: 0 2px 2px rgba(119, 38, 64, .3);
}


.btn--small {
    min-width: 148px;
    height: 46px;
    font-size: 14px;
}

.form-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(16px, 3vw, 42px);
    margin-top: clamp(16px, 2.4vw, 28px);
}
    #bonus .form-actions,
    #result .form-actions{
        margin-top: clamp(22px, 2.8vw, 40px);
    }




/* ========================================
   bonus｜特典碼輸入  / 注意事項內容
======================================== */
#bonus .content-frame_m {
    min-height: 0;
}

#bonus .bonus-code-inner {
    padding-bottom: clamp(20px, 3vw, 32px);
}

#bonus .bonus-code-description {
    margin-bottom: clamp(18px, 2.2vw, 26px);
    font-size: clamp(14px, 1.25vw, 16px);
    font-weight: 700;
    color: var(--pink-text);
}

#bonus .bonus-code-form {
    margin-bottom: clamp(28px, 4vw, 42px);
}

#bonus .bonus-code-row {
    margin-bottom: 0;
}

#bonus .bonus-code-row .form-input {
    padding-right: 15px;
}

#bonus .bonus-notice {
    width: min(740px, 100%);
    margin: 0 auto;
    padding-top: clamp(18px, 2.4vw, 28px);
    border-top: 1px solid rgba(216, 94, 118, .25);
}

#bonus .bonus-notice__title {
    margin: 0 0 12px;
    color: var(--pink-text);
    font-size: clamp(16px, 1.4vw, 19px);
    font-weight: 800;
    line-height: 1.5;
}

#bonus .bonus-notice__list {
    margin: 0;
    padding-left: 1.7em;
    color: #805251;
    font-size: clamp(12px, 1.05vw, 14px);
    line-height: 1.7;
}

#bonus .bonus-notice__list li {
    padding-left: .25em;
}

#bonus .bonus-notice__list li + li {
    margin-top: .45em;
}



/* ========================================
   結果頁
======================================== */
.result {
    max-width: 740px;
    margin: 0 auto;
    text-align: center;
}

.result__title {
    margin-bottom: 16px;
    color: #e05f75;
    font-size: clamp(19px, 1.9vw, 26px);
    font-weight: 900;
    line-height: 1.5;
}

.result__text {
    color: #754948;
    font-size: clamp(14px, 1.25vw, 16px);
    line-height: 1.8;
}


/* ========================================
   Bootstrap 共用調整
   - Bootstrap 負責容器 / breakpoint / utility
   - 專案 CSS 保留活動頁視覺
======================================== */
.container-fluid {
    --bs-gutter-x: 0;
    padding-left: 5%;
    padding-right: 5%;
}

.form-control.form-input {
    color: #6f3d42;
    background-color: rgba(255, 224, 234, .72);
    background-image: none;
}

.form-control.form-input:focus {
    color: #6f3d42;
    background-color: rgba(255, 237, 243, .95);
    border-color: #d36b8c;
    box-shadow: 0 0 0 4px rgba(217, 104, 137, .12);
}

/* 其他流程頁左右角色 */
.page-character {
    position: absolute;
    z-index: 3;
    top: clamp(120px, 10vw, 190px);
    width: clamp(250px, 25vw, 360px);
    height: auto;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 8px 10px rgba(118, 52, 74, .08));
}

.page-character--left {
    left: max(-90px, calc(50% - 790px));
}

.page-character--right {
    right: max(-90px, calc(50% - 790px));
}





/* ========================================
   Index 首頁動態效果
   - 僅作用於 body#index
======================================== */

/* 主標：先進場 */
body#index .cover__title {
    animation:
        indexFadeUp .8s cubic-bezier(.22, .8, .3, 1) .08s both,
        titleBreathing 3.6s ease-in-out 1s infinite,
        titleGlow 4.8s ease-in-out 1s infinite;

    will-change: transform, opacity, filter;

}

/* 主視覺左右角色 */
body#index .deco-ch--left {
    animation: indexSlideInLeft .9s cubic-bezier(.22, .8, .3, 1) .18s both;
    will-change: transform, opacity;
}

body#index .deco-ch--right {
    animation: indexSlideInRight .9s cubic-bezier(.22, .8, .3, 1) .18s both;
    will-change: transform, opacity;
}

/* 若之後重新開啟中間小貓，會自動有漂浮效果 */
body#index .deco-ch--cat {
    animation:
        indexFadeUp .7s ease-out .55s both,
        indexFloatY 3.4s ease-in-out 1.25s infinite;
}

/* 內容框整體進場 */
body#index .content-frame {
    animation: indexFadeUp .85s cubic-bezier(.22, .8, .3, 1) .42s both;
    will-change: transform, opacity;
}

/* 內容框左右前景角色 */
body#index .panel-ch--left {
    animation: indexSlideInLeft .85s cubic-bezier(.22, .8, .3, 1) .62s both;
    will-change: transform, opacity;
}

body#index .panel-ch--right {
    animation: indexSlideInRight .85s cubic-bezier(.22, .8, .3, 1) .62s both;
    will-change: transform, opacity;
}

/* 內容文字與按鈕稍微延遲出現，讓進場層次更清楚 */
body#index .content-frame__inner .lead {
    animation: indexFadeUp .55s ease-out .66s both;
}

body#index .content-frame__inner .description {
    animation: indexFadeUp .55s ease-out .74s both;
}

body#index .content-frame__inner .form-actions {
    animation: indexSoftPop .55s ease-out .82s both;
}

/* 按鈕 hover：只做視覺回饋，不處理任何導頁 */
body#index .btn:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.06);
}

body#index .btn:active {
    transform: translateY(0) scale(.98);
}

/* 羽毛若之後重新啟用，會有輕微漂浮 */
body#index .deco--feather-1 {
    animation: indexFloatY 4.6s ease-in-out infinite;
}

body#index .deco--feather-2 {
    animation: indexFloatY 5.2s ease-in-out .7s infinite;
}

/* 尊重使用者系統的減少動態設定 */
@media (prefers-reduced-motion: reduce) {
    body#index .cover__title,
    body#index .deco-ch,
    body#index .panel-ch,
    body#index .content-frame,
    body#index .content-frame__inner .lead,
    body#index .content-frame__inner .description,
    body#index .content-frame__inner .form-actions,
    body#index .deco--feather {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    body#index .btn {
        transition: none;
    }
}

/* ========================================
   RWD
======================================== */
@media (max-width: 1441px) {
    body{
        padding-top: 6.5rem;
    }
    .deco-ch--cat{
        top: clamp(300px, 20vw, 100px);
    }
    .cover__logo{
        width: clamp(180px, 23vw, 200px);
    }
    .cover__title{
        width: min(550px, 94vw);
    }
    .content-frame{
        width: min(700px, 94vw);
        margin-top: -1.5rem;
    }

    .deco-ch--left{
        width: clamp(200px, 29vw, 230px);
        top: -4%;
        left: 13%;
    }
    .deco-ch--right{
        width: clamp(200px, 29vw, 250px);
        top: -4%;
        right: 12%;
    }
    .frame-title{
        font-size:clamp(17px, 1.9vw, 22px);
    }
    .lead{
        font-size: clamp(14px, 1.45vw, 16px);
    }
    .panel-ch--left{
        width:clamp(245px, 28vw, 380px);
        left: -48%;
        bottom: -143px;
    }
    .panel-ch--right{
        width:clamp(245px, 25vw, 330px);
        right: -40%;
    }


    .content-frame__inner{
        padding: clamp(10px, 3vw, 20px) clamp(50px, 7vw, 70px) clamp(10px, 3.2vw, 20px);
    }
}


@media (max-width: 1280px) {
    body,.site{
        min-height: auto;
    }
    .cover{
        margin: 5rem auto 6px;
    }
    .content-frame{
        margin: 1.5rem auto 5rem;
    }
}



@media (max-width: 991.98px) {
    body {
        padding-top: 64px;
    }
    .site {
        padding-top: 54px;
    }
    .cover{
        margin: 0rem auto 6px;
    }
    .content-frame {
        width:100%;
    }

    .content-frame__inner {
        padding: 26px 42px 34px;
    }
}

@media (max-width: 767.98px) {
    body {
        background-attachment: scroll;
        background-position: center top;
    }

    .site {
        padding: 64px 6px 42px;
    }

    .cover {
        margin-bottom: 2px;
    }

    .cover__logo {
        width: clamp(150px, 34vw, 180px);
    }

    .cover__title {
        width: min(96vw, 720px);
    }

    .deco-ch--cat,
    .deco--feather {
        display: none !important;
    }

    .content-frame {
        width: min(100%, 680px);
        max-width: calc(100vw - 8px);
    }

    .frame-title {
        width: 76%;
        margin-top: 2px;
        font-size: clamp(14px, 3.6vw, 18px);
        line-height: 1.3;
    }

    .content-frame_m {
        min-height: 0;
    }

    .content-frame__inner {
        padding: 22px clamp(24px, 7vw, 38px) 28px;
    }

    .lead {
        font-size: 15px;
        line-height: 1.7;
    }

    .description {
        font-size: 12px;
    }

    .form-row,
    .form-row--simple,
    .form-row--password {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-bottom: 16px;
    }

    .form-label {
        text-align: left;
    }

    .form-input {
        height: 48px;
    }

    .form-row > .btn {
        justify-self: start;
    }

    .btn {
        min-width: 160px;
        height: 48px;
        padding-inline: 18px;
    }

    .form-actions {
        gap: 12px;
        margin-top: 20px;
    }


    #bonus .bonus-code-row {
        grid-template-columns: 1fr;
    }

    #bonus .bonus-code-row .form-label {
        text-align: left;
    }

    #bonus .bonus-notice {
        padding-top: 20px;
    }

    #bonus .bonus-notice__list {
        padding-left: 1.55em;
        line-height: 1.65;
    }
    


}

@media (max-width: 575.98px) {
    body {
        padding-top: 58px;
    }
    body#bonus, body#result{
        padding-top: 5rem;
    }
    .site {
        padding-inline: 4px;
    }
    .frame-title {
        width: 74%;
        font-size: clamp(13px, 3.9vw, 20px);
    }
    .content-frame{
        margin-top: 0;
    }
    .content-frame_t{
        aspect-ratio:1500 / 250;
        background: url("../images/frame/frame_t_s.webp") center bottom / 100% 100% no-repeat;
    }
    .content-frame__inner {
        padding: 18px 22px 24px;
    }

    .lead {
        font-size: 14px;
    }

    .form-actions > .btn {
        width: min(100%, 240px);
    }

    .btn {
        min-width: 138px;
        font-size: 12px;
    }

    .btn--small {
        min-width: 138px;
    }


    #bonus .bonus-code-inner {
        padding-left: 22px;
        padding-right: 22px;
    }

    #bonus .bonus-notice__title {
        font-size: 15px;
    }

    #bonus .bonus-notice__list {
        font-size: 12px;
    }
}