/* ==========================================================================
   PopChoo brand styles
   --------------------------------------------------------------------------
   只給 popchoo brand 用（domain = popchoo.com / popchoo.test）。
   color tokens 對齊 config/brand.php + Figma Popworld design tokens。

   檔案結構：
     1. CSS variables (PopChoo brand tokens)
     2. Reset / page baseline (only for popchoo pages)
     3. Top bar (.popchoo-topbar)
     4. User dropdown menu (.popchoo-user-menu)
     5. Hero section (.popchoo-hero)
     6. Features section (.popchoo-features)
     7. Footer (.popchoo-footer)
     8. Home page composition
     9. RWD breakpoints
   ========================================================================== */

/* ============================================================
   1. CSS variables — Popworld design tokens
   ============================================================ */
.popchoo-page,
.popchoo-topbar,
.popchoo-footer {
    --pc-blue:        #2CA6E0;
    --pc-orange:      #FFA31A;
    --pc-orange-light:#FFC61A;
    --pc-blue-light:  #F2F4F6;
    --pc-white:       #FFFFFF;
    --pc-gray-100:    #F2F2F2;
    --pc-gray-200:    #E6E6E6;
    --pc-gray-500:    #757575;
    --pc-gray-800:    #333333;
    --pc-black:       #000000;
    --pc-hero-bg:     #2a2b2c;   /* Figma PopChoo_web_01_home：Home Cover / Footer 深灰 */
    --pc-shadow:      0 4px 8px rgba(0, 0, 0, 0.4);

    --pc-font-tc:     'Noto Sans TC', sans-serif;
    --pc-font-en:     'Inter', 'Noto Sans TC', sans-serif;
    --pc-font-num:    'Roboto', sans-serif;

    --pc-radius-sm:   8px;
    --pc-radius-md:   12px;
}

/* ============================================================
   2. Page baseline (popchoo pages 共用)
   ============================================================ */
html, body { margin: 0; padding: 0; }   /* 修 banner 沒填滿: 砍掉瀏覽器預設 body margin */

/* 主 layout（header + main + footer）：內容不夠高時 footer 仍貼齊視窗底，不留白。
   body 直向 flex、main 撐開剩餘高度；min-height 用 dvh 讓手機網址列收合時也貼底（不支援的瀏覽器退回 vh）。 */
.popchoo-layout {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
.popchoo-layout > main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.popchoo-layout > main > .popchoo-page { flex: 1 0 auto; }

/* 把 box-sizing 統一套用到 popchoo 全部元素，避免 topbar / footer 因 padding 撐出 viewport */
.popchoo-topbar, .popchoo-topbar *, .popchoo-topbar *::before, .popchoo-topbar *::after,
.popchoo-footer, .popchoo-footer *, .popchoo-footer *::before, .popchoo-footer *::after {
    box-sizing: border-box;
}

.popchoo-page {
    color: var(--pc-gray-800);
    font-family: var(--pc-font-tc);
    min-height: 75vh;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.popchoo-page * {
    box-sizing: border-box;
}
.popchoo-page a {
    color: inherit;
    text-decoration: none;
}
.popchoo-page a:hover {
    opacity: 0.85;
}

/* 確保所有 section 真的填滿可視寬度 */
.popchoo-home > section,
.popchoo-page > main,
.popchoo-page > section {
    width: 100%;
}

/* ============================================================
   3. Top bar
   ============================================================ */
.popchoo-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 64px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 108px;
}
.popchoo-topbar__logo {
    width: 118px;
    height: 59px;  /* 2:1 比例 */
}
.popchoo-topbar__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.popchoo-topbar__tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Top bar 純文字 nav link（例如「方案說明」）— 比 pill 按鈕更輕量、不搶眼 */
.popchoo-topbar__nav-link {
    font-size: 14px;
    color: #333;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.popchoo-topbar__nav-link:hover {
    background: rgba(44, 166, 224, .08);
    color: #2CA6E0;
    text-decoration: none;
}
/* 手機隱藏（避免 topbar 擠不下）— 用戶可從 dropdown「我的方案」或 footer 進方案頁 */
@media (max-width: 767.98px) {
    .popchoo-topbar__nav-link { display: none; }
}

/* Top bar 按鈕 — 方案 / 建立 / 加入 共用（M3 統一改純文字、無 icon） */
.popchoo-btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: var(--pc-radius-sm);
    color: var(--pc-white);
    font-family: var(--pc-font-tc);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;     /* 修：a 標籤底線 */
    transition: opacity 0.15s ease;
}
.popchoo-btn-pill:hover {
    opacity: 0.88;
    color: var(--pc-white);
    text-decoration: none;     /* 修：hover 也不要底線 */
}
.popchoo-btn-pill--blue   { background: var(--pc-blue); }
.popchoo-btn-pill--orange { background: var(--pc-orange); }
/* 灰底 pill：用在「方案說明」等次級 CTA — 視覺權重比 建立(藍) / 加入(橘) 低，
   但仍維持 pill 形狀風格保持頂部 toolbar 一致性 */
.popchoo-btn-pill--gray   { background: #6b7280; }
.popchoo-btn-pill--gray:hover { background: #4b5563; opacity: 1; }
/* M3 統一：全部 pill 都無 icon、padding 一致（已在 .popchoo-btn-pill 統一處理）*/
.popchoo-btn-pill__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.popchoo-headphoto {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    background: var(--pc-gray-200);
}

/* ============================================================
   4. User profile dropdown (沿用 popworld 既有 .user-profile 結構)
   ============================================================ */
.popchoo-topbar .user-profile {
    position: relative;
    cursor: pointer;
}
.popchoo-topbar .user-profile-wrapper {
    display: flex;
    align-items: center;
}
.popchoo-topbar .user-profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--pc-gray-100);
    overflow: hidden;
    background: var(--pc-gray-200);
    flex-shrink: 0;
}
/* 頭像 hover 效果已拿掉（M3 統一視覺）*/
.popchoo-topbar .user-profile-img img,
.popchoo-topbar .user-profile-img .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dropdown list (預設隱藏，加 .is-active 顯示) */
.popchoo-topbar .user-dropdown-list {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 320px;
    background: var(--pc-white);
    border-radius: var(--pc-radius-md);
    box-shadow: var(--pc-shadow);
    /* 項目變多（管理者有 6 條後台入口）時在視窗內捲動：上限 = 視窗高 − topbar 64px − 間距 8px − 底部留白 16px */
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;   /* 捲到底不帶動整頁 */
    z-index: 110;
}
.popchoo-topbar .user-profile.is-active .user-dropdown-list {
    display: block;
}

.popchoo-topbar .user-dropdown-list-item {
    background: var(--pc-white);
    transition: background 0.15s ease;
}
.popchoo-topbar .user-dropdown-list-item:hover {
    background: var(--pc-blue-light);
}
.popchoo-topbar .user-dropdown-list-item:nth-child(1) {
    border-bottom: 1px solid var(--pc-gray-200);
}
.popchoo-topbar .user-dropdown-list-item:last-child {
    border-top: 1px solid var(--pc-gray-200);
}
.popchoo-topbar .user-dropdown-list-item .user-tool {
    display: flex;
    align-items: center;
    gap: 1rem;                /* 對齊 popworld main.css line 2506 (gap: 1rem) */
    padding: 12px;            /* 對齊 popworld (padding: 12px) */
    color: var(--pc-gray-800);
    text-decoration: none;
    font-family: var(--pc-font-tc);
    font-size: 14px;          /* 從 16 改 14：popworld dropdown 字級看起來小一點 */
    line-height: 20px;
}
.popchoo-topbar .user-dropdown-list-item .user-tool:hover {
    color: var(--pc-gray-800);
    opacity: 1;
    text-decoration: none;
}

/* Profile Header item (頭像 + 名字) — 第一項較大 */
.popchoo-topbar .user-dropdown-list-item:nth-child(1) .user-tool {
    padding: 16px;
    gap: 12px;
}
.popchoo-topbar .user-dropdown-list-item:nth-child(1) .user-profile-img {
    width: 48px;
    height: 48px;
    border: 1px solid var(--pc-gray-100);
}
/* dropdown 內第一項頭像不要 hover 光暈 */
.popchoo-topbar .user-dropdown-list-item:nth-child(1) .user-profile-img:hover {
    box-shadow: none;
}
.popchoo-topbar .user-name {
    display: flex;
    flex-direction: column;
    font-size: 16px;            /* 從 18 改 16，對齊 popworld */
    font-weight: 500;
    color: var(--pc-gray-800);
    line-height: 1.3;
}
.popchoo-topbar .user-title-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: var(--pc-gray-500);
    font-size: 12px;            /* 從 14 改 12，等級稱號小一點 */
}
.popchoo-topbar .user-title-medal {
    width: 14px;                /* 從 20 改 14，對齊 popworld 的 medal icon */
    height: 14px;
}

/* tool-icon + tool-txt
   圖示一律 24×24 的框、圖形本體最長邊 20px：框用 padding 2px 收成 20×20 內容區，
   不管是 <img>（icon_folder / icon_logout）還是 Iconify 換進來的 <svg>（mdi 系列）都套同一條，
   來源不同的圖示視覺大小才會一致。 */
.popchoo-topbar .user-tool .tool-icon {
    width: 24px;
    height: 24px;
    padding: 2px;
    box-sizing: border-box;
    flex-shrink: 0;
    color: var(--pc-gray-800);
    font-size: 20px;
    line-height: 1;
    object-fit: contain;
}
.popchoo-topbar .user-tool .tool-txt {
    /* 純文字 label，自然占空間。Pop Points 那個 row 的數字靠 margin-left:auto 推 */
}
/* Pop Points 數字 — flex margin-left:auto 推到右、藍色加粗 */
.popchoo-topbar .user-tool .tool-txt--point {
    margin-left: auto;
    color: var(--pc-blue);
    font-family: var(--pc-font-num);
    font-size: 20px;
    font-weight: 700;
}

/* 未登入「登入」按鈕 — 完全仿 popworld（main.css 2126: .user-profile.login）
   純文字 + 圓圈人頭 icon，無邊框。icon 用 inline SVG background image。 */
.popchoo-topbar .user-profile.user-tool.login {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--pc-blue);
    font-family: var(--pc-font-tc);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: opacity 0.15s ease;
    cursor: pointer;
}
.popchoo-topbar .user-profile.user-tool.login:hover {
    opacity: 0.7;
    color: var(--pc-blue);
}
/* tool-icon for "user"（同 popworld main.css 2061）：藍色圓圈人頭 SVG */
.popchoo-topbar .user-tool[data-user-tool="user"] .tool-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 22C10.488 22.0043 8.99521 21.6622 7.63599 21C7.13855 20.758 6.66193 20.4754 6.21099 20.155L6.07399 20.055C4.83383 19.1396 3.81989 17.9522 3.10999 16.584C2.37573 15.1679 1.9949 13.5952 1.99999 12C1.99999 6.477 6.47699 2 12 2C17.523 2 22 6.477 22 12C22.005 13.5944 21.6246 15.1664 20.891 16.582C20.1821 17.9494 19.1696 19.1364 17.931 20.052C17.464 20.394 16.968 20.695 16.449 20.952L16.369 20.992C15.0089 21.6577 13.5142 22.0026 12 22ZM12 17C11.265 16.9986 10.5439 17.2002 9.91629 17.5825C9.28863 17.9649 8.77879 18.5132 8.44299 19.167C9.54874 19.7147 10.766 19.9996 12 19.9996C13.2339 19.9996 14.4512 19.7147 15.557 19.167V19.162C15.2208 18.5089 14.7107 17.9615 14.083 17.58C13.4554 17.1985 12.7345 16.9978 12 17ZM12 15C13.0642 15.0012 14.1089 15.2847 15.0278 15.8216C15.9466 16.3585 16.7065 17.1295 17.23 18.056L17.244 18.043L17.258 18.031L17.241 18.046L17.231 18.054C18.4659 16.9871 19.345 15.5681 19.7503 13.9873C20.1556 12.4065 20.0678 10.7396 19.4986 9.21011C18.9295 7.68065 17.9061 6.36184 16.566 5.43062C15.2258 4.4994 13.6329 4.00031 12.001 4.00031C10.3691 4.00031 8.77616 4.4994 7.436 5.43062C6.09583 6.36184 5.07252 7.68065 4.50334 9.21011C3.93416 10.7396 3.84635 12.4065 4.25167 13.9873C4.657 15.5681 5.53609 16.9871 6.77099 18.054C7.29483 17.1279 8.05488 16.3574 8.97365 15.8209C9.89243 15.2844 10.937 15.0011 12.001 15H12ZM12 14C10.9391 14 9.92171 13.5786 9.17156 12.8284C8.42142 12.0783 7.99999 11.0609 7.99999 10C7.99999 8.93913 8.42142 7.92172 9.17156 7.17157C9.92171 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10C16 11.0609 15.5786 12.0783 14.8284 12.8284C14.0783 13.5786 13.0609 14 12 14ZM12 8C11.4696 8 10.9608 8.21071 10.5858 8.58579C10.2107 8.96086 9.99999 9.46957 9.99999 10C9.99999 10.5304 10.2107 11.0391 10.5858 11.4142C10.9608 11.7893 11.4696 12 12 12C12.5304 12 13.0391 11.7893 13.4142 11.4142C13.7893 11.0391 14 10.5304 14 10C14 9.46957 13.7893 8.96086 13.4142 8.58579C13.0391 8.21071 12.5304 8 12 8Z' fill='%232CA6E0'/></svg>");
}

/* ============================================================
   5. Hero section
   ============================================================ */
.popchoo-hero {
    position: relative;
    width: 100%;
    min-height: 404px;
    padding: 60px 20px;        /* 內容跟上下緣間距，避免按鈕貼邊 */
    background: var(--pc-hero-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 模糊化情境圖背景（2026 cover）：輕度 blur（場景仍可辨識，對齊 Figma
   PopChoo_web_01_home）+ 放大蓋掉模糊白邊，
   上面壓一層 hero 同色調半透明遮罩保持標題/按鈕可讀 */
.popchoo-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/popchoo/popchoo_cover_2026.jpg') center / cover no-repeat;
    filter: blur(3px);       /* 設計稿 4px，使用者微調 -1 */
    transform: scale(1.04);  /* 放大蓋掉 blur 白邊 */
    z-index: 0;
}
.popchoo-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    /* 遮罩對齊 Figma（Home Cover 圖層上的單層純黑 0.2） */
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}
.popchoo-hero__inner {
    position: relative;
    width: 704px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    z-index: 1;
}
.popchoo-hero__logo {
    width: 280px;
    height: 98px;
}
.popchoo-hero__logo img {
    width: 100%;
    height: 100%;
    /* Figma 設計稿 logo 陰影（SVG filter：dy=4、stdDeviation=4≈blur 8px、黑） */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 1));
}
.popchoo-hero__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;                  /* reset h1 default margin，讓 flex gap 精確 */
    font-family: var(--pc-font-en);
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.4;
    letter-spacing: -0.25px;
    color: var(--pc-white);
    white-space: nowrap;
}
.popchoo-hero__heading-accent {
    background: linear-gradient(90deg, var(--pc-blue) 0%, var(--pc-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.popchoo-hero__subtitle {
    margin: 0;
    max-width: 100%;
    font-family: var(--pc-font-tc);
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.2px;
    color: var(--pc-white);
    text-align: center;
}
/* 副標 4 個情境 tag — desktop 沿用一般 inline 文字流；mobile 走獨立區塊（見下方 RWD） */
.popchoo-hero__chip {
    display: inline;
}
.popchoo-hero__buttons {
    display: flex;
    gap: 24px;
    width: 600px;
    max-width: 100%;
}

/* CTA 按鈕（hero / mobile shared） — 任何狀態（default/hover/visited/active）字都是白色 */
.popchoo-cta,
.popchoo-cta:link,
.popchoo-cta:visited,
.popchoo-cta:hover,
.popchoo-cta:active,
.popchoo-cta:focus {
    color: var(--pc-white) !important;
    text-decoration: none;
}
.popchoo-cta {
    flex: 1 0 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 20px 16px 16px;
    border: none;
    border-radius: var(--pc-radius-sm);
    font-family: var(--pc-font-tc);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.popchoo-cta:hover {
    opacity: 0.85;
}
.popchoo-cta--blue  { background: var(--pc-blue); }
.popchoo-cta--orange{ background: var(--pc-orange); }
.popchoo-cta__icon  { width: 24px; height: 24px; flex-shrink: 0; }

/* 當 .popchoo-cta 用在 <button> 上（建立 CTA 走 popchooCreateClicked()）時，
   蓋掉瀏覽器 button 預設 font / outline，視覺與 <a> 完全一致 */
button.popchoo-cta {
    font: inherit;
    font-family: var(--pc-font-tc);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    -webkit-appearance: none;
            appearance: none;
}
button.popchoo-cta:focus { outline: none; }
button.popchoo-cta:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

/* ============================================================
   6. Features section
   ============================================================ */
.popchoo-features {
    background: var(--pc-white);
    padding: 80px 108px;        /* 從 48px 改 80px：CTA 按鈕跟 features 標題之間留更多呼吸空間 */
}
.popchoo-features__inner {
    max-width: 1224px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}
.popchoo-features__heading {
    text-align: center;
    color: var(--pc-black);
}
.popchoo-features__title {
    font-family: var(--pc-font-tc);
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    margin: 0 0 8px;
}
.popchoo-features__lead {
    margin: 0;
    font-family: var(--pc-font-tc);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0.1px;
}
.popchoo-features__grid {
    display: flex;
    gap: 24px;
    width: 100%;
    align-items: flex-start;
}
.popchoo-feature-card {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    text-align: center;
}
.popchoo-feature-card__icon {
    width: 48px;
    height: 48px;
}
.popchoo-feature-card__title {
    font-family: var(--pc-font-tc);
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.2px;
    color: var(--pc-black);
    margin: 0;
}
.popchoo-feature-card__desc {
    font-family: var(--pc-font-tc);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0.1px;
    color: var(--pc-black);
    margin: 0;
}

/* ============================================================
   6b. 推薦創作區（首頁，接在「選擇 PopChoo 的理由」之下）
   ============================================================ */
/* 品牌字上色（官方推薦標題共用）：Pop 藍、Choo 橘；其餘由容器決定（通常黑） */
.pc-brand-pop  { color: var(--pc-blue); }
.pc-brand-choo { color: var(--pc-orange); }

.popchoo-recommend {
    width: 100%;
    padding: 72px 108px;
}
.popchoo-recommend__inner {
    max-width: 1224px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}
.popchoo-recommend__heading {
    text-align: center;
}
.popchoo-recommend__title {
    font-family: var(--pc-font-tc);
    font-weight: 700;
    font-size: 32px;
    line-height: 44px;
    color: var(--pc-black);
    margin: 0 0 8px;
}
.popchoo-recommend__lead {
    font-family: var(--pc-font-tc);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: var(--pc-black);
    margin: 0;
    opacity: .75;
}
/* 固定 3 欄（欄寬用 1fr 自適應）——不論筆電寬度都保證一排 3 張，不會因固定基準寬差幾 px
   就把第 3 張擠到下一排。卡片在欄內置中（justify-items），卡片放大到接近 Popworld 首頁尺度。 */
.popchoo-recommend__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 28px;
    width: 100%;
}
.popchoo-reco-card {
    display: flex;
    flex-direction: column;
    width: 100%;          /* 填滿欄寬，直到 max-width */
    max-width: 400px;
    background: var(--pc-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}
.popchoo-reco-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    text-decoration: none;
    color: inherit;
}
.popchoo-reco-card__thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* 背景圖裁切（同 my-creation .popchoo-game-card__cover）：固定 4:3 + cover 置中，
       任何原圖比例都裁成一致比例；用背景圖而非 <img> 才不會被全域 img 樣式撐破比例 */
    background-color: #eceef1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.popchoo-reco-card__body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* 名稱最多 2 行（超出以 … 收尾）；CJK 無空白可斷字，補 word-break 讓長字串也能換行 */
.popchoo-reco-card__name {
    font-family: var(--pc-font-tc);
    font-weight: 700;
    font-size: 19px;
    line-height: 28px;
    color: var(--pc-black);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.popchoo-reco-card__tagline {
    font-family: var(--pc-font-tc);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--pc-black);
    margin: 0;
    opacity: .8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 創作者：頭像 + 名稱（同宣傳頁 .pc-promo__creator，尺寸縮到卡片比例） */
.popchoo-reco-card__creator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    min-width: 0;
}
.popchoo-reco-card__creator-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #eee;
}
.popchoo-reco-card__creator-name {
    font-family: var(--pc-font-tc);
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   7. Footer
   ============================================================ */
.popchoo-footer {
    width: 100%;
    background: var(--pc-hero-bg);
    color: var(--pc-white);
    padding: 40px 108px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.popchoo-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 308px;
}
.popchoo-footer__logo {
    height: 72px;
    width: 206px;
}
.popchoo-footer__logo img { width: 100%; height: 100%; }
.popchoo-footer__copy {
    color: var(--pc-gray-200);
    font-family: var(--pc-font-num);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.4px;
    margin: 0;
}
.popchoo-footer__copy p { margin: 0; }
/* 聯絡資訊（電話／信箱）：放在 © 上方一行
   - 跟 copyright 同色（--pc-gray-200）、無底線
   - hover 才稍微 highlight，與其他 footer 連結一致 */
.popchoo-footer__contact a {
    color: inherit;
    text-decoration: none;
}
.popchoo-footer__contact a:hover { opacity: 0.7; color: inherit; text-decoration: none; }
.popchoo-footer__contact-sep { margin: 0 6px; }

.popchoo-footer__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--pc-font-tc);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5px;
}
.popchoo-footer__links a {
    color: var(--pc-white);
    text-decoration: none;
}
.popchoo-footer__links a:hover { opacity: 0.7; color: var(--pc-white); }

.popchoo-footer__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.popchoo-footer__powered-logo {
    width: 100px;
    height: 40px;
}
.popchoo-footer__powered-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Lang dropdown — 沿用 popworld .lang-dropdown 結構（main.css 1862, 2169）。
   icon 用 inline SVG background (地球 / + / x) */
.popchoo-lang-dropdown {
    position: relative;
    cursor: pointer;
    user-select: none;
}
.popchoo-lang-dropdown .lang-select {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pc-white);
    transition: opacity 0.15s ease;
}
.popchoo-lang-dropdown .lang-select:hover { opacity: 0.7; }
.popchoo-lang-dropdown .lang-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/></svg>");
}
.popchoo-lang-dropdown .selected-lang {
    font-family: var(--pc-font-num);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.4px;
}
.popchoo-lang-dropdown .dropdown-btn {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* chevron-down */
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    transition: transform 0.2s ease;
}
.popchoo-lang-dropdown.is-active .dropdown-btn {
    transform: rotate(180deg);
}

/* Lang list items — 預設隱藏，is-active 顯示 */
.popchoo-lang-dropdown .lang-list-items {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);     /* footer 在頁面下方，list 往上彈出 */
    right: 0;
    z-index: 50;
    min-width: 140px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--pc-gray-800);
    border-radius: var(--pc-radius-sm);
    box-shadow: var(--pc-shadow);
}
.popchoo-lang-dropdown.is-active .lang-list-items {
    display: block;
}
.popchoo-lang-dropdown .lang-list-item {
    padding: 8px 16px;
    color: var(--pc-white);
    font-family: var(--pc-font-num);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.1s ease;
}
.popchoo-lang-dropdown .lang-list-item:hover {
    background: rgba(255, 255, 255, 0.1);
    text-decoration: underline;
}

/* ============================================================
   8. Home page composition
   ============================================================ */
.popchoo-home > section { width: 100%; }

/* ============================================================
   9. RWD — mobile (< 768px)
   ============================================================ */
@media (max-width: 767.98px) {
    /* Top bar — M3 改純文字按鈕，mobile 也顯示文字（不再 hide span）*/
    .popchoo-topbar {
        padding: 0 16px;
    }
    .popchoo-topbar__logo {
        width: 118px;
        height: 59px;  /* 2:1 比例 */
    }
    .popchoo-btn-pill {
        padding: 0 10px;
        gap: 0;
    }

    .popchoo-user-menu { right: 16px; }

    /* Hero — Mobile 沿用 PC 同款 SVG logo（之前用文字版，視覺一致性差，
       且 fastLogin / join 頁已用實體 logo，hero 也要對齊）*/
    .popchoo-hero {
        min-height: 360px;
        padding: 40px 16px;       /* 上下 40px 確保 banner 內容不貼邊 */
    }
    .popchoo-hero__inner {
        width: 100%;
        padding: 0;
        gap: 12px;                /* 從 20px 縮 12px：mobile 上下文字緊湊一點 */
    }
    /* Logo Mobile 尺寸：220 × 77（PC 280 × 98 × 220/280 比例縮放，跟 /join /fastLogin 一致）
       SVG 自帶 preserveAspectRatio="none" 會塞滿容器，所以容器尺寸必須對應 280:98 比例 */
    .popchoo-hero__logo {
        width: 220px;
        height: 77px;
        margin-bottom: -4px;      /* 跟下方標題再貼近 */
    }
    .popchoo-hero__heading {
        font-size: 1.6rem;
        line-height: 1.4;
        height: auto;
        flex-wrap: wrap;
        white-space: normal;
        margin: 0;
    }
    .popchoo-hero__subtitle {
        font-size: 15px;
        line-height: 22px;        /* 從 24 改 22：副標也縮 */
        margin: 0;
    }
    /* Mobile: 每個情境 tag 自己一行 */
    .popchoo-hero__chip {
        display: block;
    }
    .popchoo-hero__buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    /* Features — 直排，每張 card 內容置中（icon / 標題 / 描述）*/
    .popchoo-features {
        padding: 48px 16px;
    }
    .popchoo-features__title {
        font-size: 24px;
        line-height: 32px;
    }
    .popchoo-features__grid {
        flex-direction: column;
        gap: 24px;
        align-items: center;     /* 確保 column flex 下 card 也置中 */
    }
    .popchoo-feature-card {
        flex: 0 0 auto;          /* mobile column 下不要 flex grow */
        width: 100%;
        max-width: 360px;
        align-items: center;
        text-align: center;
    }
    /* 推薦區：手機 1 排（卡片放大填滿寬度）、縮邊距 */
    .popchoo-recommend { padding: 48px 20px; }
    .popchoo-recommend__title { font-size: 24px; line-height: 32px; }
    .popchoo-recommend__grid { grid-template-columns: 1fr; gap: 18px; }
    .popchoo-reco-card { max-width: 440px; }
    .popchoo-reco-card__name { font-size: 18px; }
    .popchoo-feature-card__title,
    .popchoo-feature-card__desc {
        text-align: center;
        width: 100%;
    }

    /* Footer — 改直排 */
    .popchoo-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 16px;
        gap: 24px;
    }
    .popchoo-footer__brand {
        align-items: center;
        width: auto;
    }
    .popchoo-footer__copy { text-align: center; }
    .popchoo-footer__links { align-items: center; }
    .popchoo-footer__right { align-items: center; }
}

/* ============================================================
   Tablet (768px – 1024px) — Hero 文字略縮
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .popchoo-topbar { padding: 0 32px; }
    .popchoo-features { padding: 48px 32px; }
    .popchoo-footer { padding: 40px 32px; }
    .popchoo-user-menu { right: 32px; }
    .popchoo-policy { padding: 32px 32px 60px; }
    .popchoo-recommend { padding: 56px 32px; }
    /* 平板：維持一排 3 欄（欄寬自適應），縮小間距讓 3 張放得下 */
    .popchoo-recommend__grid { gap: 16px; }
}

/* ============================================================
   App2 wrapper override（/popchoo/avatar、/popchoo/points 等沿用 popworld
   view + app2 layout，但 BrandResolver 偵測 path → header/footer 換 popchoo 版）

   popworld_global_2025.css 給 main.pop_content 上了 padding-top:
   128px (PC) / 80px (mobile)，是為了讓內容被 popworld 那顆 position:fixed
   的 nav 蓋住，所以預留空間。但 popchoo-topbar 是 position:sticky（已在 flow
   裡），這段 padding-top 對 popchoo 來說純粹是空白，會在 header 跟內容之間
   留一大塊空格。所以當頁面有 popchoo-topbar sibling 時把它歸零。
   ============================================================ */
.popchoo-topbar ~ main.pop_content {
    padding-top: 0;
}

/* ============================================================
   Policy pages (使用者授權合約 / 隱私權保護政策 / 資訊安全政策)
   左右 padding 跟 topbar / footer 對齊（PC 108px / Tablet 32px / Mobile 16px）。
   內文 font-size / line-height / color / 段落 margin 全部跟 popworld 既有
   /eula、/privacy、/informationSecurity 對齊（font-size 16px / line-height 2 /
   color black / white-space normal），這樣 7 語系的 policy.popworld_*_content
   lang key 在 popchoo 端跟在 popworld 端排版完全一致。
   ============================================================ */
.popchoo-policy {
    width: 100%;
    padding: 40px 108px 80px;
    /* font-family 不另外指定，沿用 layouts.popchoo 載入的 Noto Sans TC，
       對齊 popworld 既有 policy 頁的中文字型表現 */
    box-sizing: border-box;
}
.popchoo-policy__breadcrumb {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
}
.popchoo-policy__breadcrumb a {
    color: var(--pwBlue, #2CA6E0);
    text-decoration: none;
}
.popchoo-policy__breadcrumb a:hover { text-decoration: underline; }
.popchoo-policy__title {
    text-align: center;
    color: var(--pwBlue, #2CA6E0);
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 8px;
}
.popchoo-policy hr {
    border: 0;
    border-top: 1px solid #e5e5e5;
    margin: 16px 0 32px;
}
.popchoo-policy__content {
    color: #000;            /* 對齊 popworld eula font[color="black"] */
    font-size: 16px;        /* 對齊 popworld eula font[size:16px]，含 mobile（不縮） */
    line-height: 2;         /* 對齊 popworld eula font[line-height:2] = 32px */
}
/* 第一段去掉 margin-top（對齊 popworld 既有排版，避免標題下方空一段太多）。
   段落 margin-bottom 沿用瀏覽器預設 1em。
   不設 white-space: pre-wrap，避免 lang 字串裡的 \n 多渲染一次空行
   （lang content 已用 <br/> 控制換行）。 */
.popchoo-policy__content > p:first-child { margin-top: 0; }

@media (max-width: 767.98px) {
    .popchoo-policy { padding: 24px 16px 60px; }
    .popchoo-policy__title { font-size: 22px; }
    /* 內文 font-size 不縮，跟 popworld mobile 一致維持 16px */
}