:root {
    --line-green: #06C755;
    --line-gray: #8C8C8C;
    --line-dark: #1E1E1E;
    --line-border: #EBEBEB;
    --page-bg: #F7F7F7;
    --success-green: #4CAF50;
    --bs-primary: #06C755;
    --bs-primary-hover: #28c589;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Milligram 對 .row 在 @media (min-width: 40rem) 設了 width: calc(100% + 2rem)，
   原意是搭配 -1rem 負邊距互相抵銷。但版面用 Bootstrap 風格 grid 並以 mx-0 把左右
   margin 歸零後，這 2rem 額外寬度無人抵銷，使每個 .row.mx-0 比容器寬 20px，撐爆
   .page 的 padding → 整頁出現橫向卷軸（≥640px 才發生）。還原滿版寬即可修正。 */
@media (min-width: 40rem) {
    .row.mx-0 {
        width: 100%;
    }
}

body {
    background-color: var(--page-bg);
    color: var(--line-dark);
    line-height: 1.6;
}

button,
select {
    line-height: 1;
}

/* 按鈕編輯 Modal 的下拉：一律用自訂灰色箭頭，避免部分瀏覽器把原生箭頭染成紫色（accent/主題色）。 */
#button-edit-modal select,
#url-type-selector,
#cta-label-select,
#button-style-type {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 36px !important;
}

.main {
    background-color: #bfe8cda9;
    height: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.preview-hint{
    height: 51.2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-links {
    display: flex;
    gap: 16px;
    align-items: center;
}

.nav-link {
    color: var(--line-gray);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    /* gap between each icon and its label (desktop; labels are hidden on mobile) */
    gap: 8px;
}

.nav-link i {
    font-size: 16px;
}

.nav-link:hover {
    color: var(--line-green);
}

nav.main-nav {
    background-color: #fff;
    /* px (not rem) so left/right inset matches across legacy + React pages —
       rem would be 20px on milligram's 62.5% base vs 32px on the React 16px base. */
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 65.55px;
    position: fixed;
    max-width: 100vw;
    top: 0;
    z-index: 1000;
    width: 100%;
    align-self: flex-start;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

nav .logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

nav .logo-container img {
    width: 130px;
    height: 40px;
}

nav .logo-container span {
    font-size: 2rem;
    font-weight: 600;
    color: var(--line-green);
}

/* 編輯模式在品牌字標右側顯示「我的名片」麵包屑（連結回 /my-cards），對應
   React portal 的 nav-page-title。此頁為 milligram 62.5% 基準（1rem=10px），故用
   固定 px；沿用 line-green、不加底線，避免被上方 .logo-container span 規則影響。 */
nav .logo-container .nav-page-title {
    margin-left: 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--line-green);
    white-space: nowrap;
    text-decoration: none;
}
@media screen and (max-width: 576px) {
    nav .logo-container .nav-page-title {
        margin-left: 8px;
        font-size: 16px;
    }
}

/* Text wordmark in place of the old logo image: "LINE" in brand green +
   "數位名片" in dark, sized to the old ~40px logo block. */
nav .logo-container .brand-text-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    /* Pin the typeface so legacy pages (Noto Sans TC body) and React pages
       (Microsoft JhengHei body) resolve the wordmark to the SAME font. */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}
/* Absolute px (not rem) so the wordmark renders the SAME size on every page —
   this legacy page loads milligram (html font-size:62.5%, 1rem=10px) while the
   React portal pages use the 16px default, so rem would diverge. px keeps them
   identical. */
nav .logo-container .brand-text-logo .brand-line {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--line-green);
}
nav .logo-container .brand-text-logo .brand-name {
    font-size: 24px;
    font-weight: 700;
    color: #1f2a37;
}
@media screen and (max-width: 576px) {
    nav .logo-container .brand-text-logo .brand-line { font-size: 22px; }
    nav .logo-container .brand-text-logo .brand-name { font-size: 19px; }
}

.fw-nav__right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 16px;
}

.fw-nav__dev-badge {
    background: #fef3c7;
    color: #92400e;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.fw-nav__dev-badge-wrap {
    display: inline-flex;
    align-items: center;
    /* a bit of breathing room before the 管理名片 action group (desktop;
       overridden by the absolute positioning on mobile) */
    margin-right: 16px;
}

.fw-nav__cta {
    background: #2196F3;
    color: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(33, 150, 243, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.fw-nav__cta:hover {
    background: #1e88e5;
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.3);
    transform: translateY(-1px);
}

nav button {
    background: var(--bs-primary);
    color: #fff;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 24px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0;
    line-height: 1.5;
}

nav button:hover {
    background-color: var(--bs-primary-hover);
}

.page {
    width: 100%;
    padding: 24px 16px;

    border-radius: 12px;
    margin-top: 62px;
    margin-right: auto;
    margin-left: auto;
}

#page1 {
    max-width: 1100px;

}

#page2 {
    background-color: transparent;
    width: 100%;
    box-shadow: none;

}

/* 桌機讓 wizard 能撐到 1300px：解除 Bootstrap .container 的 max-width 上限，
   實際寬度由 .wizard 的 max-width 控制（手機/平板已是 100%，不受影響）。 */
#page2 .container {
    max-width: 100%;
}

#page-invitation {
    max-width: 500px;
}

.thankyou-card,
.main-card {
    background: white;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 16px;
}

.toolbar {
    background-color: #f4f4f4;
    border-top: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    position: fixed;
    top: 62px;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 20px;
    flex-wrap: wrap;
    max-width: 100vw;
}

.toolbar.bottom-toolbar {
    top: initial;
    bottom: 0;

}

.header {
    text-align: center;
    margin-bottom: 32px;
}

.logo {
    width: 120px;
    height: auto;
    margin-bottom: 16px;
}

h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--line-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.free-badge {
    background: #c70616;
    color: white;
    padding: 12px;
    border-radius: 50%;
    font-size: 14px;
    left: 70%;
    top: -40px;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.close-button{
    padding: 0;
   
}
.preview-hint{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 4px;
    text-align: center;
    background-color: rgba(0, 0, 0);
    z-index: 10;
}
.preview-hint h3{
    font-size: 16px !important;
    margin-bottom: 0;
}
.preview-hint  p{
    margin-bottom: 0;
    color: #fd4343;
}
.preview-hint+.main-nav{
    top: 51px;
}
.preview-hint h3{
    color: white;
}
.sticky-bar{
    position: sticky;
    background-color: #fffffff0;
    z-index: 5;
    width: 100%;
    border-top: 1px solid #EBEBEB;
}
.sticky-bar.bottom{
    bottom: 0;
    border-radius: 0 0 .625rem .625rem;
}
div:where(.swal2-icon).swal2-question{
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* 底線強調效果 */
.underline-emphasis {
    position: relative;
    display: inline-block;
}

.underline-emphasis::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 4px;
    background-color: var(--line-green);

}

.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: shine 3s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes shine {
    0% {
        left: -100%;
        opacity: 0;
    }

    25% {
        opacity: 0.8;
    }

    50% {
        left: 100%;
        opacity: 0;
    }

    75% {
        opacity: 0.8;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.subtitle {
    color: var(--line-gray);
    font-size: 16px;
}

/* Carousel/Swiper Styles */
.swiper {
    width: 100%;
    margin-bottom: 32px;
    border-radius: 12px;
    overflow: hidden;
}

.swiper-slide {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.namecard-preview {
    width: 100%;
    height: auto;
    display: block;
}

.swiper-pagination {
    bottom: 16px !important;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: white;
    opacity: 1;
}

.preview {
    text-align: center;
}

.template-preview {
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
    display: inline-block;
    text-align: initial;
}

/* create step2 預覽：flex2html 預設 .lyItem 為 width:80%（上限 300px），
   會隨欄寬縮小。改為 100%（上限 300px 不變），名片即可在較窄的欄位中仍維持
   滿版 300px，讓左欄可以縮窄、分隔線左移而不縮小名片。 */
#content2 .preview .lyItem {
    width: 100%;
}

/* .lyInner 是 flex（預設 justify-content:flex-start），名片 .lyItem 為 flex:none、
   max-width 上限後會被靠左釘住，.preview 的 text-align:center 對 flex 子元素無效，
   名片因此偏左。改成置中對齊、清掉 lyItem 左邊距與尾端 7px 佔位，名片才會真正水平置中。 */
#content2 .preview .lyInner {
    justify-content: center;
}

#content2 .preview .lyInner > .lyItem {
    margin-left: 0;
}

#content2 .preview .lyInner::after {
    display: none;
}

/* create step3 預覽（#confirm-flex，wizard-router.js 用 flex2html 即時渲染）沿用 step2
   同樣的滿版處理：預設 .lyItem 為 width:80%，手機上欄寬 <300px 時名片被縮到 ~274px，
   導致並排的「加 LINE 聯繫」按鈕文字被 ellipsis 截斷。改 100%（仍受 max-width:300px 上限）
   讓 step3 與 step2 一致維持滿版 300px，名片並置中。 */
#confirm-flex .lyItem {
    width: 100%;
}

#confirm-flex .lyInner {
    justify-content: center;
}

#confirm-flex .lyInner > .lyItem {
    margin-left: 0;
}

#confirm-flex .lyInner::after {
    display: none;
}

.btn-hint {
    max-width: 400px;
    margin: 0 auto;
    border-top: 1px dashed #ccc;
    padding-top: 16px;
    color: var(--line-gray);
    font-size: 13px;
}

/* Value Props */
.value-props {
    padding: 0 16px;
    margin-bottom: 32px;
}

.value-prop-item {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.value-prop-item h3 {
    color: var(--line-dark);
    font-size: 18px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.value-prop-item h3::before {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--bs-primary);
    color: white;
    border-radius: 50%;
    font-size: 14px;
}

.value-prop-item p {
    color: var(--line-gray);
    font-size: 15px;
}

.main-title {
    padding: 0 16px;
}

/* Features */
.features {
    display: flex;
    justify-content: space-around;

    padding: 0 16px;
}

.feature-item {
    text-align: center;
}

.feature-item i {
    font-size: 24px;
    color: var(--bs-primary);
    margin-bottom: 8px;
}

.feature-item p {
    color: var(--line-gray);
    font-size: 14px;
}

/* Social Icons */
.icon-container {
    text-align: center;
    margin-bottom: 32px;
}

.icon-container i {
    font-size: 24px;
    color: var(--line-gray);
    margin: 0 12px;
    transition: color 0.2s;
}

.icon-container i:hover {
    color: var(--line-green);
}

.cta-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 6px;
    background-color: var(--bs-primary);
    color: white;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(36, 180, 126, 0.2);
    animation: pulse 3s infinite;
}

/* 懸停效果 */
.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(36, 180, 126, 0.3);
    background-color: #28c589;
    color: white;
}

/* 點擊效果 */
.cta-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(36, 180, 126, 0.2);
}

/* 定義動畫 */
@keyframes pulse {
    0% {
        transform: scale(.9);

    }

    50% {
        transform: scale(1);

    }

    100% {
        transform: scale(.9);

    }
}

/* Add these carousel styles */
.carousel-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32px;
    overflow: hidden;

}

.carousel-slide {
    display: none;
    width: 100%;
}

.carousel-slide.active {
    display: block;
}

.carousel-slide img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: none;
}

.dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-gray);
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    opacity: 1;
    background: var(--line-green);
}

/* Add these new styles */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--line-dark);
}

.qr-setting-box {
    border-radius: 12px;
    padding: 16px;

    position: relative;
}

.qr-setting-box::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #fff;
}

/* 摺疊 */
.x-accordion {
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
}

.x-accordion-item {
    border-top: 1px solid #cccccc;
    padding-left: 0;
    padding-right: 0;
}

.is-container:first-of-type .x-accordion-item:first-of-type {
    border-top: 0px;
}

input.x-accordion-input {
    display: none;
}

.x-accordion-header {
    background-color: #fff;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    font-size: 1.2rem;
    margin-bottom: 0;
}

.x-accordion-title {
    display: inline-block;
    margin-right: 20px;
}

.x-accordion-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #333;
    stroke-width: 2px;
    transition: transform 0.3s;
}

.x-accordion-header:hover {
    background-color: #fcdac3;
}

.vote_choice .x-accordion-header {
    background-color: #f1f4ff;
}

.vote_choice .x-accordion-header:hover {
    filter: brightness(95%);
}

.x-accordion-input:checked+.x-accordion-header .x-accordion-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.x-accordion-content {
    border-top: 1px solid #EBEBEB;
    padding: 10px;
    background-color: #fff;
    max-height: 0;
    display: none;
    transition: max-height 0.15s ease-in-out;
}

.x-accordion-input:checked+.x-accordion-header+.x-accordion-content {
    max-height: 100%;
    transition: max-height 0.15s ease-in-out;
    display: block;
}

.no-accordion {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
}

.no-accordion .accordion-collapse.collapse {
    display: block !important;
}

.no-accordion .accordion-button {
    pointer-events: none;

    background-color: #ffe8d99d;
    color: #000;
    font-weight: 700;
}
/* cropper */
.img-container {
    width: 100%;
    height: 400px; /* Adjust height as needed */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

#cropper-image {
    max-width: 100%;
    max-height: 100%;
}

/* Modern single-row "pill" toolbar: zoom controls + actions all on one line,
   wrapped in a soft rounded bar (no wrapping to a second row). */
.cropper-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    padding: 5px 8px;
    background: #f4f5f7;
    border: 1px solid #e6e8eb;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    box-sizing: border-box;
}

.crop-zoom-label {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: #475467;
    white-space: nowrap;
    padding: 0 4px;
}

.crop-zoom-slider {
    flex: 1 1 auto;
    min-width: 60px;
    height: 4px;
    margin: 0 2px;
    accent-color: #E65757;
    cursor: pointer;
}

.crop-tool-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #475467;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.crop-tool-btn:hover {
    background: #fff;
    color: #101828;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}

/* +/- render as round icon buttons sitting on a white chip */
.crop-zoom-out-btn,
.crop-zoom-in-btn {
    width: 32px;
    padding: 0;
    font-size: 18px;
    background: #fff;
    color: #344054;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.crop-zoom-out-btn:hover,
.crop-zoom-in-btn:hover {
    background: #fff;
    color: #E65757;
}

#cropper-modal .modal-footer {
    flex-wrap: wrap;
}

.cropper-view-box,
.cropper-face {
    border-radius: 50% !important ;/* Example: if you want a circular crop */
}
.confirm-crop-btn{
    background-color: #E65757;
    color:white;
    border:0;
}
.confirm-crop-btn:hover{
    background-color: #cf4e4e;
    border:0;
}
.cancel-crop-btn{
    border:0
}
.cancel-crop-btn:hover,.cancel-btn:hover{
  color: inherit;
    border:0;
}

@media (max-width: 575.98px) {
    .img-container {
        height: 320px;
    }

    .cropper-toolbar {
        gap: 3px;
        padding: 4px 6px;
    }

    /* Keep everything on one row: drop the "圖片縮放" text label and tighten the
       action buttons so the slider + +/- + 置中/完整顯示/重置 still fit. */
    .crop-zoom-label {
        display: none;
    }

    .crop-tool-btn {
        min-width: 30px;
        height: 32px;
        padding: 0 8px;
        font-size: 12px;
    }

    .crop-zoom-out-btn,
    .crop-zoom-in-btn {
        width: 30px;
        padding: 0;
    }
}

/* Mobile/tablet footer: keep the X Lead logo and copyright on a SINGLE row.
   The default Bootstrap .row wraps the copyright below the logo once space is
   tight (this kicks in well above the 576px phone breakpoint, so target ≤992px).
   Logo sits left & vertically centred; the copyright takes the remaining width
   and wraps to ~2 lines ("Copyright … 領捷" / "© All rights reserved"). */
@media (max-width: 991.98px) {
    .footer .row {
        /* milligram's .row is flex-direction:column below 40rem(640px); force row
           so logo + copyright share a line. justify/center utilities in col.css
           use !important, so we must too. */
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 10px !important;
        padding-left: 12px;
        padding-right: 12px;
    }

    .footer .row > span:first-child {
        flex: 0 0 auto;
        align-self: center;
    }

    .footer .row > span:last-child {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        white-space: normal;
    }
}

/* Under 900px: footer is two sides. Left = logo (vertically centred),
   right = copyright on exactly 2 lines:
   line 1 "Copyright © … 領捷", line 2 "© All rights reserved".
   The two are a pair — keep them together and centred as a group with a
   small gap, rather than pinning the logo left and stretching the text. */
@media (max-width: 899.98px) {
    .footer .row {
        justify-content: center !important;
        gap: 14px !important;
    }

    .footer .row > span:last-child {
        flex: 0 0 auto;
    }

    .footer .copyright-text .cr-line1,
    .footer .copyright-text .cr-line2 {
        display: block;
    }
}
/* Footer Styles */
.footer {
    background-color: #fff;
    width: 100%;
    position: relative;
    margin-top: auto;
    font-size: 14px;
}

.footer .brand_logo {
    max-width: 280px;
    margin: 0 auto;
}

.footer .text {
    color: #666;
    font-size: 1.25rem;
    line-height: 1.6;
}

.footer #service_info {
    font-size: 1.25rem;
}

.footer #service_info p {
    color: #666;
    margin-bottom: 0;
}

.footer #service_info span {
    position: relative;
    margin-right: 1.5rem;
}

.footer #service_info .tel::before {
    content: "\f095";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.5rem;
    color: var(--line-green);
}

.footer #service_info .mapicon::before {
    content: "\f3c5";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.5rem;
    color: var(--line-green);
}

.footer #service_info .mail::before {
    content: "\f0e0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.5rem;
    color: var(--line-green);
}

.footer .copyright {
    background-color: #f8f9fa;
    color: #666;
    font-size: 0.8rem;
}

.custom-btn {

    background-color: var(--bs-primary);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 0;
}

.ExAbs {
    z-index: 101;
}

.MdBtn {
    border-radius: 8px;
}

.modal {
    display: none;
    /* 隱藏模態框 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-all {
    background-color: #fff;
    margin: auto;

    border: 1px solid #888;
    width: 100%;
    max-width: 800px;
    border-radius: 8px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal-header {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1000;
    border-bottom: 1px solid #EBEBEB;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
}

.modal-body {
    height: 70vh;
    overflow-y: scroll;
    padding: 16px;
}

.modal-body-content {
    background-color: #f4f4f4;
    border-radius: 12px;
    padding: 16px;
    height: auto;
    align-items: start;
    justify-content: start;
}

.close-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    position: sticky;
    top: 100%;
    background-color: #fff;
    z-index: 1000;
    border-top: 1px solid #EBEBEB;
    padding: 8px 16px;
    border-radius: 0 0 8px 8px;
    left: 0;

}

.confirm-btn {
    padding: 8px 16px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

input[type="radio"] {
    display: none;
}

input[type="radio"]:not(.x-accordion-input)+label {
    border: 2px dashed #EBEBEB;
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    text-align: left;

}

input[type="radio"]:not(.x-accordion-input)+label.template-label {
    outline: 1px solid #e5e5e5;
    border: 0px
}

input[type="radio"]:not(.x-accordion-input):checked+label.template-label {
    outline: 2px solid var(--bs-primary);
}

input[type="radio"]:not(.x-accordion-input):checked+label {
    border: 2px solid var(--bs-primary);
}

input[type="radio"]:not(.x-accordion-input)+.template-label {
    padding: 0px;
    overflow: hidden;
}

/* 只套樣板標題列（直接子層）；縮圖 bubble 內的 .MdTxt p 不能吃到這些樣式 */
.template-label > p {
    background-color: #dedede;
    color: #aaa;
    padding: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Flex JSON 縮圖（取代原本預載的樣板縮圖圖片，由 w.js renderTemplateThumbs 渲染） */
.template-item .template-label {
    display: block;
    width: 100%;
    min-width: 0;
}

.flex-thumb {
    width: 100%;
    overflow: hidden;
    padding: 8px;
    /* 縮為 95%（以中央為基準），讓每張名片縮圖周圍多出間隙。 */
    transform: scale(0.95);
    transform-origin: center top;
    /* 點縮圖時讓事件落在外層 label 上 → 勾選 radio，避免點到 bubble 內的連結/按鈕 */
    pointer-events: none;
}

.flex-thumb:not(.rendered) {
    min-height: 140px;
}

/* bubble 先以固定寬度渲染（與正式預覽相同的折行結果），再 scale 進格子 */
.flex-thumb-inner {
    width: 375px;
    transform-origin: 0 0;
}

.flex-thumb .LySlider .lyItem {
    margin-left: 0;
}

input[type="radio"]:not(.x-accordion-input):checked+label > p,
input[type="radio"]:not(.x-accordion-input):hover+label > p {
    background-color: var(--bs-primary);
    transition: all 0.2s ease;
    color: #fff;
}

.color-selector {
    display: flex;
    gap: 10px;
}

.color-btn {
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.color-btn:hover {
    transform: scale(1.15);
}

/* 選中：白色間隙 + 深色外圈 + 打勾（按鈕背景色是 inline style，蓋不掉，改用 ring） */
.color-btn.active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
    transform: scale(1.08);
}

.color-btn.active::after {
    content: "\2713";
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
}

.template-item {
    transition: all 0.3s ease;
}

/* 名片縮圖之間留間距：bootstrap 的 .p-1 帶 !important，需用 !important 才蓋得過。
   左右 gutter 略加大，讓同一列的名片彼此有一點橫向間距。 */
#template-area .template-item {
    padding: 6px 12px !important;
}
/* 桌機：縮小列與列之間的垂直間距（蓋掉 bootstrap .mb-2 與上下 padding）。 */
@media (min-width: 768px) {
    #template-area .template-item {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        margin-bottom: 0 !important;
    }
}
.link-hint{
    display: none;
}

/* ── URL 欄位 label 右側「如何取得」連結 ── */
.howto-trigger {
    margin-left: 12px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--bs-primary);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.howto-trigger:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

/* ── 「如何取得」右側滑入抽屜 ── */
.howto-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    visibility: hidden;
    pointer-events: none;
}
.howto-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}
.howto-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .25s ease;
}
.howto-drawer.is-open .howto-drawer__backdrop {
    opacity: 1;
}
.howto-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 680px;
    max-width: 92vw;
    background: #fff;
    box-shadow: -8px 0 28px rgba(0, 0, 0, .18);
    transform: translateX(100%);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
}
.howto-drawer.is-open .howto-drawer__panel {
    transform: translateX(0);
}
.howto-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #eee;
    flex: 0 0 auto;
}
.howto-drawer__title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #333;
}
.howto-drawer__close {
    border: none;
    background: transparent;
    height: auto;
    padding: 0 4px;
    margin: 0;
    font-size: 26px;
    line-height: 1;
    color: #888;
    cursor: pointer;
}
.howto-drawer__close:hover {
    background: transparent;
    color: #333;
}
.howto-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px;
}
/* 抽屜內容標題（從手機取得… / 從 Account Manager…） */
.howto-content-title {
    margin: 0 0 14px;
    font-size: 1.45rem;
    font-weight: 700;
    color: #1e3a8a;
    line-height: 1.4;
}
/* 步驟圖：桌機兩欄（2 張一列），手機一欄（1 張一列）。每張＝原整合圖切出的一個步驟卡。 */
.howto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}
.howto-step-img {
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    border: 1px solid #eceff3;
    border-radius: 10px;
    background: #fff;
}
/* 單張整合教學圖（保留舊樣式，若仍有引用） */
.howto-single-img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #eceff3;
    border-radius: 8px;
}

@media (max-width: 575.98px) {
    /* 手機：抽屜寬度約螢幕的 90%；步驟圖改為單欄（1 張一列，看得更清楚） */
    .howto-drawer__panel {
        width: 90vw;
        max-width: 90vw;
    }
    .howto-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* wiz */
.wizard {
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

input[type="radio"] {
    display: none;
    /* 隱藏 radio 按鈕 */
}

.wizard-step {
    display: none;
    /* 隱藏所有步驟 */
    width: 100%;
}

input[type="radio"]:checked+.wizard-step {
    display: block;
    /* 顯示當前步驟 */
}

.wizard-step h2 {
    margin-top: 0;
}

.wizard-step label.page-btn {
    display: inline-block;
    padding: 10px 15px;
    background-color: var(--bs-primary);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
}

.wizard-step label.page-btn:hover {
    background-color: var(--bs-primary-hover);
}

.wiz-content {
    min-height: 65vh;
    border-top: 1px solid #EBEBEB;
    padding: 16px;

}

#content2 .wiz-content {
    background-color: #e6e6e6;
}

/* 桌機：整片灰底左右分成兩塊灰度 —— 左半(編輯欄)維持 #e6e6e6，右半(整個說明面板)
   填成略深的 #dcdcdc。灰度分界「與那道垂直虛線」由同一個變數 --rail-split 定義，且
   兩者都畫在 .wiz-content 上（同一參考框），所以顏色交界一定精準落在虛線上、不會有位移。
   底色鋪在 .wiz-content(含 min-height/padding) → 滿版蓋到面板最上緣與最下緣。
   --rail-split 是「距 .wiz-content 右緣的距離」：540px = 中線(524px 於 .col-xl-8)＋16px 右內距。
   若要左右微調交界，只改這一個數字即可。 */
@media (min-width: 1200px) {
  #content2 .wiz-content {
    --rail-split: 540px;
    position: relative;
    background: linear-gradient(
      to right,
      #e6e6e6 0,
      #e6e6e6 calc(100% - var(--rail-split)),
      #dcdcdc calc(100% - var(--rail-split)),
      #dcdcdc 100%
    );
  }
  /* 貫穿全高的直向虛線，落在灰度交界上（同一個 --rail-split）。 */
  #content2 .wiz-content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--rail-split);
    border-left: 1px dashed #ccc;
    pointer-events: none;
  }
}

/* ── 桌機（≥1200px）：step2「編輯名片」改成「左卡片／右側欄」雙欄 ──
   原本單欄垂直堆疊，名片預覽僅 ~400px，寬螢幕左右大量留白、又把整段內容
   拉長，使上一步/下一步被推到視窗外要捲動。改成 grid：左邊名片預覽、右側欄
   放（復原/重做 + 「當名片完成後可執行」說明），中間以一道貫穿全高的直向
   虛線分隔（沿用原本 .btn-hint 頂端虛線的語意，改為垂直）。手機/平板不受影響，
   維持原本單欄堆疊與固定在右側的復原/重做。 */
@media (min-width: 1200px) {
  #content2 .wiz-content > .col-xl-8 {
    position: relative;
    display: grid;
    /* 左＝編輯欄（名片＋頂列，占滿剩餘空間，名片於其中置中）；
       右＝說明面板（固定寬、永遠展開，不再收合，避免收合／展開時的畫面跳動）。 */
    grid-template-columns: minmax(0, 1fr) 504px;
    grid-template-areas:
      "hist rail"
      "card rail";
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 40px;
    width: 100%;
    max-width: 1300px;
    margin-inline: auto;
  }
  /* 「建議用平板/電腦編輯」純粹是手機提醒，桌機隱藏。 */
  #content2 .size-hint {
    display: none;
  }
  /* 名片在左欄內水平置中（卡片比欄窄時，兩側留白均等）。 */
  #content2 .preview {
    grid-area: card;
    justify-self: center;
  }
  /* 名片上方一列：左邊「點選編輯」綠色提示、右邊復原/重做。改為一般流排、
     取消 sticky 浮動與 height:0（用雙 ID 提高權重蓋過 JS 注入的同名 sticky 樣式）。 */
  #content2 #flex-history-bar.flex-history-bar--sticky {
    grid-area: hist;
    position: static;
    height: auto;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 14px;
    padding-right: 4px;
    z-index: auto;
  }
  /* 左側提示文字：用 margin-right:auto 推到最左，復原/重做維持貼右並相鄰。 */
  /* 「點選編輯」做成綠色小膠囊＋鉛筆圖示，明確提示名片可點擊編輯（非被動灰字）。 */
  #content2 #flex-history-bar.flex-history-bar--sticky::before {
    content: "✎ 點選編輯";
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    background: #059669;
    border: 1px solid #047857;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .04em;
  }
  /* 清掉 milligram 對 button 的預設 margin-bottom:10px：否則按鈕(連同下方 margin)
     被 align-items:center 一起置中，按鈕與「點選編輯」會偏上而非在列中垂直置中。 */
  #content2 #flex-history-bar .flex-history-btn {
    margin: 0;
  }
  /* 右側欄（rail）：外層分頁＋內容卡片，填滿整個 grid 欄位寬度。 */
  #content2 .wiz-rail {
    grid-area: rail;
    text-align: left;
  }
  /* 桌機說明面板永遠展開，隱藏「收合」鈕（收合／展開只保留給手機/平板）。 */
  #content2 .rail-collapse {
    display: none;
  }
  /* 收合狀態的引導卡在窄欄內置頂 sticky，捲動時仍看得到（桌機永遠展開，不觸發）。 */
  #content2 .wiz-rail[data-collapsed="true"] .rail-card {
    position: sticky;
    top: 12px;
  }
}

/* 手機/平板（<1200px）：復原/重做不再固定在視窗右側，而是隨流排在「提醒」下方，
   靠右並排成一列；名片則在下方水平置中（.preview 本就 text-align:center）。
   雙 ID 提高權重，蓋過 flex-preview-editor.js 注入的 position:fixed 樣式。 */
@media (max-width: 1199.98px) {
  #content2 #flex-history-bar.flex-history-bar--sticky {
    position: static;
    transform: none;
    top: auto;
    right: auto;
    left: auto;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    height: auto;
    overflow: visible;
    margin: 12px 0 14px;
    z-index: auto;
  }
  /* 手機同樣顯示「✎ 點選編輯」綠色膠囊，推到最左（名片上方一列左上角），
     復原/重做維持貼右（比照桌機 min-width:1200px 的樣式）。 */
  #content2 #flex-history-bar.flex-history-bar--sticky::before {
    content: "✎ 點選編輯";
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;          /* 與復原/重做鈕同高、同列水平對齊 */
    box-sizing: border-box;
    color: #fff;
    background: #059669;
    border: 1px solid #047857;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: .04em;
  }
  /* 復原/重做鈕：改成與「點選編輯」膠囊同高（覆蓋 JS 注入的 height:34px），
     同列垂直置中對齊。 */
  #content2 #flex-history-bar.flex-history-bar--sticky .flex-history-btn {
    height: 28px;
    box-sizing: border-box;
    padding: 0 12px;
    font-size: 14px;
    /* 清掉 milligram 對 <button> 的預設 margin-bottom:10px：手機同列時，
       該下邊距會讓按鈕的 margin box 被 align-items:center 一起置中而偏上，
       與「點選編輯」膠囊不在同一水平線（桌機在 min-width:1200 區已另有 margin:0）。 */
    margin: 0;
  }
  #content2 #flex-history-bar.flex-history-bar--sticky .flex-history-btn .fhb-ico {
    font-size: 15px;
  }
}

/* 手機/平板（<1200px）：右側說明欄改為「只保留主簡報」的手風琴卡。
   ── 名片上的小按鈕（獲客/關於我/極速分享）點擊 → 開對應說明 modal（見 flex-preview-editor.js）。
   ── 卡片下方只留主簡報：隱藏三個分頁列；標頭一律用「製作及使用」藍色迷你標頭 + 展開/收合切換；
      展開（預設）顯示三個技巧（看說明 → 開對應 modal），收合只留標頭。 */
@media (max-width: 1199.98px) {
  /* 開新名片（首次建立／捨棄重做）的「逐列連鎖 scroll-reveal」：JS 掛上 .is-scroll-reveal 後，
     三列重點先把高度收成 0（overflow 藏起、不佔位 → 卡片只跟已顯示內容一樣高，不預留白色空間）；
     使用者往下捲、JS 依卡片底緣連鎖給該列 .is-shown → 高度展開＋淡入＋由下滑入，並亮一下（較淡）
     淡黃底。沒捲到那列 → 該列不顯示、也不佔空間。橫幅維持正常顯示、不參與收合。 */
  #content2 .wiz-rail.is-scroll-reveal .ri-list .ri-item {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    border-top-width: 0;
    transform: translateY(12px);
    transition: max-height .55s cubic-bezier(.22, 1, .36, 1),
                opacity .5s ease,
                transform .55s cubic-bezier(.22, 1, .36, 1),
                border-top-width .3s ease;
  }
  #content2 .wiz-rail.is-scroll-reveal .ri-list .ri-item.is-shown {
    max-height: 200px;
    opacity: 1;
    transform: none;
    border-top-width: 1px;
    animation: lnc-ri-flash 1.1s ease forwards;
  }
  @media (prefers-reduced-motion: reduce) {
    #content2 .wiz-rail.is-scroll-reveal .ri-list .ri-item {
      max-height: none; opacity: 1; transform: none; overflow: visible; transition: none; animation: none;
    }
  }
  /* 到位時亮一下的淡黃底：比原本更淡（.35 → .16），左側琥珀邊也調柔。 */
  @keyframes lnc-ri-flash {
    0%   { background: rgba(250, 204, 21, 0); }
    30%  { background: rgba(250, 204, 21, .16); box-shadow: inset 3px 0 0 rgba(245, 158, 11, .55); }
    100% { background: rgba(250, 204, 21, 0); box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0); }
  }
  /* 點整條「製作及使用」標題列即可展開/收合，游標提示可點。 */
  #content2 .wiz-rail .ri-title { cursor: pointer; }
  /* 隱藏分頁列與非 intro 的 pill（手機不在欄內切分頁，改由 modal 呈現） */
  #content2 .wiz-rail .rail-head { display: none; }
  #content2 .wiz-rail .pill-panel:not(#pill-intro) { display: none; }
  #content2 .wiz-rail #pill-intro { display: block; }
  /* 手機：拿掉米黃底，藍色標頭直接接白底三列；內距縮小讓整體更緊湊。 */
  #content2 .wiz-rail .rail-intro { background: #fff; padding: 18px; }
  /* 標頭一律「製作及使用」藍色迷你標頭（展開/收合皆同），隱藏「開始前」徽章/長標題/導語 */
  #content2 .wiz-rail .ri-badge,
  #content2 .wiz-rail .ri-title__full,
  #content2 .wiz-rail .ri-hero,
  #content2 .wiz-rail .ri-lead-row,
  #content2 .wiz-rail .ri-lead { display: none; }
  #content2 .wiz-rail .ri-title__mini { display: inline; color: #fff; }
  #content2 .wiz-rail .ri-title {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;   /* 標題／分隔線／收合鈕同一列垂直置中，避免高低不齊 */
    margin: -18px -18px 0;
    padding: 13px 16px 14px;
    background: #2f4c9c;   /* 比原本深藍(#172a63)淺一些 */
    border-radius: 16px 16px 0 0;
    font-size: 1.4rem;
  }
  /* 「關於我」徽章列：獨立浮在白卡之上（不在 .rail-card 內），置中。
     上方負 margin 往回吃掉名片預覽下緣的空白，讓徽章靠近名片；下方拉開與說明卡的距離。 */
  #content2 .wiz-rail .ri-brand-row {
    display: flex;
    justify-content: center;
    margin: -8px 0 18px;
  }
  /* 說明面板與下方「上一步／下一步」按鈕列之間留白。 */
  #content2 .wiz-rail { margin-bottom: 16px; }
  /* 迷你標頭文字垂直置中、行高一致，避免與右側切換鈕高低不齊。 */
  #content2 .wiz-rail .ri-title__mini { line-height: 1.2; }
  /* 展開/收合切換鈕：標頭右側常駐（白字），與標題垂直置中 */
  #content2 .wiz-rail .ri-expand {
    display: inline-flex;
    align-items: center;
    align-self: center;
    /* 重置 milligram 對 <button> 的預設高度(3.8rem)與 margin-bottom(10px)：
       否則按鈕撐高整個藍色標頭。 */
    height: auto;
    min-height: 0;
    margin: 0 0 0 auto;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 8px;
    white-space: nowrap;
  }
  /* 收合：只留標頭，隱藏三個技巧；標頭補回四角圓角、去掉下方空白 */
  #content2 .wiz-rail[data-collapsed="true"] .ri-list { display: none; }
  #content2 .wiz-rail[data-collapsed="true"] .ri-title { margin-bottom: -18px; border-radius: 16px; }

  /* 整組「顯示「關於我」＋toggle」做成淡黃底方角徽章（非圓角膠囊）：
     左右內距多一點、上下更矮；標籤深色字配淺黃底。寬度貼合內容。 */
  #content2 .wiz-rail .ri-brand-row .brand-onoff {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 3px 10px;     /* 上下加一點點內距 */
    background: #fffbeb;   /* 淡黃底（單一色、不隨狀態變） */
    border-radius: 4px;    /* 方角徽章，不做圓角膠囊 */
  }
  #content2 .wiz-rail .brand-onoff__label {
    display: inline;
    color: #713f12;   /* 深琥珀字，配淡黃底 */
    font-size: 1.2rem;   /* 「顯示「關於我」」字放大 */
    font-weight: 700;
    white-space: nowrap;
  }
  /* 滑塊：軌道 42×18；鈕 11 並內縮 left:4，讓鈕離邊、ON/OFF 字離鈕都多一點間距。 */
  #content2 .wiz-rail .ri-brand-row .brand-onoff .brand-onoff__track { width: 42px; height: 18px; }
  #content2 .wiz-rail .ri-brand-row .brand-onoff .brand-onoff__knob { width: 11px; height: 11px; top: 3px; left: 4px; }
  #content2 .wiz-rail .ri-brand-row .brand-onoff.is-on .brand-onoff__knob { left: 27px; }   /* 42 - 11 - 4 = 27 */
  #content2 .wiz-rail .ri-brand-row .brand-onoff .brand-onoff__on,
  #content2 .wiz-rail .ri-brand-row .brand-onoff .brand-onoff__off { font-size: 9px; }
  #content2 .wiz-rail .ri-brand-row .brand-onoff .brand-onoff__on { left: 6px; }
  #content2 .wiz-rail .ri-brand-row .brand-onoff .brand-onoff__off { right: 5px; }
  /* 收合鈕靠藍條最右，前面隔一條白色細直線與「製作及使用」分開。 */
  #content2 .wiz-rail .ri-expand { margin-left: auto; padding-left: 0; }
  #content2 .wiz-rail .ri-expand::before {
    content: '';
    align-self: center;
    flex: 0 0 auto;
    width: 1px;
    height: 18px;   /* 與黃色徽章等高，短於整條藍色標頭 */
    margin-right: 10px;
    background: rgba(255, 255, 255, .4);
  }

  /* 收合時橫幅一併隱藏（只留藍色標頭）。 */
  #content2 .wiz-rail[data-collapsed="true"] .ri-mobile-banner { display: none; }

  /* 手機「開始前」橫幅：藍色標頭下、獲客列上，米黃底。 */
  #content2 .wiz-rail .ri-mobile-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -18px;
    padding: 12px 18px;
    background: #fff7ed;
  }
  /* 上方全域規則把所有 .ri-badge 藏了；橫幅內的「開始前」徽章要顯示回來。 */
  #content2 .wiz-rail .ri-mobile-banner .ri-badge { display: inline-block; margin-right: 0; }
  #content2 .wiz-rail .ri-mobile-banner__txt {
    font-size: 1.45rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.3;
  }

  /* 手機三列：緊貼藍色標頭（去上分隔線與留白），整體壓縮成更密的清單。 */
  #content2 .wiz-rail .ri-list {
    margin: 0 -18px -18px;
    padding: 0 18px 6px;
    border-top: none;
  }
  #content2 .wiz-rail .ri-item { position: relative; align-items: center; gap: 12px; padding: 9px 0; }
  #content2 .wiz-rail .ri-item__fig { width: 46px; height: 42px; }
  /* 標題：名稱＋（補充）以行內流排、自然換行整寬顯示，不再與「看說明」擠同一欄
     （避免像「關於我」補充較長時把名稱硬折成兩行）。右側預留「看說明」的位置。 */
  #content2 .wiz-rail .ri-item__head { display: block; margin-bottom: 1px; padding-left: 0; padding-right: 58px; }
  #content2 .wiz-rail .ri-item__title { display: inline; font-size: 1.5rem; }
  #content2 .wiz-rail .ri-item__note,
  #content2 .wiz-rail .ri-item__note--must { font-size: 1.15rem; margin-left: 0; }
  /* 說明改整寬（拿掉桌機為「看說明」預留的右側 100px）、字級與行高收緊。 */
  #content2 .wiz-rail .ri-item__desc { padding-left: 0; padding-right: 0; font-size: 1.3rem; line-height: 1.45; }
  /* 「看說明 >」移到項目右上角（絕對定位），與標題首行對齊，讓標題可整寬顯示。 */
  #content2 .wiz-rail .ri-more { position: absolute; top: 9px; right: 0; font-size: 1.2rem; }
}

/* 復原/重做：覆蓋 milligram 預設的紫色 hover/focus，改為 LINE 綠系（白底膠囊 → 淡綠 hover）。
   用 #flex-history-bar 前綴（含 id）提高權重，蓋過 milligram 的 button:hover 與 JS 注入樣式。 */
#flex-history-bar .flex-history-btn {
    background: #fff;
    color: #334155;
    border: 1px solid rgba(15, 23, 42, .12);
}

#flex-history-bar .flex-history-btn:hover:not(:disabled),
#flex-history-bar .flex-history-btn:focus:not(:disabled) {
    background: #e9f8ef;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    outline: none;
    box-shadow: 0 2px 6px rgba(6, 199, 85, .18);
}

#flex-history-bar .flex-history-btn:active:not(:disabled) {
    background: #d4f2df;
}

.template-list {

    width: 100%;

    background-color: #ebebeb;
    padding: 8px;
    border-radius: 12px;
}

/* .template-list 是 d-flex justify-content-center，#template-area 變成 flex item，
   若不指定寬度會依內容 max-content 撐開（手機兩欄 col-6 → 400px）而溢出灰色容器。
   強制吃滿父容器內容寬度，讓格子收進容器內。 */
#template-area {
    width: 100%;
    min-width: 0;
}

.template-type {
    position: sticky;
    top: 62px;
    background-color: #fff;
    z-index: 5;
    padding: 8px;
}

.bottom-sticky {
    position: sticky;
    bottom: 0;
    background-color: #fff;
    z-index: 99999;
    padding: 8px;
}

.sim-radio {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 8px;
    background: #fff;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

input[type="radio"]:checked+label>.sim-radio {
    border: 5px solid var(--bs-primary);
}
#button-url-input,p.oa_line_use.d-none+#oa-prefix+#button-url-input{
    border-radius: 6px;
}
#oa-prefix+#button-url-input{
    border-radius: 0px 6px 6px 0px;
}
.qr-setting,
input[type="checkbox"] {
    display: none;

}

.qr-setting {
    background-color: #f0f0f0b1;
    padding: 8px;
    border-radius: 8px;
}

input[type="radio"]:checked+label+.qr-setting {
    display: block;
}

.form-control {
    background-color: #fff !important;
}

.help-btn {
    display: none;
}

.help-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.help-btn:checked~.help-content {
    max-height: 700px;
}

#line-name-card-form {
    display: flex;
    width: 100%;
    margin-bottom: 0;
}

/* Utility Classes */
.shadow {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.mt-auto {
    margin-top: auto;
}

.pt-3 {
    padding-top: 1rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.pb-3 {
    padding-bottom: 1rem;
}

.px-7 {
    padding-left: 4rem;
    padding-right: 4rem;
}

.py-md-6 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-xl-10 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.mt-7 {
    margin-top: 3rem;
}

.w-100 {
    width: 100%;
}

.imgfit {
    object-fit: contain;
    height: 100%;
    width: 100%;
}
#modalContainer .modal-iframe-content{
    height: calc(667px + 3.5rem);
}
.success-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.success-icon {
    color: var(--success-green);
    font-size: 48px;
    margin-bottom: 24px;
}

.success-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--line-dark);
    margin-bottom: 16px;
}

.success-message {
    font-size: 16px;
    color: var(--line-gray);
    margin-bottom: 32px;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.action-button {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.action-button.primary {
    background: var(--line-green);
    color: white;
}

.action-button.secondary {
    background: #EBEBEB;
    color: var(--line-gray);
}

.action-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.next-steps {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.next-steps h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--line-dark);
    margin-bottom: 20px;
}

.steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.steps-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #EBEBEB;
}

.steps-list li:last-child {
    border-bottom: none;
}

.step-number {
    width: 24px;
    height: 24px;
    background: var(--line-green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.step-description {
    color: var(--line-gray);
    font-size: 14px;
}

/* Benefits section */
.benefits-box {
    background: #f8f9fa;
}

.benefits {

    border-radius: 12px;
    padding: 24px;
    margin-top: 32px;
}

.benefits h3 {
    color: var(--line-dark);
    font-size: 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.benefits h3 i {
    color: var(--line-green);
}

.benefits ul {
    list-style: none;
}

.benefits ul li {
    margin-bottom: 16px;
    padding-left: 28px;
    position: relative;
    color: var(--line-dark);
}

.benefits ul li i {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--line-green);
    font-size: 16px;
}

.benefits ul li ul {
    margin-top: 8px;
}

.benefits ul li ul li {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--line-gray);
}

.MdBtn {
    cursor: pointer;
}

.size-hint {
    display: none;
}

/* 手機提醒右側的關閉鈕（提醒只在手機顯示，桌機 .size-hint 整體隱藏，連帶藏住此鈕）。 */
.size-hint-close {
    flex: none;
    width: 26px;
    height: 26px;
    margin: -2px -2px -2px 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #9a8a3a;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}

.size-hint-close:hover {
    background: rgba(154, 138, 58, .12);
}

.list-styled {
    list-style: initial;
    list-style-type: decimal;
    margin-left: 20px;
}

.list-styled li {
    display: list-item;
    margin-bottom: 8px;
    list-style: auto;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-button {
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    background-color: #f0f0f0;
    border: 1px dashed #aaa;
    margin-right: 8px;
}

.tab-button.active,
.tab-button:hover {
    background-color: var(--bs-primary);
    color: #fff;
}

/* ── 右側欄：外層分頁（卡片之上）＋白色內容卡片 ── */

/* 外層分頁（.rail-tabs/.rail-tab/.rail-tab-badge）樣式統一定義於下方
   「展開主體頂列（compact）」區塊，避免同名規則重複互相覆蓋。 */

/* 內容卡片：白底、圓角、陰影，浮在灰底之上 */
.rail-card {
    position: relative;
    background-color: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(17, 24, 39, .12);
}
/* 三個分頁（獲客按鈕／關於我／極速分享）白卡右上角：對應「製作及使用」的手繪 sketch。
   由 activatePill() 依目前分頁切換 src；pill-intro（總覽）不顯示（其本身已有名片插圖）。 */
.rail-corner-sketch {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 52px;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 2;
}

.rail-panel {
    display: none;
    padding: 24px;
}

.rail-panel.active {
    display: block;
}

/* ══ 右側說明欄：收合／展開 + 三個分頁（底線式）+ 直向堆疊兩段 + 引導文字 ══
   預設收合成一顆「使用技巧」標籤（見 create.html 的 window.__lncRail），
   點標籤或卡片上的小按鈕才展開，降低對編輯名片的干擾。 */

/* ── 收合狀態：只顯示「使用技巧」引導卡（約 20% 寬），隱藏頂列與 pill 列、
   強制顯示引導、其餘 pill 內容隱藏；引導卡本身即「點技巧看做法」的入口。 ── */
.wiz-rail[data-collapsed="true"] .rail-head,
.wiz-rail[data-collapsed="true"] .rail-tabs { display: none; }
.wiz-rail[data-collapsed="true"] .pill-panel { display: none; }
.wiz-rail[data-collapsed="true"] #pill-intro { display: block; }
/* 收合時：不顯示「開始前」徽章、長標題與導語，改用迷你標題「使用技巧」。 */
.wiz-rail[data-collapsed="true"] .ri-badge,
.wiz-rail[data-collapsed="true"] .ri-title__full,
.wiz-rail[data-collapsed="true"] .ri-hero,
.wiz-rail[data-collapsed="true"] .ri-lead-row,
.wiz-rail[data-collapsed="true"] .ri-lead { display: none; }
.wiz-rail[data-collapsed="true"] .ri-title__mini { display: inline; }
/* 收合時：「使用技巧」迷你標題做成有底色的卡片標頭（貫穿卡片頂緣）。 */
.wiz-rail[data-collapsed="true"] .ri-title {
    margin: -22px -22px 8px;
    padding: 4px 18px;
    background: #1e40af;
    border-radius: 16px 16px 0 0;
    font-size: 1.55rem;
}
.wiz-rail[data-collapsed="true"] .ri-title__mini { color: #fff; }
/* 收合時：迷你標題同列右側顯示「« 展開」，點擊展開右側欄；尺寸同展開頂列的「收合 »」。 */
.ri-expand { display: none; }
.wiz-rail[data-collapsed="true"] .ri-expand {
    display: inline-block;
    margin-left: auto;   /* 推到最右，與「收合 »」對齊 */
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
}
.wiz-rail[data-collapsed="true"] .ri-expand:hover { background: rgba(255, 255, 255, .16); }

/* ── 展開主體頂列（compact）：使用技巧徽章 + 三個底線式分頁 + 收合鈕 同一列。
   以 baseline 對齊讓徽章文字／分頁／收合字上下對齊；字級略縮小。 ── */
.rail-head {
    display: flex;
    align-items: baseline;
    gap: 4px 14px;
    margin-bottom: 6px;
    padding: 0 4px;
}
.rail-tab-badge {
    flex: 0 0 auto;
    display: inline-block;
    margin: 0 2px 0 0;
    padding: 4px 12px;
    border-radius: 6px;
    background: #1e40af;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;               /* #1：可點擊回到主內容（使用技巧總覽） */
    transition: background .15s;
}
.rail-tab-badge:hover { background: #1a3aa0; }
.rail-collapse {
    flex: 0 0 auto;
    margin-left: auto;   /* 推到最右 */
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
}
.rail-collapse:hover { color: #1e40af; background: rgba(30, 64, 175, .06); }

/* 三個主分頁：底線式分頁，與 head 同列。 */
.rail-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    border-bottom: none;
}
.rail-tab {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #64748b;
    /* #2：縮短底部內距，讓 active 底線更貼近分頁文字。 */
    padding: 2px 2px 1px;
    font-size: 1.55rem;
    font-weight: 800;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    /* #1：清掉 milligram button 預設的 4px 圓角，讓 active 底線是「平直」而非兩端彎起。 */
    border-radius: 0;
    margin-bottom: 0;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.rail-tab.active { color: #1e40af; border-bottom-color: #1e40af; }
.rail-tab:not(.active):hover { color: #1e3a8a; }
/* 覆蓋 milligram/Bootstrap 預設 button hover/focus 灰底外框 */
.rail-tabs .rail-tab:hover,
.rail-tabs .rail-tab:focus,
.rail-tabs .rail-tab:active { background: transparent; border-color: transparent; box-shadow: none; outline: none; }
.rail-tabs .rail-tab.active:hover,
.rail-tabs .rail-tab.active:focus,
.rail-tabs .rail-tab.active:active { border-bottom-color: #1e40af; }

/* pill 內容面板（外層切換） */
.pill-panel { display: none; }
.pill-panel.active { display: block; }

/* ── 直向堆疊分頁（獲客／極速分享）：不用子分頁，兩段內容上下並陳 ── */
.pill-panel--stacked .rail-panel { display: block; padding: 12px 24px 14px; }
/* #2：把段落內容底部多餘留白清掉，讓藍卡與下方分隔線更貼近（各段一致）。 */
.pill-panel--stacked .line-friend-intro,
.pill-panel--stacked .cta-intro { margin-bottom: 0; }
.pill-panel--stacked .line-friend-intro > :last-child,
.pill-panel--stacked .cta-intro > :last-child { margin-bottom: 0; }
/* 極速分享：DOM 維持「傳給好友」在前，用 flex order 讓「活動現場」顯示在上 */
.pill-panel--stacked #rail-share { display: flex; flex-direction: column; }
.rail-section--top { order: 1; }
.rail-section--bottom { order: 2; border-top: 1px solid #e6eaf0; }  /* 兩段之間的簡單分隔線 */
/* 每段標題：藍色前導色條 + 粗體，作為「上段／下段」的區隔標籤 */
.rail-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 18px 24px 0;
    font-size: 1.5rem;
    /* #3：標題更銳利、更有份量（字重加到 900、字距略收）。 */
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #0f172a;
}
.rail-section__title::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 1.05em;
    border-radius: 999px;
    background: #1e40af;
}
/* 標題改用對應圖示（沿用主內容「獲客按鈕」圖示）取代垂直色條時，隱藏色條。 */
.rail-section__title--icon::before { display: none; }
.rail-section__ico {
    flex: 0 0 auto;
    width: 1.2em;
    height: 1.2em;
    color: #1e40af;
}

/* 撕膠帶高亮：只用在「獲客按鈕」分頁兩個 section 標題（加 LINE 聯繫／連結獲客表單）。
   黃色底靠 ::before 疊在文字後方，經 #torn-tape 濾鏡讓左右緣呈手撕不規則狀。 */
.tape-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rail-tape {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px;
    isolation: isolate;
    transform: rotate(-0.7deg);
}
.rail-tape::before {
    content: "";
    position: absolute;
    inset: -1px -2px;
    z-index: -1;
    background: #ffe97a;
    filter: url(#torn-tape);
}

/* 引導文字（首次/未選 pill）＝「使用技巧」引導卡，收合時常駐顯示。
   字級對齊分頁內容（.lf-lead 約 1.5rem、標題約 1.7rem）加大。 */
.rail-intro { position: relative; padding: 22px; background: #fff7ed; border-radius: 16px; }
/* 手繪名片插圖：與導語同一列（左文字、右插圖），不再絕對定位。 */
.ri-hero {
    flex: 0 0 auto;
    width: 118px;
    height: auto;
    align-self: center;
    pointer-events: none;
    user-select: none;
}
/* 徽章與標題同一列，佔滿整寬（插圖已下移至導語列）。 */
.ri-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px;
    line-height: 1.25;
}
.ri-title__full { font-weight: 900; }
.ri-title__mini { display: none; }   /* 收合時才顯示（見上方收合規則） */
/* 「關於我」開關列：只在手機出現（桌機改用名片旁的 .brand-onoff--card）。 */
.ri-brand-row { display: none; }

/* ── 「關於我」顯示開關：標籤在軌道「內側」的 ON/OFF toggle ─────────────
   ON  → 綠底、鈕在右、左側顯示「ON」（看不到 OFF）。
   OFF → 灰底、鈕在左、右側顯示「OFF」（看不到 ON）。
   桌機：擺在總覽標題列最右（＝原 OFF 位置），不顯示「顯示「關於我」」字樣、無外框徽章。
   手機：外層加淺藍膠囊底＋左側標籤，規則見上方 @media 區塊。 */
.brand-onoff {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* margin 全歸零＋左 auto：清掉 milligram 對 <button> 的預設 margin-bottom:1rem，
       否則 align-self:center 會讓整顆往上偏 5px（與標題／收合鈕高低不齊）。 */
    margin: 0 0 0 auto;
    /* 清掉 milligram 對 <button> 的預設 height:3.8rem，讓徽章貼合內容高度（手機淡黃底才不會過高）。 */
    height: auto;
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    flex: 0 0 auto;
}
.brand-onoff__label {
    display: none;   /* 桌機不需標籤 */
    font-size: 1.3rem;
    font-weight: 700;
}
.brand-onoff__track {
    position: relative;
    width: 60px;
    height: 26px;
    border-radius: 999px;
    background: #8b95a6;   /* OFF：灰 */
    transition: background .18s ease;
    flex: 0 0 auto;
}
.brand-onoff.is-on .brand-onoff__track { background: #16a34a; }   /* ON：綠 */
.brand-onoff__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: left .18s ease;
    z-index: 1;
}
.brand-onoff.is-on .brand-onoff__knob { left: 37px; }   /* 60 - 20 - 3 = 37 */
/* 軌道內側文字：ON 靠左、OFF 靠右（在鈕的另一側）。 */
.brand-onoff__on,
.brand-onoff__off {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    color: #fff;
}
.brand-onoff__on { left: 10px; }
.brand-onoff__off { right: 10px; }
/* OFF（預設）：藏 ON 字；ON：藏 OFF 字。 */
.brand-onoff:not(.is-on) .brand-onoff__on { display: none; }
.brand-onoff.is-on .brand-onoff__off { display: none; }

/* 卡片旁「關於我/設定」膠囊右側的小開關（由 JS 建立＋絕對定位；桌機顯示，手機由
   positionFooterHelp 隱藏，改用總覽標頭的開關）。比總覽版再小一號。 */
.brand-onoff--card {
    position: absolute;
    z-index: 25;
    transform: translateY(-50%);
    margin: 0;
}
/* 比「關於我」膠囊略矮、字略小；鈕與 ON/OFF 字都留一點間距。 */
.brand-onoff--card .brand-onoff__track { width: 46px; height: 20px; }
.brand-onoff--card .brand-onoff__knob { width: 14px; height: 14px; top: 3px; left: 4px; }
.brand-onoff--card.is-on .brand-onoff__knob { left: 28px; }   /* 46 - 14 - 4 = 28 */
.brand-onoff--card .brand-onoff__on { left: 6px; }
.brand-onoff--card .brand-onoff__off { right: 5px; }
.brand-onoff--card .brand-onoff__on,
.brand-onoff--card .brand-onoff__off { font-size: 10px; }

/* 桌機（≥1200）：總覽標頭那顆開關隱藏，改用卡片旁的 card switch。 */
@media (min-width: 1200px) {
    #rail-brand-switch { display: none; }
}

/* 手機專用「開始前」橫幅：桌機隱藏（桌機標頭已含此內容）。 */
.ri-mobile-banner { display: none; }

/* 導語列：左邊文字、右邊名片插圖。 */
.ri-lead-row { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.ri-lead { flex: 1 1 auto; font-size: 1.5rem; color: #334155; margin: 0; line-height: 1.8; }

/* 三個技巧項目：標題一行 + 說明一行（共 2 行）。 */
/* 三個技巧項目維持白底（米黃只留給上方引導標題＋導語），向左右／底部滿版
   貼齊卡片邊，並在第一段「獲客按鈕」上方補一條分隔線與導語區隔。 */
.ri-list {
    list-style: none;
    margin: 0 -22px -22px;
    padding: 2px 22px 22px;
    background: #fff;
    border-top: 1px solid #dbe3f0;
    border-radius: 0 0 16px 16px;
}
/* 每個技巧項目：左側手繪大圖 + 右側內容（標題列＋說明）兩欄，圖垂直置中對齊兩行。 */
.ri-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
}
/* 左欄手繪插圖：固定框、object-fit contain 維持各自比例並置中，欄寬統一。 */
.ri-item__fig {
    flex: 0 0 auto;
    width: 62px;
    height: 54px;
    object-fit: contain;
    object-position: center;
}
/* 右欄內容：撐滿剩餘寬度，min-width:0 讓內部 flex 可正常收縮換行。 */
.ri-item__body { flex: 1 1 auto; min-width: 0; }
/* 收合時（右側欄變窄）：縮小左側插圖，避免擠壓文字。 */
.wiz-rail[data-collapsed="true"] .ri-item__fig { width: 46px; height: 42px; }
.wiz-rail[data-collapsed="true"] .ri-item { gap: 10px; }
/* 收合時：第一段（獲客按鈕）緊貼藍色標頭，減少上方留白。 */
.wiz-rail[data-collapsed="true"] .ri-list .ri-item:first-child { padding-top: 2px; }
/* 三段之間統一用同一條分隔線（比照下方「關於我」原本較深的 #dbe3f0，避免上下深淺不一）。 */
.ri-item + .ri-item { border-top: 1px solid #dbe3f0; }
/* 標題列：名稱＋補充說明靠左、「看說明 >」靠右，同一列。左側補內距與圖拉開。 */
.ri-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    padding-left: 8px;
}
.ri-item__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 1.65rem;
    font-weight: 800;   /* 名稱粗體（「必須設置」等補充說明另設 400 非粗體） */
    color: #1e40af;
}
.ri-item__ico { flex: 0 0 auto; width: 1.3em; height: 1.3em; }
/* 標題後方的補充說明：較小、棕色，弱化為輔助文字。 */
.ri-item__note { font-size: 1.3rem; font-weight: 400; color: #d92d20; letter-spacing: 0; margin-left: -6px; }
/* 「必須設置」為必填提示：紅色、非粗體、字略大，並收窄與標題的間距。 */
.ri-item__note--must { color: #d92d20; font-weight: 400; font-size: 1.3rem; }
/* 說明文字：獨立一列、與標題左內距對齊；右側保留約「看說明」欄的寬度，維持既有換行寬度不變。 */
.ri-item__desc { display: block; padding-left: 8px; padding-right: 100px; font-size: 1.4rem; color: #334155; line-height: 1.6; }
/* 「看說明 >」：標題列右側，與標題同列靠右，點擊展開右側欄並切到該 pill。 */
.ri-more {
    flex: 0 0 auto;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e40af;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.ri-more:hover { text-decoration: underline; }

/* 手機說明 modal：內容比照桌機分頁（直向堆疊、無子分頁）。把桌機用的內距對齊 modal
   （modal body 已有內距），並保留段落分隔線、段落順序（活動分享在上）。 */
.fh-modal__body .fh-modal__pill { display: flex; flex-direction: column; }
.fh-modal__body .fh-modal__pill .rail-section--top { order: 1; }
.fh-modal__body .fh-modal__pill .rail-section--bottom { order: 2; }
.fh-modal__body .fh-modal__pill .rail-acquire-foot { order: 3; }
.fh-modal__body .fh-modal__pill .rail-section__title { padding: 14px 0 0; }
/* 視覺最上段（.rail-section--top，order:1）標題不留上內距；不用 :first-of-type，
   因為極速分享的 DOM 順序是「傳給好友」在前，會讓 :first-of-type 選不到「活動分享」而多出上緣空白。 */
.fh-modal__body .fh-modal__pill .rail-section--top .rail-section__title { padding-top: 0; }
.fh-modal__body .fh-modal__pill .rail-panel { padding: 6px 0 12px !important; }
.fh-modal__body .fh-modal__pill .rail-acquire-foot { padding: 16px 0 0; }
.fh-modal__body .fh-modal__pill .line-friend-intro,
.fh-modal__body .fh-modal__pill .cta-intro { margin-bottom: 0; }

/* 極速分享「傳給好友」底部示意圖（右側欄與 modal 共用）；滿版適寬。 */
.rs-share-img { display: block; width: 100%; height: auto; margin: 6px auto 0; border-radius: 10px; }
/* 極速分享兩段沿用 .line-friend-intro 樣式後，徽章在 modal（clone .rs-body）也要生效 */
.rs-body .hl-badge {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    padding: 5px 14px;
    border-radius: 7px;
    background: #d97706;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    line-height: 1.15;
    white-space: nowrap;
}

/* 獲客按鈕分頁底部共用示意圖（屬整個分頁，非單指 CTA 段，避免誤導）；圖片滿版適寬。
   圖上方不加分隔線：CTA 段的藍卡已自成一塊，再壓一條線會顯得切碎。 */
.rail-acquire-foot { padding: 20px 24px 22px; }
.rail-acquire-foot img { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 10px; }
.rail-acquire-foot__note { text-align: center; font-size: 1.2rem; color: #64748b; margin: 10px 0 0; line-height: 1.6; }

/* #rail-share 兩段的 .fh-tip-lead / .fh-tips 內容沿用 flex-preview-editor.js
   注入的全域 footer-help 樣式（該 <style> 於 editor init 一律注入），使右側欄與
   卡片 modal 版外觀一致，故此處不另外覆寫。 */

/* 卡片上的說明小按鈕（lhs pills）：hover 時文字維持原色、保持可讀，不變白也不隱藏。
   milligram/Bootstrap 有全域 button:hover{color:#fff} 會把字變白（見 flex-preview-editor.js
   約 3689 行註解），且 flex-preview-editor.js 注入的 .flex-help-btn:hover 會把顏色改深；
   這裡把 __txt 顏色鎖回原色並保持顯示（!important 蓋過稍後注入的樣式）。 */
.flex-help-btn:hover .flex-help-btn__txt,
.flex-help-btn.is-lit .flex-help-btn__txt,
.reset-zone .flex-help-btn:hover .flex-help-btn__txt,
.reset-zone .flex-help-btn.is-lit .flex-help-btn__txt {
    color: #566070 !important;
    visibility: visible;
}

/* 「加 LINE 聯繫說明」分頁的開頭說明文字 + LINE 類型選擇卡片 */
.line-friend-intro {
    margin-bottom: 20px;
}

/* 加 LINE 段（獲客按鈕展開）：收緊「標題↔開頭金句」與「藍卡↔下方分隔線」的間距，
   讓版面更精簡但仍保留舒適的呼吸空間。左右內距仍沿用 .rail-panel 的 24px。 */
#rail-line { padding-top: 6px; padding-bottom: 16px; }
#rail-line .line-friend-intro { margin-bottom: 0; }
/* 加 LINE 段的藍卡下方無其他內容，取消底部外距。 */
#rail-line .cta-highlight { margin-bottom: 0; }
/* 藍卡右上角小標籤（避免失聯／收集需求）：疊在卡片右上角、跨在上緣（參考附圖）。
   白字＋加字距＋不粗體；橘底維持與其他重點徽章一致的色系。兩段共用同一樣式。 */
.cta-highlight__tag {
    position: absolute;
    top: -3px;
    right: 10px;
    transform: translateY(-50%);
    padding: 3px 12px;
    background: #b45309;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    /* 字距會在最後一字右側多出空白，補回左側讓字在標籤內置中 */
    text-indent: 0.14em;
    line-height: 1.45;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
}

.line-friend-intro .lf-lead {
    font-size: 1.4rem;
    line-height: 1.85;
    color: #334155;
    /* 導語↔藍卡的間距統一交給藍卡的 margin-top（各段一致）。 */
    margin-bottom: 0;
}

/* 開頭一句總結（標題式 lead） */
.line-friend-intro .lf-headline {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.7;
    color: #7c2d2d;
    margin: 0 0 18px;
}

/* 三個說明分頁共用的標題徽章（取代標題前的【】），沿用原「進階延伸」橘色徽章樣式：
   CJK 白字疊在橘底上，過粗會糊在一起，故用中等字重(600)＋字距讓筆畫分明。 */
.rail-panel .hl-badge,
.rail-intro .hl-badge,
.rail-section__title .hl-badge {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    padding: 5px 14px;
    border-radius: 7px;
    /* 底色加深、字級加大：白字在橘底上對比提高、更清楚（原 #d97706 對比偏低）。 */
    background: #b45309;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    /* 字距會在最後一字右側多出空白，補回左側讓字在方塊內置中 */
    text-indent: 0.1em;
    line-height: 1.15;
    white-space: nowrap;
}

/* 「開始前」徽章：更圓的膠囊外型；縮小與標題間距。 */
.rail-intro .ri-badge { border-radius: 999px; margin-right: 8px; }

/* 段落標題列（如「加 LINE 聯繫」）右側徽章：置於行末、靠右對齊（比照 CTA 段徽章）。 */
.rail-section__title .hl-badge {
    margin-left: auto;
    margin-right: 0;
}

/* 三個說明分頁共用的重點詞螢光標記（沿用「加 LINE 聯繫」.lf-mark 綠色底線樣式） */
.rail-panel .hl-mark {
    font-weight: 700;
    background: linear-gradient(to top, rgba(252, 165, 165, .75) 33%, transparent 33%);
}

/* 螢光筆式底線：色塊只蓋住文字下方 1/3 高度 */
.line-friend-intro .lf-mark {
    font-weight: 700;
    background: linear-gradient(to top, rgba(252, 165, 165, .75) 33%, transparent 33%);
}

/* 淡藍重點卡（沿用 CTA 分頁藍卡樣式，內文字級同 .lf-lead） */
.line-friend-intro .cta-highlight {
    position: relative;   /* 角落標籤（避免失聯／口碑擴散／現場收單）定位基準 */
    margin: 14px -6px;
    padding: 10px 12px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
}
.line-friend-intro .cta-highlight p {
    font-size: 1.4rem;
    line-height: 1.85;
    color: #334155;
    margin: 0;
}

/* 重點標題（為什麼需要加 LINE 入口？） */
.line-friend-intro .lf-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.65rem;
    font-weight: 800;
    color: #1e40af;
    margin: 24px 0 12px;
}

.line-friend-intro .lf-title:first-child {
    margin-top: 0;
}

.line-friend-intro .lf-title i {
    font-size: 1.5rem;
    color: #1e40af;
}

/* 內文中隨字出現的隱喻小圖示 */
.line-friend-intro .lf-ico {
    font-size: 1.25em;
    vertical-align: -0.12em;
    margin: 0 2px;
}

.line-friend-intro .lf-ico--line { color: #06C755; }
.line-friend-intro .lf-ico--oa { color: #1e40af; }
.line-friend-intro .lf-ico--share { color: #f59e0b; }

/* LINE 帳號類型：改用整張說明圖（名片全線支援加入以下 2 類好友帳號） */
.line-friend-intro .lf-types-img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 16px;
    border-radius: 10px;
}

/* 「1 PAGE 個人品牌」分頁的說明文字 */
.brand-intro {
    margin-top: 4px;
}
/* 桌機右側欄：關於我分頁的膠帶標題往上收一點，減少上方留白（僅桌機 rail；手機說明
   modal 內的 brand-intro 已被搬出 .wiz-rail，不受影響）。 */
#content2 .wiz-rail .brand-intro {
    margin-top: -4px;
}

/* 分頁標題：比照各段落標題（icon + 黑字粗體），與加 LINE／CTA／分享一致。 */
.brand-intro .bi-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.5;
    color: #0f172a;
    margin: 0 0 16px;
}

.brand-intro .bi-title-ico {
    width: 1.4em;
    height: 1.4em;
    object-fit: contain;
    vertical-align: -0.35em;
    margin: 0 4px;
}

/* 標題前的「進階延伸」徽章：當作小標籤。CJK 白字疊在橘底上，過粗會糊在一起，
   故用中等字重(600)＋字距讓筆畫分明；方角（不用圓角），與大標題清楚區隔。 */
.brand-intro .bi-title-badge {
    display: inline-block;
    vertical-align: 0.1em;
    margin-right: 10px;
    padding: 5px 14px;
    border-radius: 7px;
    background: #d97706;
    color: #fff;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.14em;
    /* 字距會在最後一字右側多出空白，補回左側讓字在方塊內置中 */
    text-indent: 0.14em;
    line-height: 1.15;
    white-space: nowrap;
}

.brand-intro .bi-lead {
    font-size: 1.4rem;
    line-height: 1.85;
    color: #334155;
    margin-top: 9px;       /* 與上方膠帶標題／勾選說明拉開，讓「如果…」行銷文另起一段。 */
    margin-bottom: 10px;
}

/* 用一頁 Profile 建立信任的示意圖（取代原本的重點介紹卡片）。
   圖內元素偏小，往左右各外擴 18px（.rail-panel 內距為 24px，留 6px 邊）把欄寬用滿。 */
.brand-intro .bi-build-trust {
    display: block;
    width: calc(100% + 36px);
    max-width: none;
    height: auto;
    margin: 18px -18px 22px;
    border-radius: 14px;
}
/* 卡片說明 modal 內的 .rail-panel 左右內距為 0，外擴會撐破版面，還原成滿版即可。 */
.fh-modal__body .fh-modal__pill .bi-build-trust {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.brand-intro .bi-heading {
    font-size: 1.65rem;
    font-weight: 800;
    color: #1e40af;
    margin: 24px 0 12px;
}

.brand-intro .bi-text {
    font-size: 1.4rem;
    line-height: 1.75;
    color: #475569;
    margin: 0 0 12px;
}

.brand-intro .bi-link {
    color: #1e40af;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* 兩種情境切換（已有 Profile / 還沒有）：沿用 iOS 風 segmented control + 行動按鈕 */
/* 把「已在 X Lead…」整段做成獨立的決策卡片區塊：淡藍底＋細框＋圓角，
   與上方教學介紹明顯區隔；白色選項卡與後續說明都落在這張卡內，視為一組。 */
/* 「關於我」開啟後的操作提示（取代舊的「已擁有／還沒有」藍色情境卡）。
   只是純文字步驟說明，不再是填色卡片。 */
.brand-hint {
    margin: 18px 0 4px;
    padding: 0;
}
.brand-hint .bh-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #334155;
}
.brand-hint .bh-step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 999px;
    background: #2f6fed;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}
.brand-hint .bh-sub {
    margin: 6px 0 0;
    font-size: 1.3rem;
    color: #64748b;
}
.brand-hint .bs-create-link { font-weight: 700; }

.brand-scenario {
    margin: 24px 0 4px;
    padding: 18px 18px 20px;
    background: #f2f7fd;
    border: 1px solid #d6e2f2;
    border-radius: 14px;
}

/* 情境分頁：全寬方框 segmented control，帶圖示、選中填滿品牌藍 */
.brand-scenario .bs-seg {
    display: flex;
    width: 100%;
    gap: 0;
    padding: 0;
    background: #fff;
    border: 1.5px solid #c7d0db;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.brand-scenario .bs-seg-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    /* 蓋掉 milligram 對 button 的強制高度/大寫/字距 */
    height: auto;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    margin-bottom: 0;
    font-size: 1.4rem;
    font-weight: 700;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #5a6470;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.brand-scenario .bs-seg-btn i {
    font-size: 1.05em;
    opacity: .9;
}

.brand-scenario .bs-seg-btn + .bs-seg-btn {
    border-left: 1.5px solid #c7d0db;
}

.brand-scenario .bs-seg-btn.active {
    background: #1e40af;
    color: #fff;
    box-shadow: none;
}

.brand-scenario .bs-panel {
    display: none;
}

.brand-scenario .bs-panel.active {
    display: block;
}

/* 「我已有 Profile」：說明 + 一鍵連結按鈕（沿用先前的行動按鈕，不用 radio） */
.brand-scenario .bs-desc {
    font-size: 1.4rem;
    line-height: 1.7;
    color: #475569;
    margin: 0 0 14px;
}

/* 「已連結」確認列：綠底＋綠勾＋可點網址，置於說明與「一鍵連結」鈕之間 */
.brand-scenario .bs-linked {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #15803d;
}

.brand-scenario .bs-linked[hidden] {
    display: none;
}

.brand-scenario .bs-linked-ico {
    flex: 0 0 auto;
    margin-top: 0.15em;
    color: #16a34a;
    font-size: 1.25em;
}

.brand-scenario .bs-linked-body {
    min-width: 0;
    word-break: break-all;
}

.brand-scenario .bs-linked-url {
    color: #15803d;
    font-weight: 700;
    text-decoration: underline;
    word-break: break-all;
}

.brand-scenario .bs-linked-url:hover {
    color: #166534;
}

.brand-scenario .bs-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    /* 蓋掉 milligram 對 button 的強制高度/大寫/字距/紫底 */
    height: auto;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    margin-bottom: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(30, 64, 175, .22);
    transition: transform .15s, box-shadow .15s;
}

.brand-scenario .bs-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(30, 64, 175, .28);
}

.brand-scenario .bs-action i {
    font-size: 1.15em;
}

/* 內文中代表 QR Code 的小圖示（取代「QR Code」字樣）；強制小尺寸避免巨圖 */
.brand-scenario .bs-qr-ico {
    display: inline-block;
    width: 1.4em !important;
    height: 1.4em !important;
    max-width: 1.4em;
    max-height: 1.4em;
    margin: 0 1px;
    vertical-align: -0.35em;
    object-fit: contain;
}

/* 問句標題（單選題的提問） */
.brand-scenario .bs-question {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.6;
    color: #1f2937;
    margin: 0 0 12px;
}

.brand-scenario .bs-question b {
    color: #1e40af;
}

/* 選項卡（radio 卡）：直向堆疊、可選，預設不選 */
.brand-scenario .bs-options {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* 選項選定後才滑出的後續說明（一鍵連結 / 建立引導） */
.brand-scenario .bs-followup {
    margin-top: 16px;
}

.brand-scenario .bs-followup[hidden] {
    display: none;
}

/* 「建立」文字連結 */
.brand-scenario .bs-create-link {
    color: #1e40af;
    font-weight: 700;
    text-decoration: underline;
}

.brand-scenario .bs-create-link:hover {
    color: #1e3a8a;
}

.brand-scenario .bs-opt {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 11px 12px;
    /* 蓋掉 milligram 對 button 的強制高度/單行/大寫/字距，避免內文溢出邊框（走位） */
    height: auto;
    line-height: 1.4;
    white-space: normal;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 0;
    background: #fff;
    border: 1.5px solid #d7dde6;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.brand-scenario .bs-opt:hover {
    border-color: #9fb0c6;
    box-shadow: 0 4px 14px rgba(30, 64, 175, .08);
}

/* radio 指示器：行內、置於文字左側（緊湊單行排版） */
.brand-scenario .bs-opt-radio {
    position: static;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    transition: border-color .15s, background-color .15s;
}

.brand-scenario .bs-opt-radio::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
    transition: transform .15s;
}

.brand-scenario .bs-opt-main {
    display: inline-flex;
    align-items: center;
    padding-right: 0;
}

.brand-scenario .bs-opt-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0;
}

.brand-scenario .bs-opt-title i {
    font-size: 1.05em;
    color: #64748b;
}

.brand-scenario .bs-opt-sub {
    display: block;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #6b7280;
}

.brand-scenario .bs-opt-sub b {
    color: #475569;
}

/* 通用選中狀態（品牌藍） */
.brand-scenario .bs-opt.is-selected {
    border-color: #1e40af;
    background: #e6efff;
    box-shadow: 0 4px 14px rgba(30, 64, 175, .12);
}

.brand-scenario .bs-opt.is-selected .bs-opt-radio {
    border-color: #1e40af;
    background: #1e40af;
}

/* 選中後 radio 為實心圓，不再顯示中間白點 */
.brand-scenario .bs-opt.is-selected .bs-opt-radio::after {
    transform: scale(0);
}

.brand-scenario .bs-opt.is-selected .bs-opt-title i {
    color: #1e40af;
}

/* 「立即免費建立」選中 → 綠 */
.brand-scenario .bs-opt--create.is-selected {
    border-color: #16a34a;
    background: #f1fbf4;
    box-shadow: 0 4px 14px rgba(22, 163, 74, .14);
}

.brand-scenario .bs-opt--create.is-selected .bs-opt-radio {
    border-color: #16a34a;
    background: #16a34a;
}

.brand-scenario .bs-opt--create.is-selected .bs-opt-title i {
    color: #16a34a;
}

/* 「稍後提供」選中 → 琥珀警示色，暗示 QR 將隱藏 */
.brand-scenario .bs-opt--defer.is-selected {
    border-color: #d97706;
    background: #fff8ed;
    box-shadow: 0 4px 14px rgba(217, 119, 6, .16);
}

.brand-scenario .bs-opt--defer.is-selected .bs-opt-radio {
    border-color: #d97706;
    background: #d97706;
}

.brand-scenario .bs-opt--defer.is-selected .bs-opt-title i {
    color: #d97706;
}

/* 選「稍後提供」時滑入的提醒：明確告知 QR 已隱藏 */
.brand-scenario .bs-qr-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 13px 16px;
    border: 1px solid #fcd9a4;
    border-left: 4px solid #d97706;
    border-radius: 10px;
    background: #fff8ed;
    color: #92400e;
    font-size: 1.1rem;
    line-height: 1.6;
    animation: bsQrNoteIn .25s ease;
}

.brand-scenario .bs-qr-note[hidden] {
    display: none;
}

.brand-scenario .bs-qr-note i {
    margin-top: 2px;
    font-size: 1.2rem;
    color: #d97706;
}

.brand-scenario .bs-qr-note b {
    color: #b45309;
}

@keyframes bsQrNoteIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 內層分頁（個人 LINE / 官方帳號）：膠囊切換，選中填滿 LINE 綠 */
.rail-card .line-contact-tabs {
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
}

/* 個人 LINE / LINE 官方帳號：精簡的 iOS 風 segmented control（取代大膠囊）。 */
.rail-card .line-contact-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background-color: #eef1f5;
    border-radius: 9px;
}

.rail-card .tab-button {
    padding: 6px 16px;
    font-size: .95rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    margin-right: 0;
    line-height: 1.5;
    background-color: transparent;
    color: #5a6470;
}

.rail-card .tab-button.active {
    background-color: #fff;
    color: var(--bs-primary);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .14);
}

/* 內容區說明文字加大 */
.rail-panel .tab-content > p {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e40af;
    text-align: center;
    margin-bottom: 12px;
}

/* 右上角「如何取得」徽章：與內層分頁同一列、靠右對齊 */
.rail-card .line-contact-howto {
    margin-left: auto;
    align-self: center;
    flex: 0 0 auto;
    background-color: #eef2ff;
    color: #1e40af;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}

.rail-panel .tab-content img {
    width: 100%;
    border: 1px solid #eceff3;
    border-radius: 10px;
}

/* 個人品牌頁 分頁 */
.brand-toggle-row {
    background-color: #f6f8fb;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    padding: 16px 18px;
}

.brand-toggle-row > span {
    font-size: 1.15rem;
}

/* 個人品牌頁 開關 */
.brand-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.brand-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.brand-switch-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 999px;
    transition: background-color .2s;
}

.brand-switch-slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform .2s;
}

.brand-switch input:checked + .brand-switch-slider {
    background-color: var(--bs-primary);
}

.brand-switch input:checked + .brand-switch-slider::before {
    transform: translateX(22px);
}

.invitation-action {
    border-top: 1px solid #EBEBEB;
}

.note-hint,
.click-hint,
.hint-container {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.chat-bubble {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background-color: #08823b;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    color: #fff;
    z-index: 10;
    display: none;
}

.chat-bubble::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 10px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent #08823b transparent;
}

.chat-bubble.withimg {
    width: 400px;

}

.bubble-messages {
    display: none;
}

/* dropdown */
.custom-dropdown {
    position: relative;
    display: inline-block;
    margin-right: 1rem;
    border-right: 1px solid #dee2e6;
    padding-right: 1rem;
    font-size: 14px;
  }
  .custom-dropdown-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    padding: 0.5rem 0;
    background: none;
    border: none;
    font: inherit;
    outline: none;
  }
  .custom-dropdown-toggle:after {
    content: "▼";
    font-size: 0.7em;
    margin-left: 0.5em;
    transition: transform 0.2s;
  }
  .custom-dropdown:focus-within .custom-dropdown-toggle:after,
  .custom-dropdown:hover .custom-dropdown-toggle:after {
    transform: rotate(180deg);
  }
  .custom-dropdown-menu {
    display: none;
    position: absolute;
   top:24px;   
    right: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 100;
    margin-top: 0.3rem;
    padding: 0.5rem 0;
  }
  .custom-dropdown:focus-within .custom-dropdown-menu,
  .custom-dropdown:hover .custom-dropdown-menu {
    display: block;
  }
  .custom-dropdown-menu li {
    list-style: none;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0;
    
  }
  .custom-dropdown-menu li:last-child {
    border-bottom: none;
  }
  .custom-dropdown-menu a {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
   color:var(--line-gray);
    text-decoration: none;
    transition: background 0.2s;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 0.25rem;
    gap: 0.5rem;
  }
  .custom-dropdown-menu a:hover {
    background: #f5f5f5;
  }
  .custom-dropdown-menu i {
    margin-right: 0.5em;
    width: 1.5rem;
    text-align: center;
  }

/* AI 海報設計下拉選單綠色主題樣式 */
.ai-poster-dropdown .custom-dropdown-toggle {
    color: var(--line-green);
    font-weight: 500;
}

.ai-poster-dropdown .custom-dropdown-toggle:hover {
    color: #05a847;
}

.ai-poster-dropdown .custom-dropdown-toggle i {
    color: var(--line-green);
}

.ai-poster-menu {
    min-width: 180px;
    border: 1px solid #c8e6c9;
    box-shadow: 0 4px 12px rgba(6, 199, 85, 0.15);
}

.ai-poster-menu .ai-menu-item {
    color: #333;
    font-size: 14px;
    padding: 10px 16px;
}

.ai-poster-menu .ai-menu-item:hover {
    background: #e8f5e9;
    color: var(--line-green);
}

.ai-poster-menu .ai-menu-item.active {
    background: #e8f5e9;
    color: #2e7d32;
    font-weight: 600;
}

.ai-poster-menu .ai-menu-item.active .ai-menu-text {
    color: var(--line-green);
}

.ai-poster-menu .ai-menu-item i {
    color: var(--line-green);
    font-size: 12px;
}

.brand-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
}

.brand-dropdown-toggle {
    color: var(--line-green);
    font-weight: 600;
    font-size: 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    user-select: none;
    cursor: pointer;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    width: 168px;
    height: 36px;
    transition: background-color 0.2s;
}

.brand-dropdown-toggle:hover {
    background: #f7f7f7;
}

/* Brand badge links to home; no dropdown, so no caret. */
.brand-dropdown-toggle:after {
    display: none;
}

.nav-modes-wrapper {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    padding: 4px;
    margin-left: 12px;
    gap: 8px;
}

.nav-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 8px;
    background: transparent;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.nav-home-link:hover {
    color: #333;
    background: transparent;
}

.nav-home-link.is-active {
    background: #e7f5ef;
    color: var(--line-green);
    font-weight: 600;
}

.nav-home-link + .nav-home-link {
    margin-left: 2px;
}

/* 移動端：導航模式換行顯示 */
@media (max-width: 768px) {
    nav.main-nav {
        flex-wrap: nowrap;
        height: auto !important;
        padding-top: 10px;
        padding-bottom: 10px;
        row-gap: 8px;
        justify-content: flex-start !important;
        column-gap: 8px;
    }
    /* logo + 品牌選單維持為同一個「左側群組」並 flex-grow，
       讓右側的 action icons 被推到第一列的最右邊（對齊 sitenav.css 的做法）。
       原本用 display:contents 會讓子元素散開，右側圖示無法穩定靠右。 */
    nav.main-nav .logo-container {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
    }
    /* 限制 brand-dropdown 寬度，避免過度撐開，並確保文字不換行且縮小字體 */
    nav.main-nav .brand-dropdown {
        flex: 0 1 auto;
        max-width: 130px; /* 稍微再縮小一點 */
        margin-left: 0; /* 間距改由 logo-container 的 gap 提供 */
    }
    nav.main-nav .brand-dropdown-toggle {
        white-space: nowrap;
        font-size: 12px; /* 字體再縮小一點 */
        padding-left: 6px;
        padding-right: 6px;
    }
    .nav-modes-wrapper {
        order: 3;
        /* 第一列右側：靠右、不縮放，跟 logo 群組同一行 */
        margin-left: auto;
        justify-content: flex-end;
        flex: 0 0 auto;
        gap: 6px;
    }
    /* 手機上只剩圖示：移除 管理名片 與 分享 之間的分隔線/內距，
       但保留兩個圖示之間的間隔 */
    nav.main-nav .custom-dropdown {
        margin-right: 10px;
        padding-right: 0;
        border-right: none;
    }
    /* Development Site 脫離文本流：浮在 nav 列正下方置中，
       讓 nav-modes-wrapper 縮小、與 logo 維持同一行 */
    .fw-nav__dev-badge-wrap {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin: 4px 0 0;
        pointer-events: none;
    }
    /* 移動端縮小 Development Site 字體 */
    .fw-nav__dev-badge {
        font-size: 10px;
        padding: 2px 6px;
        pointer-events: auto;
    }
}

/* 中小螢幕（含 S25 edge ~412px、iPhone 等）：對齊 1-page-profile 風格
   行 1：logo + dropdown (緊湊版)
   行 2：nav 連結 + 右側圖示
   行 3：Development Site 整行置中 */
@media (max-width: 640px) {
    nav.main-nav {
        column-gap: 8px;
        row-gap: 14px;
        padding-left: 12px;
        padding-right: 12px;
    }
    /* logo 放大（維持比例：鎖高度、寬度自動） */
    nav.main-nav .logo-container img,
    nav.main-nav .logo-img {
        width: auto !important;
        height: 42px !important;
    }
    /* dropdown：保留文字但更緊湊 */
    nav.main-nav .brand-dropdown {
        max-width: none;
        margin-left: 0 !important;
    }
    nav.main-nav .brand-dropdown-toggle {
        white-space: nowrap;
        font-size: 14px;
        padding: 7px 6px 7px 10px;
        width: auto !important;
    }
    nav.main-nav .brand-dropdown-toggle:after {
        margin-left: 2px;
    }
    /* 行 2：nav 連結靠左、右側圖示靠右 */
    .nav-modes-wrapper {
        flex: 0 1 auto !important;
    }
    /* Development Site 脫離文本流：浮在 nav 列正下方置中，nav 維持單行 */
    .fw-nav__dev-badge-wrap {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin: 4px 0 0;
        pointer-events: none;
    }
    .fw-nav__dev-badge {
        flex: 0 0 auto;
        order: 0;
        text-align: center;
        margin: 0;
        font-size: 10px !important;
        padding: 2px 8px !important;
        pointer-events: auto;
    }
}

.tabs {
    width: 100%;
}

.tab-label {
    display: inline-block;
    padding: 2px 6px;
    margin-right: 5px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    border: 1px dashed #aaa;
}

.tabs input[type="radio"] {
    display: none;
}

.tab-content {
    display: none;
}

/* 當指定的 radio 被選中時顯示對應的內容 */
#tab-oa:checked~#tab-content-oa,
#tab-person:checked~#tab-content-person {
    display: block;
}

/* 強調目前被選中的 tab 標籤 */
#tab-oa:checked+label,
#tab-person:checked+label {
    background-color: var(--bs-primary);
    color: #fff;
}

.toggle-indicator {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--bs-primary);
    transition: transform 0.3s;
    margin-left: 4px;
}
details[open] summary .toggle-indicator {
    transform: rotate(180deg);
}
.thankyou-card details[open].detail-preview {
    
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;

}
.controll-height{
    overflow: hidden;
    height: 100%;
    grid-row: 2;
}
.thankyou-card .action-buttons{
    margin-bottom: 8px;
}

    
#loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Responsive Adjustments */
@media screen and (max-height: 720px) {
    .template-list {
        height: auto;

    }
}

@media screen and (max-width: 1280px) {
    .main {
        align-items: flex-start;
        gap: 2rem;
    }

    /* nav.main-nav{
        position: sticky;
    } */
    /* .page{
        margin: 2rem;
    } */
    .chat-bubble.withimg {
        left: 50%;
        right: initial;
        transform: translateX(-50%);
        width: 400px;
    }

    .chat-bubble.withimg::before {
        right: 50%;
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 1024px) {
    .wizard {
        width: 100%;
        max-width: 900px;
        flex-grow: 1;
    }
    .action-buttons{
        position: sticky;
        bottom: 0;
        background-color: #fff;
        padding: 16px;
        border-top: 1px solid #EBEBEB;
    }
    .action-buttons{
        flex-direction: row-reverse;
        align-items: stretch;
        justify-content: center;
    }
    .thankyou-card .action-buttons .action-button:first-of-type{
        margin-bottom: 0;;
    }
    .action-button{
        width: 50%;
    }
    .action-button.share-link-btn{
        width: 100%;
    }
    .controll-height{
        min-height: 560px;
    }
}

@media (max-width: 768px) {
    nav .logo-container img {
        width: auto;
        height: 48px;
    }

    nav .logo-container span {
        font-size: 1.5rem;
    }

    .footer #service_info {
        font-size: 0.8rem;
    }

    .footer #service_info span {
        display: block;
        margin-bottom: 0.5rem;
    }

    .px-7 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .py-md-6 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .wizard {
        width: 100%;
        max-width: 500px
    }

    .page {
        margin-top: 62px; /* 單行導航列 */
    }

    .template-type {
        top: 56px;
    }
    .preview-page.main{
        justify-content: start;
        margin-top: 99px;
    }
    .preview-page .page{
        margin-top: 100px;
    }

    /* 手機選樣式：縮小左右及卡片間距，讓兩欄縮圖盡量撐滿欄寬 */
    #content1 .wiz-content {
        padding: 8px;
    }
    #content1 .template-list {
        padding: 4px;
    }
    #template-area .template-item {
        padding: 4px !important;
    }
    #content1 .flex-thumb {
        padding: 2px;
    }
}

@media (max-width: 768px) {}

@media (max-width: 576px) {

    .wizard {
        /* max-width: 400px; */
        min-width: 340px;
        margin: 0 auto;
    }

    .free-badge {
        display: none;
    }

    .page {
        padding-right: 8px;
        padding-left: 8px;
    }

    .success-card,
    .next-steps {
        padding: 24px;
    }

    .success-title {
        font-size: 20px;
    }

    .main-title h1 {
        flex-direction: column-reverse;

    }

    .size-hint {
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 8px;
        background-color: #fdf8da;
        padding: 8px 10px;
        border-radius: 8px;
        border: 1px solid #f0e6b5;
    }

    .size-hint p {
        flex: 1 1 auto;
    }

    .chat-bubble.withimg {
        left: 50%;
        right: initial;
        transform: translateX(-50%);
        width: 280px;
    }
}

@media (max-height: 667px) {
    #modalContainer .modal-iframe-content{
        margin-top: 0px;
    }
    .preview-page .page{
        padding-top: 6px;
    }
}

/* step4 預覽頁「功能預覽」圖示說明列 */
/* 功能預覽卡：左（標題＋圖示）右（註解）一組，不同底色框起來；窄螢幕註解自動換行仍在卡內 */
.feature-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 14px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.feature-legend .fl-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.feature-legend .fl-label {
    font-weight: 700;
    color: #334155;
    font-size: 15px;
}
/* 三顆圖示一致：白底、同樣方形尺寸（桌機/手機皆然） */
.feature-legend .fl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    text-decoration: none;
    position: relative;
}
.feature-legend a.fl-icon { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.feature-legend a.fl-icon:hover { border-color: #14b8a6; box-shadow: 0 2px 8px rgba(20,184,166,.18); }
.feature-legend .fl-icon img { width: 20px; height: 20px; object-fit: contain; }
/* 分享圖示（3 圓點）內容滿版、沒有留白，故縮小一點讓「實際圖形」大小與其他
   有內距的圖示（個人品牌頁／上傳分享）視覺一致。 */
.feature-legend #fl-share img { width: 15px; height: 15px; }
.feature-legend .fl-icon i { font-size: 16px; }
.feature-legend .fl-icon--static { color: #64748b; background: #fff; }
.feature-legend .fl-aster { position: absolute; top: -4px; right: 0; color: #ef4444; font-weight: 700; font-size: 10px; line-height: 1; }
.feature-legend .fl-note { font-size: 12.5px; color: #64748b; }
.feature-legend .fl-note .fl-note-aster { color: #ef4444; font-weight: 700; font-size: 10px; }
.feature-legend .fl-note a { color: #14b8a6; font-weight: 600; }

/* 返回編輯：獨立一排、置中的黑色按鈕 */
.fl-back-row {
    display: flex;
    justify-content: center;
}
.fl-back-row .fl-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 24px;
    background: #1f2937;
    color: #fff;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .12s;
}
.fl-back-row .fl-back:hover { background: #111827; color: #fff; }
.fl-back-row .fl-back i { font-size: 15px; }

/* 功能預覽：分享圖示點開的圖片燈箱 */
.fl-image-modal { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fl-image-modal[hidden] { display: none; }
.fl-image-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.7); }
.fl-image-modal__img { position: relative; max-width: 92vw; max-height: 86vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }

/* 「邀請加入好友頁面」預覽 modal（手機尺寸的 iframe 面板） */
.fl-invite-modal { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fl-invite-modal[hidden] { display: none; }
.fl-invite-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.7); }
.fl-invite-modal__panel { position: relative; width: 390px; max-width: 92vw; height: 80vh; max-height: 86vh; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.fl-invite-modal__frame { width: 100%; height: 100%; border: 0; }
.fl-invite-modal__close { position: absolute; top: 8px; right: 10px; z-index: 2; box-sizing: border-box; padding: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: rgba(255,255,255,.92); border-radius: 8px; font-size: 24px; line-height: 1; color: #334155; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.18); }
/* color 必須明寫：否則 milligram/Bootstrap 全域 button:hover{color:#fff} 會把 × 變白 → 白底上消失。 */
.fl-invite-modal__close:hover { background: #fff; color: #0f172a; }

/* 「個人品牌頁」預覽 modal（可切換手機/電腦；iframe 依邏輯尺寸等比縮放置中） */
.fl-profile-modal { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fl-profile-modal[hidden] { display: none; }
.fl-profile-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.7); }
.fl-profile-modal__panel { position: relative; display: flex; flex-direction: column; width: min(92vw, 1040px); height: min(86vh, 820px); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
/* 上方 header：左＝手機/電腦切換，右＝關閉（方形、非圓形） */
.fl-profile-modal__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; }
.fl-profile-modal__views { display: inline-flex; gap: 4px; background: #eef2f6; border-radius: 9px; padding: 3px; }
.fl-profile-modal__view { border: none; background: transparent; border-radius: 7px; padding: 5px 12px; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; line-height: 1.4; }
.fl-profile-modal__view.is-active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.fl-profile-modal__close { flex: 0 0 auto; box-sizing: border-box; padding: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 6px; background: transparent; font-size: 26px; line-height: 1; color: #475569; cursor: pointer; }
.fl-profile-modal__close:hover { background: #e5e7eb; color: #0f172a; }
/* 舞台：置中容納縮放後的 iframe */
.fl-profile-modal__stage { flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #eceff3; }
.fl-profile-modal__scaler { position: relative; }
.fl-profile-modal__frame { display: block; border: 0; background: #fff; transform-origin: top left; box-shadow: 0 4px 18px rgba(0,0,0,.14); }
.fl-profile-modal--mobile .fl-profile-modal__frame { border-radius: 22px; }

/* 分頁 3：行動呼籲（Call-to-Action）說明 */
/* #5：CTA 分頁上緣收緊，讓「CTA 表單」標題↔「收集需求」badge 的間距比照「加 LINE 聯繫」段。 */
#rail-cta { padding-top: 6px; }
.cta-intro {
    margin-top: 0;
}
/* 與「加 LINE 聯繫」段一致：標題下的一句改為較小、不粗體的副標。 */
.cta-intro .cta-title {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    color: #7c2d2d;
    margin: 0 0 6px;
}
.cta-intro .cta-lead {
    font-size: 1.4rem;
    line-height: 1.85;
    color: #334155;
    margin: 0 0 16px;
}
/* lead 文字（左）＋「CTA 按鈕」紅色徽章（右、靠右對齊） */
.cta-intro .cta-lead-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cta-intro .cta-lead-row .cta-lead {
    flex: 1 1 auto;
    margin: 0;
}
/* 純 CSS 紅色徽章，取代原本的 cta.webp 圖片 */
.cta-intro .cta-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    background: #b3433f;
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    border-radius: 8px;
    white-space: nowrap;
}
/* 重點詞螢光標記：沿用「加 LINE 聯繫」分頁 .lf-mark 的綠色底線樣式 */
.cta-intro .cta-mark {
    font-weight: 700;
    background: linear-gradient(to top, rgba(252, 165, 165, .75) 33%, transparent 33%);
}
.cta-intro .cta-img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 6px;
    border-radius: 14px;
}

/* CTA 重點說明卡：淡藍色卡（無左側強調條） */
.cta-intro .cta-highlight {
    position: relative;   /* 讓「收集需求」角落標籤能疊在右上角 */
    margin-top: 14px;     /* 與「加 LINE 聯繫」段的金句↔藍卡間距一致 */
    margin-bottom: 16px;
    /* 往左右各外擴一點（略小於 padding+border），卡片比內容稍寬但不齊邊 */
    margin-left: -6px;
    margin-right: -6px;
    padding: 10px 12px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
}
.cta-intro .cta-highlight p {
    font-size: 1.4rem;
    line-height: 1.85;
    color: #334155;
    margin: 0;
}
.cta-intro .cta-highlight p + p {
    margin-top: 12px;
}

.brand-intro .bi-highlight {
    position: relative;   /* 讓「個人品牌」角落標籤能疊在右上角 */
    /* 導語（.bi-lead）底距同為 10px，兩者收合後就是導語↔卡片的間距。 */
    margin-top: 10px;
    margin-bottom: 12px;
    /* 往左右各外擴一點（略小於 padding+border），卡片比內容稍寬但不齊邊 */
    margin-left: -6px;
    margin-right: -6px;
    padding: 10px 12px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
}
.brand-intro .bi-highlight p {
    font-size: 1.4rem;
    line-height: 1.85;
    color: #334155;
    margin: 0;
}
.brand-intro .bi-highlight p + p {
    margin-top: 6px;
}

/* 「讓 AI 幫您寫 Bio」是關於我分頁的第二段：用分隔線與上一段切開。
   線上方＝margin-top（與上方卡片的 12px 底距收合，故同取 12px）、線下方＝padding-top。 */
.brand-intro .bi-title--ai {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e6eaf0;
}

/* 第二張重點卡（AI 助攻）：換成淡紫，與上方淡藍卡區隔但同一色調層級。 */
.brand-intro .bi-highlight--ai {
    background: #faf5ff;
    border-color: #e9d5ff;
}

/* 「關於我」分頁：獨立一列的開關設定（左說明文字、右開關），標題另起整列滿版，
   不再被開關擠壓而斷在句中。 */
.brand-intro .bi-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 16px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
}
.brand-intro .bi-switch-caption {
    flex: 1 1 auto;
    font-size: 1.25rem;
    font-weight: 700;
    color: #475569;
    line-height: 1.5;
}
/* 「是否已經有 XLEAD 個人品牌頁？」整組放到分頁最底、名片示意圖下方，做成一條
   貫穿卡片左右下緣的綠色區塊（非漂浮小卡）。padding 收緊、更緊湊。 */
.brand-intro .bi-brand-card {
    position: relative;
    margin: 6px -24px -24px;         /* 左右下貼齊 rail-panel(24px 內距)邊緣 */
    padding: 12px 24px 16px;
    background: #ecfdf3;
    border: none;
    border-top: 1px solid #bbf7d0;
    border-radius: 0 0 16px 16px;    /* 對齊 rail-card 底部圓角 */
}

/* ── 按鈕編輯 modal 的欄位標題（按鈕類型／按鈕文字／樣式類型／顏色／連結網址）─────
   原本各自寫 inline style，字級（繼承 body 16px）與字重不一致。統一成一種標題樣式：
   黑色、粗體、14px；標題右側的「如何取得 …」連結是輔助文字，不跟著變粗。 */
#button-edit-modal .bem-title {
    display: block;
    margin-bottom: 8px;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.5;
}
/* 「連結網址」的文字包在 <span> 裡（右側要放「如何取得」連結），繼承來的粗體會被
   其他樣式表對 span 的規則蓋掉，所以直接指定。 */
#button-edit-modal .bem-title span { font-weight: 700; }
#button-edit-modal .bem-title .howto-trigger {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}
/* 單選項（一般連結／獲客表單）：與標題同字級，但不粗體 */
#button-edit-modal .bem-choice {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #111827;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.03em;
    cursor: pointer;
}

/* ── 按鈕編輯 modal「連結網址」的值欄位卡片 ──────────────────────────────
   加我個人／官方 LINE 好友時，把（暱稱／官方名稱＋專屬網址）裝進一張淡綠卡片；
   一般網址／獲客表單不套卡片（JS 移除 .is-green-card）。
   卡片內刻意重設 Bootstrap 的 .input-group-text（原本是灰底灰框的「藥丸」，疊在綠底上很醜）
   為純文字標籤，並讓所有輸入框等高(40px)、圓角一致、白底柔邊；官方帳號的網址前綴與輸入框
   無縫接合成一組 input-group（.has-prefix）。 */
#link-value-card { margin-top: 4px; }    /* 上方下拉已有 10px 底距，這裡只補一點點 */
#link-value-card.is-green-card {
    background: #e7f4ed;                 /* 略深一階的綠，跟白色 modal 底分得開 */
    border: 1px solid #c2ddcf;
    border-radius: 12px;
    padding: 16px;
}
/* 欄位群組：一致的垂直節奏（最後一組不留底距） */
#link-value-card.is-green-card .personal_line_use,
#link-value-card.is-green-card .oa_line_use {
    margin-bottom: 14px !important;
}
/* 標籤：拿掉 Bootstrap .input-group-text 的灰底/灰框/內距，改為乾淨的欄位標題。
   這裡是卡片內的次級標籤（名稱／專屬 URL），兩個一致：不粗體，字級同輸入框。 */
#link-value-card .input-group-text {
    display: flex !important;
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    color: #334155;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.03em;
    line-height: 1.5;
}
#link-value-card .input-group-text .text-danger { margin-left: 2px; color: #ef4444; }
#link-value-card .input-group-text .howto-trigger { font-weight: 500; font-size: 13px; letter-spacing: 0; color: #059669; }
/* 上面的 display:flex !important 特異性高過 Bootstrap 的 .d-none，會把「該隱藏的另一種
   LINE 類型」標籤硬是顯示出來（個人／官方兩個 URL 標籤同時出現）。這條放在後面把它擋回去。 */
#link-value-card .d-none { display: none !important; }
/* 輸入框：白底、柔邊、等高、圓角一致 */
#link-value-card input[type="text"] {
    box-sizing: border-box;
    height: 40px;
    margin: 0 !important;
    padding: 0 12px !important;
    background: #fff;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 14px;
    color: #111827;
    box-shadow: none;
}
#link-value-card input[type="text"]::placeholder { color: #9ca3af; }
#link-value-card input[type="text"]:focus {
    border-color: #34d399 !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .18);
    outline: none;
}
/* 官方帳號網址前綴：與輸入框等高、去掉固定寬度（窄螢幕才不會擠爆），與輸入框接合。
   淡藍底（原本灰底在綠卡上顯得髒），與白色輸入框做出區隔。 */
#link-value-card #oa-prefix {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto !important;
    height: 40px;
    margin: 0 !important;
    padding: 0 10px !important;
    background: #d3e6fe !important;
    color: #1e40af;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid #a6cbf8;
    border-right: none;
    /* Bootstrap 的 .rounded-start 用 !important 把左圓角壓成 4px，和輸入框右側的 8px 不對稱 */
    border-radius: 8px 0 0 8px !important;
}
/* 有前綴（官方帳號）時：網址框左側去圓角、去左邊框，與前綴無縫接成一體 */
#link-value-card.has-prefix #button-url-input {
    flex: 1 1 auto;
    width: auto !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
}
/* 問句前的「設定」小徽章。 */
.brand-intro .bi-set-badge {
    display: inline-block;
    margin-right: 7px;
    padding: 1px 9px;
    background: #16a34a;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .06em;
    border-radius: 999px;
    vertical-align: 0.1em;
}
.brand-intro .bi-q {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 800;
    color: #334155;
    line-height: 1.5;
}
.brand-intro .bi-q b { color: #1e40af; }
.brand-intro .bi-radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.brand-intro .bi-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 11px;
    background: #fff;
    border: 1px solid #d7e3ec;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
/* 選中的那顆用綠框（內陰影加粗描邊）標示。 */
.brand-intro .bi-radio:has(.bi-radio__input:checked) {
    border-color: #16a34a;
    box-shadow: inset 0 0 0 1px #16a34a;
}
.brand-intro .bi-radio__input {
    flex: 0 0 auto;
    /* 蓋掉全域 input[type="radio"]{display:none} 與可能的 appearance:none，恢復原生圓鈕。 */
    display: inline-block;
    -webkit-appearance: auto;
    appearance: auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #16a34a;
    cursor: pointer;
}
.brand-intro .bi-radio__text {
    flex: 1 1 auto;
    font-size: 1.2rem;
    line-height: 1.6;
}
/* 第一行（主敘述）粗體；第二行（補充）與第一行對齊起排、較淡。 */
.brand-intro .bi-radio__main {
    display: block;
    font-weight: 700;
    color: #334155;
}
.brand-intro .bi-radio__sub {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    color: #64748b;
}
/* 「暫時未有」後方的小提示：（可用 AI 生成）較小、綠色，弱化為輔助說明。 */
.brand-intro .bi-radio__hint {
    margin-left: 2px;
    font-size: .95em;
    font-weight: 400;
    color: #15803d;
}
.brand-intro .bi-check-ico {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.18em;
    margin: 0 1px;
    color: #94a3b8;
}
/* 右下角「看看介紹 ›」連結：導向 1 Page Profile 介紹頁。 */
.brand-intro .bi-brand-more {
    display: block;
    margin: 8px 0 0;
    text-align: right;
    font-size: 1.2rem;
    font-weight: 700;
    color: #15803d;
    text-decoration: none;
    cursor: pointer;
}
/* 手機說明 modal：比照桌機做成「滿版綠色區塊」而非獨立卡片——抵銷 sheet body 的 18px
   側內距與底部內距，左右下貼齊 sheet 邊緣，只留頂邊線、不做圓角。 */
.fh-modal__body .brand-intro .bi-brand-card {
    margin: 12px -18px calc(-20px - env(safe-area-inset-bottom, 0px));
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    border: none;
    border-top: 1px solid #bbf7d0;
    border-radius: 0;
}
.brand-intro .bi-brand-more:hover { text-decoration: underline; }

/* 「1 PAGE 個人品牌頁」深藍強調（同 .bi-q b 色）。 */
.brand-intro .bi-onepage { color: #1e40af; font-weight: 800; }

/* 「看看範例」→ 彈出 modal 載入範例頁（桌機置中卡片、手機接近滿版）。
   z-index 2100：高於手機 bottom-sheet(.fh-modal 1500) 與「如何取得」抽屜(2000)，
   從手機說明 sheet 內點開時才不會被蓋住。 */
.bi-demo-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.bi-demo-modal[hidden] { display: none; }
.bi-demo-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .6);
}
.bi-demo-modal__content {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 要容得下桌機(1440×900)縮放後的預覽，所以吃滿可用空間 */
    width: min(1180px, 100%);
    height: min(880px, 100%);
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(15, 23, 42, .4);
    animation: bi-demo-pop .18s ease-out;
}
@keyframes bi-demo-pop {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: none; }
}
/* header 刻意壓矮（約 40px）：這裡只是工具列，畫面該留給預覽本身。 */
.bi-demo-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    padding: 4px 6px 4px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e6eaf0;
}
/* 注意：本頁 1rem = 10px（milligram 62.5% base），字級要照這個換算。 */
.bi-demo-modal__title { font-size: 1.6rem; font-weight: 700; color: #0f172a; margin-right: auto; }
/* 範例切換（範例 1／範例 2）：每顆用細實線方框框起，靠右；桌機接在裝置圖示左側，
   手機（裝置列隱藏）就接在關閉鈕左側。 */
.bi-demo-modal__samples {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
}
.bi-demo-modal__samples button {
    /* 覆蓋 milligram 給 <button> 的預設高度／margin，避免撐高 header。 */
    display: inline-flex;
    align-items: center;
    height: 28px;
    margin: 0;
    padding: 0 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.bi-demo-modal__samples button:hover { border-color: #94a3b8; color: #0f172a; }
.bi-demo-modal__samples button.is-active {
    border-color: var(--line-green, #06C755);
    color: var(--line-green, #06C755);
    background: rgba(6, 199, 85, .08);
}

/* 裝置切換：圖示式分段控制。中文標籤在這個尺寸下不好讀（本頁 1rem = 10px），
   改用螢幕／平板／手機的線條圖示，名稱走 title/aria-label。窄螢幕隱藏之。 */
.bi-demo-modal__devices {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
    padding: 3px;
    border-radius: 10px;
    background: #eef1f5;
}
.bi-demo-modal__devices button {
    /* height/margin 要覆蓋掉 milligram 給 <button> 的預設（3.8rem 高、margin-bottom 1rem），
       否則 header 會被撐高。 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.bi-demo-modal__devices button svg { width: 17px; height: 17px; }
.bi-demo-modal__devices button:hover { color: #475569; }
.bi-demo-modal__devices button.is-active {
    background: #fff;
    color: var(--line-green, #06C755);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .16);
}
/* 預覽舞台：裝置外框置中，縮放後仍放不下時可捲動。 */
.bi-demo-modal__stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow: auto;
    background: #e8edf3;
}
/* 裝置外框：機身用 box-shadow 的實心 ring 畫（不佔 layout，縮放計算才不用扣邊框），
   JS 端 DEMO_OUTSET 需與各裝置的 ring 厚度一致，否則邊緣會被 stage 切到。 */
.bi-demo-modal__device {
    flex: 0 0 auto;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 2px #cbd5e1, 0 14px 36px rgba(15, 23, 42, .22);
}
.bi-demo-modal__device[data-device="tablet"] {
    border-radius: 18px;
    box-shadow: 0 0 0 8px #1e293b, 0 0 0 9px #475569, 0 18px 40px rgba(15, 23, 42, .32);
}
.bi-demo-modal__device[data-device="mobile"] {
    border-radius: 26px;
    box-shadow: 0 0 0 10px #1e293b, 0 0 0 11px #475569, 0 18px 40px rgba(15, 23, 42, .34);
}
.bi-demo-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    /* milligram 的 <button> 預設 margin-bottom: 1rem，不清掉 header 會多出 10px。 */
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}
.bi-demo-modal__close:hover { background: #e2e8f0; color: #0f172a; }
/* 寬高由 JS 設成裝置的真實視窗尺寸，再 scale() 縮到 stage 內；原點取左上才對得準外框。 */
.bi-demo-modal .bi-demo-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    transform-origin: top left;
}
body.bi-demo-modal-open { overflow: hidden; }
/* 手機：改走站內慣用的 bottom sheet（同 .fh-modal），由下滑入、頂端留一截背景可點關閉，
   比置中卡片更貼合單手操作；範例頁本身就是手機版型，不需要裝置外框與切換列。 */
@media (max-width: 576px) {
    .bi-demo-modal { padding: 0; align-items: flex-end; }
    .bi-demo-modal__content {
        width: 100%;
        height: 94%;
        border-radius: 18px 18px 0 0;
        animation: bi-demo-rise .22s ease-out;
    }
    .bi-demo-modal__devices { display: none; }
    /* 抓握條：讓「可下滑／可關閉」的意圖一眼可見。 */
    .bi-demo-modal__header { position: relative; padding: 12px 6px 5px 14px; }
    .bi-demo-modal__header::before {
        content: '';
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: #cbd5e1;
    }
    .bi-demo-modal__stage { padding: 0; background: #fff; }
    /* 窄螢幕不縮放：iframe 直接填滿（JS 也會清掉 inline style）。 */
    .bi-demo-modal__device,
    .bi-demo-modal__device[data-device] {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .bi-demo-modal .bi-demo-frame { transform: none; }
}
@keyframes bi-demo-rise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

/* 「關於我」網址攔截提醒 modal：字級清楚、右上角關閉 X、燈泡圖示與「小提醒」同一列。 */
.profile-gate-popup { font-size: 1.2rem; padding: 1.8em 1.5em 1.5em; }
.profile-gate-popup .swal2-title { font-size: 2rem; margin-top: .2em; padding: 0; }
/* 標題：燈泡「小提醒」同一列、置中。 */
.profile-gate-popup .pg-title { display: inline-flex; align-items: center; justify-content: center; gap: .3em; }
.profile-gate-popup .pg-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05em;
    line-height: 1;
}
/* 右上角關閉 X：放大、清楚可點。 */
.profile-gate-popup .swal2-close { font-size: 2.4em; color: #94a3b8; }
.profile-gate-popup .swal2-close:hover { color: #475569; }
.profile-gate-popup .swal2-actions { gap: 8px; flex-wrap: wrap; margin-top: 1.4em; }
.profile-gate-popup .swal2-styled { font-size: 1.45rem; padding: .6em 1.4em; }

.profile-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.profile-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.profile-switch__track {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background .15s;
    flex: 0 0 auto;
}
.profile-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform .15s;
}
.profile-switch input:checked + .profile-switch__track {
    background: #16a34a;
}
.profile-switch input:checked + .profile-switch__track .profile-switch__thumb {
    transform: translateX(20px);
}
.profile-switch__label {
    font-size: 1.2rem;
    font-weight: 700;
    color: #64748b;
    min-width: 3.4em;   /* 容納「不顯示」3 字，切換到「顯示」時開關不位移 */
    text-align: right;
}
.profile-switch input:checked ~ .profile-switch__label {
    color: #16a34a;
}

/* ── Footer service intro modal (ported from xeditor landing.css) ──
   xeditor 的 landing.css :root 定義了 --text/--primary/--white 等 token；
   linenamecard 用的是不同命名的變數，故把下方 verbatim 規則所需的變數值
   （直接取自 xeditor landing.css :root）scope 到本組件，讓複製過來的樣式
   解析結果與來源完全一致。 */
.footer-services,
.svc-sheet,
.svc-sheet-backdrop {
    --primary:       #2AB5A0;
    --primary-dark:  #1E9E8B;
    --primary-light: #EAF8F6;
    --text:          #1F2D3A;
    --text-muted:    #5A6E7B;
    --svc-sheet-sub: #6B6B6B;   /* svc-sheet 副標：中灰，三站共用 */
    --white:         #fff;
}
/* milligram 會給所有 <button> 加 height:3.8rem / uppercase / letter-spacing / line-height，
   逐字移植的按鈕需先歸零，避免版型走樣（後面各自規則再覆寫細節）。 */
.footer-svc,
.svc-sheet__close,
.svc-sheet__tab,
.svc-sheet__cta {
    height: auto;
    min-height: 0;
    padding: 0;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
    margin-bottom: 0;
}

/* ── Footer service links ─────────────────────────────────── */
/* Desktop: logo + copyright centered as a group · service links pinned to the page's far right (matches nav) */
.footer-bar { justify-content: center; }
.footer-bar .footer-copy { flex: 0 1 auto; }
.footer-services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 28px;
    /* In-flow flex item; sits after the copyright with a 120px gap, whole row centered */
    margin-left: 120px;
}
.footer-svc {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 2px 0;
    margin: 0;
    font-family: inherit;
    font-size: 13.6px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text);
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .15s ease;
}
.footer-svc:hover { opacity: .66; }
.footer-svc__line { color: #06C755; }               /* LINE green */
.footer-svc__page { color: var(--primary); }         /* 1 PAGE teal (site title) */
.footer-svc__ai   { color: #F19A4B; }                /* AI bright orange */

/* ── Service bottom sheet ─────────────────────────────────── */
.svc-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(15, 30, 40, .44);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}
.svc-sheet-backdrop.is-open { opacity: 1; visibility: visible; }
.svc-sheet {
    --sheet-accent: var(--primary);
    --sheet-accent-dark: var(--primary-dark);
    --sheet-accent-soft: var(--primary-light);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 901;
    margin: 0 auto;
    width: min(460px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    padding: 0;
    background: var(--white);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 50px rgba(15, 30, 40, .22);
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}
.svc-sheet.is-open { transform: translateY(0); pointer-events: auto; }
.svc-sheet__grip {
    width: 42px;
    height: 5px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: #d7e2e0;
}
/* Brand bar：品牌名 + 副標 + 關閉同一列，永遠在最上方 */
.svc-sheet__brandbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 12px 22px;
}
.svc-sheet__brandtext {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.svc-sheet__brandname {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 16.3px;
    font-weight: 800;
    letter-spacing: .01em;
}
.svc-sheet__brandsub {
    color: var(--svc-sheet-sub);
    font-size: 13.1px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: .01em;
}
.svc-sheet__close {
    flex: 0 0 auto;
    margin-top: 1px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f4;
    color: var(--text-muted);
    font-size: 19.2px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease;
}
.svc-sheet__close:hover { background: #e6edec; }
/* 底線分頁：品牌名（品牌色）+ 服務（黑字） */
.svc-sheet__tabs {
    display: flex;
    gap: 20px;
    padding: 0 22px;
    border-bottom: 1px solid #eef2f1;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.svc-sheet__tabs::-webkit-scrollbar { display: none; }
.svc-sheet__tab {
    position: relative;
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 12px 2px;
    font-family: inherit;
    font-size: 14.4px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--text);
    cursor: pointer;
}
.svc-sheet__tab-brand { font-weight: 800; }
.svc-sheet__tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--sheet-accent);
    transform: scaleX(0);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.svc-sheet__tab.is-active::after { transform: scaleX(1); }
/* Body：上排（圖＋說明）＋下排（tags＋前往看看） */
.svc-sheet__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 22px 22px;
}
/* 上排：左圖右文 */
.svc-sheet__top {
    display: flex;
    gap: 16px;
    align-items: center;
    min-height: 0;
}
.svc-sheet__img {
    flex: 0 0 46%;
    width: 46%;
    align-self: center;
    object-fit: contain;
    background: transparent;
}
.svc-sheet__text {
    flex: 1 1 auto;
    min-width: 0;
}
/* 下排：tags 靠左、前往看看 靠右同列 */
.svc-sheet__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* Metaphor：粗體黑字 */
.svc-sheet__metaphor {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 16.8px;
    font-weight: 700;
    line-height: 1.5;
}
.svc-sheet__desc {
    margin: 0;
    color: var(--text-muted);
    font-size: 14.7px;
    line-height: 1.8;
}
.svc-sheet__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    min-width: 0;
}
.svc-sheet__chip {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--sheet-accent-soft);
    color: var(--sheet-accent-dark);
    font-size: 12.2px;
    font-weight: 700;
}
/* CTA：低調小按鈕（不搶眼），有興趣者才點開新分頁 */
.svc-sheet__cta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    padding: 8px 16px;
    white-space: nowrap;
    border-radius: 10px;
    background: var(--sheet-accent-dark);
    color: #fff;
    font-size: 13.1px;
    font-weight: 700;
    transition: filter .18s ease, transform .18s ease;
}
.svc-sheet__cta:hover { filter: brightness(.92); color: #fff; transform: translateY(-1px); }
/* 已在本服務：同位置改為低調「本服務」徽章（非按鈕、不可點） */
.svc-sheet__cta--self {
    background: #e8eaed;
    color: var(--text-muted);
    cursor: default;
    pointer-events: none;
    font-weight: 800;
    letter-spacing: .04em;
}
.svc-sheet__cta--self:hover { filter: none; color: var(--text-muted); transform: none; }
/* Desktop：置中、加寬、四角圓角的對話框 */
@media (min-width: 600px) {
    .svc-sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: min(600px, 94vw);
        height: 450px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 0 24px 70px rgba(15, 30, 40, .3);
        transform: translate(-50%, -46%);
        opacity: 0;
        transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
    }
    .svc-sheet.is-open { transform: translate(-50%, -50%); opacity: 1; }
    .svc-sheet__grip { display: none; }
    .svc-sheet__brandbar { flex: 0 0 auto; padding: 14px 18px 12px 26px; }
    .svc-sheet__brandname { font-size: 17.9px; }
    .svc-sheet__brandsub { font-size: 14.1px; }
    .svc-sheet__tabs { flex: 0 0 auto; padding: 0 26px; gap: 26px; }
    .svc-sheet__tab { font-size: 15.2px; }
    .svc-sheet__body {
        flex: 1 1 auto;
        min-height: 0;
        display: grid;
        grid-template-columns: 46% 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "img  text"
            "img  tags"
            "cta  cta";
        gap: 10px 20px;
        padding: 22px 26px 22px;
    }
    /* 讓 top / foot 的子元素直接進 grid 定位 */
    .svc-sheet__top,
    .svc-sheet__foot { display: contents; }
    .svc-sheet__img { grid-area: img; width: auto; align-self: stretch; min-height: 0; }
    .svc-sheet__text { grid-area: text; align-self: start; margin-top: 10px; }
    /* tags 放右欄、desc 下方 */
    .svc-sheet__chips { grid-area: tags; align-self: start; margin: 0; }
    /* 前往看看 獨立底部一列、跨整個寬度、靠右 */
    .svc-sheet__cta { grid-area: cta; justify-self: end; align-self: end; }
    .svc-sheet__metaphor { font-size: 18.4px; }
    .svc-sheet__desc { font-size: 15.4px; }
}

/* ── 首頁 footer：對齊 xeditor 外觀 ──────────────────────────
   只作用於首頁（.footer--home），不影響 portal 共用的 footer.css。
   用複合選擇器提高權重，蓋過稍後載入的 footer.css。px 單位（本頁 1rem=10px）。 */
.footer.footer--home {
    border-top: 1px solid rgba(226, 232, 240, .9);
    padding: 18px 24px;
    gap: 14px 20px;
}
.footer--home .footer-copy { color: #5A6E7B; }
.footer--home .footer-brand img,
.footer--home .footer-logo img { height: 30px; width: auto; }
/* 服務列與 logo／版權同一列置中，不外推、不換行到下一列 */
.footer--home .footer-services { margin: 0; }

/* milligram 的 button:hover/:focus 會塗上灰底(#606c76)，滲進移植的按鈕。
   這裡逐一還原各按鈕在 hover/focus/active 的原樣（載入序在 milligram 之後 → 同權重勝出）。 */
.footer-svc:hover, .footer-svc:focus, .footer-svc:active {
    background: none;
    border-color: transparent;
    color: var(--text);
    outline: 0;
    opacity: .66;
}
.svc-sheet__tab:hover, .svc-sheet__tab:focus, .svc-sheet__tab:active {
    background: none;
    border-color: transparent;
    color: var(--text);
    outline: 0;
}
.svc-sheet__close:hover, .svc-sheet__close:focus, .svc-sheet__close:active {
    background: #e6edec;
    border-color: transparent;
    color: var(--text-muted);
    outline: 0;
}
.svc-sheet__cta:hover, .svc-sheet__cta:focus, .svc-sheet__cta:active {
    background: var(--sheet-accent-dark);
    border-color: transparent;
    color: #fff;
    outline: 0;
}

/* 首頁 footer mobile：對齊 xeditor —— 服務列掉到自己整寬一列、置中、上方分隔線。
   （覆寫 footer.css 在 ≤899.98px 的 .footer{flex-wrap:nowrap} 擠壓） */
@media (max-width: 899.98px) {
    .footer.footer--home {
        flex-wrap: wrap;
        gap: 8px 14px;
    }
    .footer--home .footer-copy { text-align: center; }
    .footer--home .footer-services {
        order: 3;
        flex: 1 1 100%;
        justify-content: center;
        gap: 10px 24px;
        margin: 12px 0 0;
        padding-top: 14px;
        border-top: 1px solid rgba(226, 232, 240, .9);
    }
}