/* ==========================================================================
   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:     #1c1e16;
    --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 */

/* 把 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: 100vh;
    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 {
    height: 56px;
    width: 128px;
}
.popchoo-topbar__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.popchoo-topbar__tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Top bar 按鈕 — 建立（藍）/ 加入（橘）共用 */
.popchoo-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 8px 12px 8px 8px;
    border: none;
    border-radius: var(--pc-radius-sm);
    color: var(--pc-white);
    font-family: var(--pc-font-tc);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    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); }
.popchoo-btn-pill__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.popchoo-headphoto {
    width: 40px;
    height: 40px;
    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: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--pc-gray-100);
    overflow: hidden;
    background: var(--pc-gray-200);
    flex-shrink: 0;
}
/* Top bar 的頭像 hover 提示「可點」效果（藍色光暈）— 但 dropdown 內第一項 profile 圖不要這效果 */
.popchoo-topbar .user-profile-wrapper .user-profile-img:hover {
    box-shadow: 0 0 0 3px var(--pc-blue);
    transition: all 0.2s ease;
}
.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);
    overflow: hidden;
    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: 56px;
    height: 56px;
    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 (24x24) + tool-txt */
.popchoo-topbar .user-tool .tool-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--pc-gray-800);
    font-size: 24px;
}
.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: 16px;
    line-height: 24px;
    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: 24px;
    height: 24px;
    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;
}
.popchoo-hero__deco-tr {
    position: absolute;
    top: 0;
    right: 0;
    width: 290px;
    height: 243px;
    pointer-events: none;
}
.popchoo-hero__deco-bl {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 395px;
    height: 330px;
    pointer-events: none;
}
.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%; }
.popchoo-hero__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    margin: 0;                  /* reset h1 default margin，讓 flex gap 精確 */
    font-family: var(--pc-font-en);
    font-weight: 800;
    font-size: 48px;
    line-height: 72px;
    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;
    width: 464px;
    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;
}
.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;
}

/* ============================================================
   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; }

.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 — 按鈕只剩 icon (PC 是 icon+文字) */
    .popchoo-topbar {
        padding: 0 16px;
    }
    .popchoo-topbar__logo {
        width: 112px;
        height: 56px;
    }
    .popchoo-btn-pill {
        padding: 8px;
        gap: 0;
    }
    .popchoo-btn-pill > span { display: none; }   /* hide 建立 / 加入 文字 */

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

    /* Hero — Mobile 用文字 logo（不顯示彩色大 logo）*/
    .popchoo-hero {
        min-height: 360px;
        padding: 40px 16px;       /* 上下 40px 確保 banner 內容不貼邊 */
    }
    .popchoo-hero__inner {
        width: 100%;
        padding: 0;
        gap: 12px;                /* 從 20px 縮 12px：mobile 上下文字緊湊一點 */
    }
    .popchoo-hero__logo {
        width: auto;
        height: auto;
        margin-bottom: -4px;      /* 跟下方標題再貼近 */
    }
    .popchoo-hero__logo img { display: none; }    /* 改用文字 PopChoo */
    .popchoo-hero__logo::after {
        content: 'PopChoo';
        display: block;
        font-family: var(--pc-font-en);
        font-weight: 800;
        font-size: 48px;
        line-height: 56px;
        letter-spacing: -0.25px;
        color: var(--pc-white);
        text-align: center;
    }
    .popchoo-hero__heading {
        font-size: 32px;
        line-height: 40px;        /* 從 48 改 40：行高縮小，整體更緊湊 */
        height: auto;
        flex-wrap: wrap;
        white-space: normal;
        margin: 0;
    }
    .popchoo-hero__subtitle {
        font-size: 15px;
        line-height: 22px;        /* 從 24 改 22：副標也縮 */
        margin: 0;
    }
    .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;
    }
    .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; }
}

/* ============================================================
   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 */
}