* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #10182d;
    color: white;
    font-family: Arial, "Noto Sans TC", sans-serif;
}

.container {
    max-width: 560px;
    margin: 0 auto;
    padding: 45px 15px;
}


/* =====================================================
   頁首
===================================================== */

.page-header {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 120px;

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
    padding: 80px 40px 60px;
}

h1 {
    margin: 0;

    font-size: 28px;
    font-weight: 700;
    letter-spacing: 3px;

    color: white;
}

.info {
    margin-top: 8px;

    color: #737b8d;
    font-size: 15px;
    letter-spacing: 1px;
}


/* =====================================================
   第 1 頁大標題
===================================================== */

.page-header.test-page .main-title {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.page-header.test-page .main-title:hover {
    opacity: 0.75;
}


/* =====================================================
   第 2～6 頁網站標題
===================================================== */

.test-title {
    margin: 0;
    padding-top: 30px;

    text-align: center;

    font-size: 30px;
    font-weight: bold;
    letter-spacing: 3px;

    color: #f4f4f6;
}

.test-author {
    margin-top: 8px;

    text-align: center;

    font-size: 16px;
    color: #7f899f;
}


/* =====================================================
   頁面分類標題
===================================================== */

.page-title {
    margin: 10px 0 20px;

    text-align: center;

    font-size: 42px;
    font-weight: bold;
    letter-spacing: 5px;

    color: white;
}

.page-title::after {
    content: "";

    display: block;

    width: 42px;
    height: 2px;

    margin: 10px auto 0;

    background: #59657d;
    border-radius: 2px;
}

.url {
    font-size: 18px;
    margin-top: 4px;
}


/* =====================================================
   圖例
===================================================== */

.legend {
    display: flex;
    justify-content: center;
    gap: 18px;

    margin: 28px 0 20px;

    font-size: 14px;
    font-weight: bold;

    flex-wrap: wrap;
}

.dot {
    display: inline-block;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    vertical-align: middle;

    margin: 0 0 3px 2px;
}

.none {
    border: 3px solid #737b8d;
}

.blue {
    background: #72bdf2;
}

.green {
    background: #8FD957;
}

.pink {
    background: #ff72aa;
}


/* =====================================================
   瓶子排列
===================================================== */

#jar-container {
    display: grid;

    grid-template-columns: 1fr;

    gap: 16px;
}


/* =====================================================
   單一瓶子
===================================================== */

.jar-item {
    position: relative;

    display: grid;

    grid-template-columns: 90px 1fr 90px;
    grid-template-rows: 65px 90px;

    column-gap: 15px;
    row-gap: 0;

    min-height: 180px;

    padding: 15px 20px;

    background: #171f35;

    border: 1px solid #29334d;
    border-radius: 14px;

    text-align: left;
}

.jar {
    position: relative;

    width: 80px;
    height: 115px;

    margin: 0;

    grid-column: 1;
    grid-row: 1 / 4;

    align-self: center;

    cursor: pointer;
}


/* =====================================================
   瓶子 Hover → NG 按鈕
===================================================== */

.jar:hover ~ .ng-button {
    border-color: #ff4c4c;
    color: #ff6b6b;

    box-shadow:
        0 0 8px rgba(255, 76, 76, 0.45),
        0 0 16px rgba(255, 76, 76, 0.2);
}


/* =====================================================
   NG 狀態
===================================================== */

.jar-item.state-ng {
    border-color: #693b45;
    background: #1b1d2d;
}

.jar-item.state-ng .ng-button {
    background: #ff4c4c;
    border-color: #ff4c4c;
    color: white;

    box-shadow:
        0 0 8px rgba(255, 76, 76, 0.45),
        0 0 16px rgba(255, 76, 76, 0.2);
}

.jar-item.state-ng .jar:hover .ng-mark {
    opacity: 0.25;
}

.jar-item.state-ng:has(.ng-button:hover) .ng-mark {
    opacity: 0.25;
}


/* =====================================================
   瓶蓋
===================================================== */

.lid {
    position: absolute;

    top: 0;
    left: 13px;

    width: 64px;
    height: 27px;

    border: 3px solid #737b8d;
    border-radius: 6px 6px 3px 3px;

    z-index: 3;
}

.lid::after {
    content: "";

    position: absolute;

    left: -4px;
    top: 9px;

    width: 68px;
    height: 5px;

    border-top: 3px solid #737b8d;
    border-bottom: 3px solid #737b8d;
}


/* =====================================================
   瓶身
===================================================== */

.bottle {
    position: absolute;

    left: 3px;
    top: 24px;

    width: 84px;
    height: 101px;

    border: 3px solid #737b8d;
    border-radius: 27px 27px 18px 18px;

    overflow: hidden;
}


/* =====================================================
   液體
===================================================== */

.liquid {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 0%;

    background: #ff72aa;

    transition:
        height 0.2s ease,
        background 0.2s ease;
}


/* =====================================================
   不同狀態的溶液顏色
===================================================== */

.state-resist .liquid {
    background: #72bdf2;
}

.state-curious .liquid {
    background: #8FD957;
}

.state-like .liquid {
    background: #ff72aa;
}


/* =====================================================
   NG 紅色 X
===================================================== */

.ng-mark {
    display: none;

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    color: #ff4c4c;

    font-size: 76px;
    font-weight: 300;

    line-height: 1;

    z-index: 5;
}


/* =====================================================
   瓶子名稱
===================================================== */

.jar-name {
    grid-column: 2;
    grid-row: 1;

    align-self: center;

    min-height: auto;

    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;

    padding-bottom: 8px;

    border-bottom: 1px solid #414a61;
}


/* =====================================================
   目前狀態標籤
===================================================== */

.status-text {
    position: absolute;

    z-index: 10;

    margin: 0;
    padding: 5px 12px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: bold;

    color: white;

    white-space: nowrap;

    transform: translateX(-50%);

    pointer-events: none;
}

.status-text::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -5px;

    transform: translateX(-50%);

    width: 0;
    height: 0;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #737b8d;
}


/* =====================================================
   不同狀態的標籤
===================================================== */

.state-ng .status-text {
    visibility: hidden;
}

.state-resist .status-text {
    background: #72bdf2;
    color: white;
}

.state-resist .status-text::after {
    border-top-color: #72bdf2;
}

.state-neutral .status-text {
    background: #737b8d;
    color: white;
}

.state-neutral .status-text::after {
    border-top-color: #737b8d;
}

.state-curious .status-text {
    background: #8FD957;
    color: white;
}

.state-curious .status-text::after {
    border-top-color: #8FD957;
}

.state-like .status-text {
    background: #ff72aa;
    color: white;
}

.state-like .status-text::after {
    border-top-color: #ff72aa;
}


/* =====================================================
   拉桿區域
===================================================== */

.slider-area {
    position: relative;

    grid-column: 2 / 4;
    grid-row: 2;

    width: 100%;

    padding-top: 50px;
}


/* =====================================================
   拉桿
===================================================== */

.rating-slider {
    display: block;

    width: 100%;
    height: 6px;

    margin: 0;

    position: relative;
    top: -5px;

    appearance: none;

    border-radius: 6px;

    cursor: pointer;

    background: linear-gradient(
        to right,
        #6689a8 0%,
        #6689a8 31.25%,

        #666b78 31.25%,
        #666b78 37.5%,

        #49684d 37.5%,
        #49684d 68.75%,

        #8a5068 68.75%,
        #8a5068 100%
    );
}


/* =====================================================
   目前狀態亮色區域
===================================================== */

.slider-resist {
    background: linear-gradient(
        to right,
        #72bdf2 0%,
        #72bdf2 31.25%,

        #666b78 31.25%,
        #737b8d 37.5%,

        #49684d 37.5%,
        #49684d 68.75%,

        #8a5068 68.75%,
        #8a5068 100%
    );
}

.slider-neutral {
    background: linear-gradient(
        to right,
        #6689a8 0%,
        #6689a8 31.25%,

        #737b8d 31.25%,
        #737b8d 37.5%,

        #49684d 37.5%,
        #49684d 68.75%,

        #8a5068 68.75%,
        #8a5068 100%
    );
}

.slider-curious {
    background: linear-gradient(
        to right,
        #6689a8 0%,
        #6689a8 31.25%,

        #737b8d 31.25%,
        #737b8d 37.5%,

        #8FD957 37.5%,
        #8FD957 68.75%,

        #8a5068 68.75%,
        #8a5068 100%
    );
}

.slider-like {
    background: linear-gradient(
        to right,
        #6689a8 0%,
        #6689a8 31.25%,

        #737b8d 31.25%,
        #737b8d 37.5%,

        #49684d 37.5%,
        #49684d 68.75%,

        #ff72aa 68.75%,
        #ff72aa 100%
    );
}


/* =====================================================
   拉桿分類文字
===================================================== */

.slider-labels {
    grid-column: 2 / 4;
    grid-row: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;

    margin: 0 0 7px;

    position: relative;
    top: 7px;

    font-size: 13px;
    color: #737b8d;
}


/* =====================================================
   拉桿圓點
===================================================== */

.rating-slider::-webkit-slider-thumb {
    appearance: none;

    width: 25px;
    height: 25px;

    border-radius: 50%;

    background: #737b8d;

    cursor: pointer;
}

.rating-slider::-moz-range-thumb {
    width: 25px;
    height: 25px;

    border: none;
    border-radius: 50%;

    background: #737b8d;

    cursor: pointer;
}


/* =====================================================
   不同狀態的拉桿圓點
===================================================== */

.state-resist .rating-slider::-webkit-slider-thumb {
    background: #72bdf2;
}

.state-resist .rating-slider::-moz-range-thumb {
    background: #72bdf2;
}

.state-neutral .rating-slider::-webkit-slider-thumb {
    background: #737b8d;
}

.state-neutral .rating-slider::-moz-range-thumb {
    background: #737b8d;
}

.state-curious .rating-slider::-webkit-slider-thumb {
    background: #8FD957;
}

.state-curious .rating-slider::-moz-range-thumb {
    background: #8FD957;
}

.state-like .rating-slider::-webkit-slider-thumb {
    background: #ff72aa;
}

.state-like .rating-slider::-moz-range-thumb {
    background: #ff72aa;
}

.state-ng .rating-slider::-webkit-slider-thumb {
    visibility: hidden;
}

.state-ng .rating-slider::-moz-range-thumb {
    visibility: hidden;
}


/* =====================================================
   NG 按鈕
===================================================== */

.ng-button {
    grid-column: 3;
    grid-row: 1;

    align-self: center;

    width: 90px;
    height: 35px;

    margin: 10px 0 0;
    padding: 6px 12px;

    border: 1px solid #59657d;
    border-radius: 8px;

    background: transparent;
    color: #929bb0;

    font-size: 12px;
    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.ng-button:hover {
    border-color: #ff4c4c;
    color: #ff6b6b;

    box-shadow:
        0 0 8px rgba(255, 76, 76, 0.45),
        0 0 16px rgba(255, 76, 76, 0.2);
}

.ng-button.active {
    background: #ff4c4c;
    border-color: #ff4c4c;
    color: white;
}


/* =====================================================
   第 1 頁基本資料
===================================================== */

.profile-intro {
    width: auto;
    text-align: left;
}

.profile-intro h1 {
    margin: 0 0 18px;

    font-size: 42px;
    color: #f4f4f6;
}

.profile-intro .info {
    font-size: 18px;
    color: #7f899f;
}


/* =====================================================
   受試者名稱
===================================================== */

.subject-input {
    display: flex;

    width: 460px;
    height: 58px;

    margin-top: 110px;

    border: 3px solid #ba54c5;
    border-radius: 12px;

    overflow: hidden;

    background: #ffffff;
}

.subject-input input {
    flex: 1;

    min-width: 0;

    border: none;
    outline: none;

    padding: 0 22px;

    font-size: 22px;
    font-family: inherit;

    color: #ba54c5;
    background: #ffffff;
}

.subject-input input::placeholder {
    color: #737b8d;
}


/* =====================================================
   GO 按鈕
===================================================== */

.subject-input button {
    width: 110px;

    border: none;

    background: #ba54c5;
    color: #ffffff;

    font-size: 22px;
    font-family: inherit;
    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;
}

.subject-input button:hover {
    background: #b15dbc;
    font-size: 26px;
    text-shadow:
    0 0 8px rgba(255, 255, 255, 0.175);
}


/* =====================================================
   第 1 頁右側選項
===================================================== */

.profile-choices {
    display: flex;
    flex-direction: column;
    gap: 50px;

    width: 480px;
}

.choice-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;

    min-height: 150px;

    padding: 20px 35px;

    border: 2px solid #59657d;
    border-radius: 24px;

    background: rgba(89, 101, 125, 0.18);
}


/* =====================================================
   選項按鈕
===================================================== */

.option-button {
    width: 110px;
    height: 110px;

    border-radius: 50%;
    border: 4px solid #59657d;

    background: transparent;

    color: #a3aec3;

    font-size: 30px;
    font-family: inherit;
    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s,
        box-shadow 0.2s,
        transform 0.15s;
}

.option-button:hover {
    border-color: #72bdf2;
    color: #f4f4f6;

    box-shadow:
        0 0 18px rgba(114, 189, 242, 0.35);
}

.option-button.selected {
    background: #72bdf2;
    border-color: #72bdf2;

    color: #ffffff;

    box-shadow:
        0 0 22px rgba(114, 189, 242, 0.55);
}

.option-button:active {
    transform: scale(0.95);
}


/* =====================================================
   SW 比較寬
===================================================== */

.type-box .option-button {
    width: 105px;
    height: 105px;
}

.type-box .option-button[data-value="SW"] {
    font-size: 27px;
}

/* =====================================================
    性別按鈕間距
===================================================== */

.gender-box {
    gap: 60px;
}

/* =====================================================
   第一頁按鈕配色
===================================================== */

/* 男生 */
.option-button[data-group="gender"][data-value="male"] {
    font-size: 38px;
    -webkit-text-stroke: 2px currentColor;
}

.option-button[data-group="gender"][data-value="male"].selected {
    background: #72bdf2;
    border-color: #72bdf2;
    color: white;

    box-shadow:
        0 0 22px rgba(114, 189, 242, 0.55);
}

.option-button[data-group="gender"][data-value="male"]:hover {
    border-color: #72bdf2;
    color: #f4f4f6;

    box-shadow:
        0 0 18px rgba(114, 189, 242, 0.35);
}


/* 女生 */
.option-button[data-group="gender"][data-value="female"] {
    font-size: 38px;
    -webkit-text-stroke: 2px currentColor;
}

.option-button[data-group="gender"][data-value="female"].selected {
    background: #ff72aa;
    border-color: #ff72aa;
    color: white;

    box-shadow:
        0 0 22px rgba(255, 114, 170, 0.55);
}

.option-button[data-group="gender"][data-value="female"]:hover {
    border-color: #ff72aa;
    color: #f4f4f6;

    box-shadow:
        0 0 18px rgba(255, 114, 170, 0.35);
}


/* S */
.option-button[data-group="type"][data-value="S"].selected {
    background: #ff72aa;
    border-color: #ff72aa;
    color: white;

    box-shadow:
        0 0 22px rgba(255, 114, 170, 0.55);
}

.option-button[data-group="type"][data-value="S"]:hover {
    border-color: #ff72aa;
    color: #f4f4f6;

    box-shadow:
        0 0 18px rgba(255, 114, 170, 0.35);
}


/* M */
.option-button[data-group="type"][data-value="M"].selected {
    background: #72bdf2;
    border-color: #72bdf2;
    color: white;

    box-shadow:
        0 0 22px rgba(114, 189, 242, 0.55);
}

.option-button[data-group="type"][data-value="M"]:hover {
    border-color: #72bdf2;
    color: #f4f4f6;

    box-shadow:
        0 0 18px rgba(114, 189, 242, 0.35);
}


/* SW */
.option-button[data-group="type"][data-value="SW"].selected {
    background: #ba54c5;
    border-color: #ba54c5;
    color: white;

    box-shadow:
        0 0 22px rgba(186, 84, 197, 0.55);
}

.option-button[data-group="type"][data-value="SW"]:hover {
    border-color: #ba54c5;
    color: #f4f4f6;

    box-shadow:
        0 0 18px rgba(186, 84, 197, 0.35);
}


/* =====================================================
   第 2～6 頁
===================================================== */

.page-header.test-page {
    position: relative;

    display: block;

    width: 100%;
    max-width: none;

    margin: 0;

    padding: 25px 0;
}

.page-header.test-page h1 {
    font-size: 28px;
}

.page-header.test-page .profile-intro {
    width: 100%;
    text-align: left;
}

.page-header.test-page .profile-intro h1 {
    margin: 0 0 2px;

    font-size: 28px;
}

.page-header.test-page .profile-intro .info {
    font-size: 15px;
}

.page-header.test-page .subject-input,
.page-header.test-page .profile-choices {
    display: none;
}


/* =====================================================
   第 2～6 頁右上角基本資料
===================================================== */

.test-user-info {
    position: absolute;

    top: 25px;
    right: 0;

    width: 220px;

    color: #737b8d;

    font-size: 16px;
    line-height: 2;

    cursor: pointer;

    transition: opacity 0.2s;
}

.test-user-info .user-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 100%;
}

.test-user-info .user-label {
    color: #737b8d;
}

.test-user-info .user-value {
    margin-left: 12px;

    color: #f4f4f6;

    font-weight: bold;

    transition: color 0.2s ease;
}

.test-user-info .type-label {
    margin-left: 16px;
}

.test-user-info .user-row:hover .user-value {
    color: #b8bfce;
}

.page-header.test-page .test-user-info {
    position: absolute;

    top: 40px;
    right: 0;

    text-align: left;

    color: #737b8d;

    font-size: 16px;
    line-height: 1.8;

    cursor: pointer;
}

.page-header.test-page .test-user-info .user-label {
    color: #737b8d;
}

.page-header.test-page .test-user-info .user-value {
    margin-left: 12px;

    color: #f4f4f6;

    font-weight: bold;

    transition: color 0.2s ease;
}

.page-header.test-page .test-user-info .user-value:hover {
    color: #b8bfce;
    text-decoration: underline;
}


/* =====================================================
   第一頁不顯示圖例
===================================================== */

.profile-page-active .legend {
    display: none;
}


/* =====================================================
   分頁
===================================================== */

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;

    margin-top: 25px;
}

.page-button {
    width: 36px;
    height: 36px;

    border: 1px solid #59657d;
    border-radius: 8px;

    background: transparent;
    color: #929bb0;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s;
}

.page-button:hover {
    border-color: #72bdf2;
    color: white;
}

.page-button.active {
    background: #72bdf2;
    border-color: #72bdf2;
    color: white;
}


/* =====================================================
   頁尾
===================================================== */

footer {
    text-align: center;

    color: #737b8d;

    font-size: 17px;
    line-height: 2;

    margin-top: 55px;
}


/* =====================================================
   保存結果
===================================================== */

#show-result {

    width: 180px;
    height: 45px;

    border: 2px solid #ba54c5;
    border-radius: 14px;

    background: transparent;
    color: #ba54c5;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}


/* Hover / 按下後 */

#show-result:hover,
#show-result:active {

    background: #ba54c5;
    border-color: #ba54c5;

    color: white;

    box-shadow:
        0 0 18px rgba(186, 84, 197, 0.45);
}

/* =====================================================
   結果圖
===================================================== */

#result-page {
    display: none;

    position: fixed;
    inset: 0;

    z-index: 9999;

    overflow-y: auto;

    padding: 30px 15px;

    background: #10182d;
}




/* =====================================================
   結果圖本體
===================================================== */

#result-sheet {
    width: 1024px;

    margin: 0 auto;

    padding: 35px 30px 40px;

    background: #10182d;

    color: white;
}


/* =====================================================
   結果圖標題
===================================================== */

.result-header {
    margin-top: 20px;
    margin-bottom: 30px;

    padding-bottom: 20px;

    border-bottom: 1px solid #414a61;
}

.result-header h1 {
    margin: 0 0 15px;

    text-align: center;

    font-size: 32px;
    letter-spacing: 3px;

    color: #f4f4f6;
}

.result-user {
    text-align: center;

    font-size: 16px;
    line-height: 2;

    color: #737b8d;
}

.result-user span {
    color: #f4f4f6;
    font-weight: bold;
}

.result-type-label {
    margin-left: 20px;
}

#result-sheet #result-type-label {
    margin-left: 20px;
    font-weight: normal;
    color: inherit;
}



/* =====================================================
   結果圖分類
===================================================== */

#result-content .result-section {
    display: grid !important;

    grid-template-columns: 70px 1fr !important;

    align-items: start;

    width: 100%;

    margin-bottom: 30px;
}


/* 分類標題 */

#result-content .result-section-title {
    display: block !important;

    width: 70px;

    margin-top: 35px;
    padding: 8px 0 0;

    border: none;

    text-align: left;

    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;

    color: #f4f4f6;
}


/* =====================================================
   結果圖瓶子排列
===================================================== */

#result-content .result-grid {
    display: grid !important;

    grid-template-columns: repeat(7, 1fr) !important;

    column-gap: 0 !important;
    row-gap: 20px;

    width: 100% !important;

    margin: 0 !important;
}


/* =====================================================
   結果圖單一瓶子
===================================================== */

#result-content .result-item {
    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    text-align: center !important;
}


/* =====================================================
   結果圖中的瓶子
===================================================== */

#result-content .result-item .jar {
    position: relative !important;

    display: block !important;

    width: 80px !important;
    height: 115px !important;

    margin: 0 auto !important;

    flex: 0 0 115px !important;

    grid-column: auto !important;
    grid-row: auto !important;
}


/* =====================================================
   結果圖：名稱精準對齊瓶子正下方
   ⚠️ 只影響結果圖
===================================================== */

#result-content .result-item .jar-name {
    display: block !important;

    width: 80% !important;
    max-width: 80px !important;

    margin: 15px 0 0 10px !important;
    padding: 0 !important;

    border: none !important;

    text-align: center !important;

    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 1.4 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* =====================================================
   結果圖隱藏操作元件
===================================================== */

#result-content .result-item .ng-button,
#result-content .result-item .slider-area,
#result-content .result-item .status-text {
    display: none !important;
}



/* =====================================================
   結果頁按鈕
===================================================== */

.result-actions {
    display: flex;

    justify-content: center;
    gap: 24px;

    margin: 0px;
    
}


/* =====================================================
   保存結果
===================================================== */

#download-result {

    width: 158px;
    height: 50px;

    border: 2.5px solid #ba54c5;
    border-radius: 14px;

    background: transparent;
    color: #ba54c5;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}


/* Hover / 按下後 */

#download-result:hover,
#download-result:active {

    background: #ba54c5;
    border-color: #ba54c5;

    color: white;

    box-shadow:
        0 0 18px rgba(186, 84, 197, 0.45);
}


/* =====================================================
   返回測驗
===================================================== */

#close-result {

    width: 158px;
    height: 50px;

    border: 2px solid #72bdf2;
    border-radius: 14px;

    background: transparent;
    color: #72bdf2;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}


/* Hover / 按下後 */

#close-result:hover,
#close-result:active {

    background: #72bdf2;
    border-color: #72bdf2;

    color: white;

    box-shadow:
        0 0 18px rgba(114, 189, 242, 0.45);
}


/* =====================================================
   點擊時稍微縮小
===================================================== */

#download-result:active,
#close-result:active {

    transform: scale(0.96);
}

#result-sheet .jar {
    cursor: default;
}

.page-button:disabled {
    cursor: default;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* 隱藏分頁左右箭頭 */
.pagination .prev-page.hidden-arrow,
.pagination .next-page.hidden-arrow {
    display: none !important;
}

/* 結果頁標題可點擊回到第一頁 */
#result-sheet .result-header h1 {
    cursor: pointer;
    font-size: 52px;
}

#result-sheet .result-header h1:hover {
    opacity: 0.75;
}

.result-legend {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 24px;

    margin-top: 40px;
    margin-bottom: 0px;

    font-size: 20px;
    font-weight: bold;

    flex-wrap: wrap;
}

    .result-legend .dot {
        width: 20px;
        height: 20px;

        margin: 0 1px 5px 2px;
    }

#result-page {
    width: 100vw;
    margin-left: calc(50% - 50vw);

    overflow-x: hidden;
    padding: 20px 0;
}


/* =========================
   結果圖
========================= */

#result-sheet {
    width: 1024px;

    margin: 0 auto;

    padding: 35px 30px 30px;

    transform: scale(calc((100vw - 20px) / 1024));
    transform-origin: top center;
}


/* =========================
   結果頁按鈕
========================= */

.result-actions {
    width: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 30px;
    margin-top: 0px;
    margin-bottom: 30PX;
}


/* =========================
   手機版
========================= */

/* =========================
   手機版
========================= */

@media screen and (max-width: 600px) {

    #result-page {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    #result-page[style*="display: block"] {
        display: flex !important;
        flex-direction: column;
        justify-content: center;

        overflow: hidden !important;
    }

    #result-sheet {
        width: 1024px !important;
        margin: 0 auto !important;
        transform: none !important;
        zoom: 0.35 !important;
    }

    #result-page .result-actions {
        width: 100%;

        display: flex;
        justify-content: center;
        align-items: center;

        gap: 10px;

        margin-top: 20px !important;
        margin-bottom: 0 !important;
    }

}


/* =====================================================
   平板直向：結果頁
===================================================== */

@media screen and (min-width: 601px)
       and (max-width: 1024px)
       and (orientation: portrait) {

    #result-page {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #result-page[style*="display: block"] {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        overflow: hidden !important;
    }

    #result-sheet {
        width: 1024px !important;

        margin-left: 50% !important;
        margin-right: 0 !important;

        position: relative !important;
        top: 220px !important;

        transform: scale(0.60) translateX(-50%) !important;
        transform-origin: top left !important;

        zoom: 1 !important;
    }

    #result-page .result-actions {
        position: fixed !important;
    
        left: 0 !important;
        bottom: 80px !important;
    
        width: 100% !important;
    
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    
        gap: 10px !important;
    
        margin: 0 !important;
    
        z-index: 10000 !important;
    }

}



/* =====================================================
   手機版：第 1 頁兩欄改為上下排列
===================================================== */

@media screen and (max-width: 600px),
       screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {

    /* 整個第一頁改成直向排列 */
    .page-header:not(.test-page) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;

        width: 100%;
        padding: 40px 20px;
    }

    /* 左側基本資料 */
    .page-header:not(.test-page) .profile-intro {
        width: 100%;
        text-align: center;
    }

    .page-header:not(.test-page) .profile-intro h1 {
        text-align: center;
    }

    .page-header:not(.test-page) .profile-intro .info {
        text-align: center;
    }

    /* 姓名輸入框 */
    .page-header:not(.test-page) .subject-input {
        width: 100%;
        max-width: 460px;
        margin: 40px auto 0;
    }

    /* 右側選項改到下面 */
    .page-header:not(.test-page) .profile-choices {
        width: 100%;
        max-width: 480px;
    }



    /* 性別區 */
    .gender-box {
        min-height: 125px;
        padding: 12px 20px;
        gap: 35px;
    }

    .gender-box .option-button {
        width: 90px;
        height: 90px;
        flex: 0 0 90px;
    }


    /* S / SW / M 區 */
    .type-box {
        min-height: 125px;
        padding: 12px 20px;
        gap: 18px;
    }

    .type-box .option-button {
        width: 85px;
        height: 85px;
        flex: 0 0 85px;
    }
}

/* =====================================================
   手機版：第 1 頁專用
   不影響電腦版
===================================================== */

@media screen and (max-width: 600px),
       screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {

    /* 第 1 頁頁首 */
    .page-header:not(.test-page) {
        display: flex;
        flex-direction: column;
        align-items: center;

        justify-content: center;

        flex: 1;

        width: 100%;
        padding: 20px 15px 10px;

        gap: 0;
    }


    /* 標題 */
    .page-header:not(.test-page) .profile-intro {
        width: 100%;
        text-align: center;
    }

    .page-header:not(.test-page) .profile-intro h1 {
        margin: 0 0 5px;
        font-size: 30px;
    }

    .page-header:not(.test-page) .profile-intro .info {
        font-size: 14px;
    }


    /* 受試者輸入框 */
    .page-header:not(.test-page) .subject-input {
        width: 100%;
        max-width: 380px;

        height: 50px;

        margin-top: 40px;
        margin-bottom: 10px;
    }

    .page-header:not(.test-page) .subject-input input {
        font-size: 18px;
    }

    .page-header:not(.test-page) .subject-input button {
        width: 95px;
        font-size: 20px;
    }


    /* 性別、類型兩個框 */
    .page-header:not(.test-page) .profile-choices {
        width: 100%;
        max-width: 380px;

        gap: 20px;

        margin-top: 20px;
    }


    /* 選項框高度 */
    .page-header:not(.test-page) .choice-box {
        min-height: 105px;

        padding: 10px 20px;
    }


    /* 性別 */
    .page-header:not(.test-page) .gender-box {
        gap: 35px;
    }

    .page-header:not(.test-page) .gender-box .option-button {
        width: 80px;
        height: 80px;

        flex: 0 0 80px;
    }


    /* S / SW / M */
    .page-header:not(.test-page) .type-box {
        gap: 18px;
    }

    .page-header:not(.test-page) .type-box .option-button {
        width: 75px;
        height: 75px;

        flex: 0 0 75px;
    }


    /* 頁尾 */
    footer {
        margin-top: 15px;
        font-size: 14px;
    }

}

/* =====================================================
   手機版：第 2～6 頁
   標題＋作者
   ↓
   受試者資料
===================================================== */

@media screen and (max-width: 600px),
       screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {

    /* 隱藏第一頁才需要的輸入區 */
    .page-header.test-page .subject-input {
        display: none;
    }

    /* 隱藏第一頁的性別／屬性選擇 */
    .page-header.test-page .profile-choices {
        display: none;
    }

    /* 標題＋作者 */
    .page-header.test-page .profile-intro {
        width: 100%;
        text-align: center;
    }

    /* 使用者資料改到標題作者下面 */
    .page-header.test-page .test-user-info {
        position: static !important;
        width: 100%;
        margin-top: 25px;
        text-align: center;
    }

    .page-header.test-page .test-user-info .user-row {
        justify-content: center;
    }

}

/* =========================
   結果頁按鈕｜手機版
========================= */
@media screen and (max-width: 600px),
       screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {

    #result-page .result-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
    }

    #result-page .result-actions button {
        width: 100px !important;
        height: 35px !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1;
        border-width: 2px !important;
        border-radius: 12px;
    }

}

/* =====================================================
   結果頁底部製作者文字
===================================================== */

#result-sheet .result-footer {
    width: 100%;

    margin-top: 45px;
    padding-top: 20px;

    text-align: center;

    color: #737b8d;

    font-size: 17px;
    line-height: 2;
}

html.result-open,
body.result-open {
    overflow: hidden !important;
}

@media screen and (max-width: 600px),
       screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {

    .container {
        min-height: calc(100dvh - 90px);
        display: flex;
        flex-direction: column;
    }

    .container > footer {
        margin-top: auto;
    }

}