/* 尚儀教育有聲雲｜書目詳情頁 UI V1
   只作用於 detail.aspx 新版 class，不影響後台與其他頁面。 */
:root {
  --sy-blue: #173b63;
  --sy-blue-2: #0f2c4d;
  --sy-orange: #f39a21;
  --sy-orange-2: #ffb84d;
  --sy-cream: #fff8ed;
  --sy-card: #ffffff;
  --sy-text: #263241;
  --sy-muted: #6f7d8c;
  --sy-border: #e8edf3;
  --sy-shadow: 0 16px 40px rgba(22, 48, 84, .10);
}
.sy-detail-body { background: linear-gradient(180deg, #fff8ed 0%, #f7f9fc 46%, #fff 100%); color: var(--sy-text); }
.sy-detail-shell { align-items: stretch; }
.sy-detail-main { width: 100%; padding: 28px 32px 48px; box-sizing: border-box; }
.sy-breadcrumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color: var(--sy-muted); font-size:14px; margin-bottom:20px; }
.sy-breadcrumb a { color: var(--sy-blue); text-decoration:none; font-weight:600; }
.sy-breadcrumb a:hover { color: var(--sy-orange); text-decoration:underline; }
.sy-breadcrumb i { color:#a9b4c0; }

.sy-detail-hero { display:grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap:32px; background: radial-gradient(circle at right top, rgba(255,184,77,.34), transparent 32%), linear-gradient(135deg, #ffffff 0%, #fff4df 100%); border:1px solid rgba(243,154,33,.22); border-radius:28px; padding:32px; box-shadow: var(--sy-shadow); position:relative; overflow:hidden; }
.sy-detail-hero:after { content:""; position:absolute; right:-90px; top:-90px; width:260px; height:260px; border-radius:50%; background: rgba(243,154,33,.12); }
.sy-cover-panel, .sy-title-panel { position:relative; z-index:1; }
.sy-cover-card { background:#fff; border-radius:24px; padding:16px; box-shadow:0 18px 42px rgba(20,52,90,.16); }
.sy-cover-img { width:100%; aspect-ratio: 3 / 4; object-fit:cover; border-radius:16px; display:block; background:#f2f2f2; }
.sy-cover-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.sy-cover-tags a { background:rgba(23,59,99,.09); color:var(--sy-blue); border:1px solid rgba(23,59,99,.12); padding:8px 13px; border-radius:999px; text-decoration:none; font-weight:700; font-size:14px; }
.sy-cover-tags a:hover { background: var(--sy-blue); color:#fff; }
.sy-detail-kicker { display:inline-flex; align-items:center; gap:8px; color:var(--sy-orange); font-weight:800; padding:8px 12px; border-radius:999px; background:rgba(243,154,33,.12); margin-bottom:14px; }
.sy-title-panel h1 { color:var(--sy-blue-2); font-size:40px; line-height:1.22; margin:0 0 8px; font-weight:900; letter-spacing:.02em; }
.sy-subtitle { color:var(--sy-muted); font-size:17px; margin:0 0 22px; }
.sy-primary-meta { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; margin:22px 0; }
.sy-primary-meta > div, .sy-info-tile { background:rgba(255,255,255,.82); border:1px solid var(--sy-border); border-radius:18px; padding:16px 18px; }
.sy-primary-meta span, .sy-info-tile span { display:block; color:var(--sy-muted); font-size:13px; font-weight:700; margin-bottom:6px; }
.sy-primary-meta strong, .sy-info-tile strong { color:var(--sy-blue); font-size:16px; line-height:1.55; }
.sy-primary-meta a { color:var(--sy-blue); text-decoration:none; }
.sy-primary-meta a:hover { color:var(--sy-orange); text-decoration:underline; }
.sy-action-bar { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.sy-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 18px; border-radius:999px; font-weight:800; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:.18s ease; }
.sy-btn-primary { background:linear-gradient(135deg, var(--sy-orange), var(--sy-orange-2)); color:#fff !important; box-shadow:0 10px 24px rgba(243,154,33,.28); }
.sy-btn-primary:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(243,154,33,.34); color:#fff !important; }
.sy-btn-outline { background:#fff; border-color:rgba(23,59,99,.22); color:var(--sy-blue) !important; }
.sy-btn-outline:hover { background:var(--sy-blue); color:#fff !important; }
.sy-btn-soft { background:rgba(243,154,33,.12); color:var(--sy-orange) !important; border-color:rgba(243,154,33,.16); }
.sy-btn-soft:hover { background:var(--sy-orange); color:#fff !important; }

.sy-summary-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:16px; margin:22px 0; }
.sy-info-tile { box-shadow:0 10px 24px rgba(22,48,84,.06); }
.sy-content-layout { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:22px; align-items:start; }
.sy-card { background:var(--sy-card); border:1px solid var(--sy-border); border-radius:24px; padding:24px; box-shadow:0 12px 30px rgba(22,48,84,.07); margin-bottom:22px; }
.sy-section-title { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.sy-section-title i { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; background:rgba(243,154,33,.12); color:var(--sy-orange); }
.sy-section-title h2 { color:var(--sy-blue-2); font-size:24px; margin:0; font-weight:900; }
.sy-section-title span { color:var(--sy-muted); font-size:14px; margin-left:auto; }
.sy-section-title.small h2 { font-size:20px; }
.sy-richtext { font-size:16px; line-height:1.9; color:#324154; }
.sy-richtext a { color:var(--sy-blue); }
.sy-outline-list { list-style:none; padding:0; margin:0; width:100%; }
.sy-outline-list li { display:grid; grid-template-columns:minmax(0,1fr) 110px; align-items:center; column-gap:18px; width:100%; padding:14px 4px; border-bottom:1px solid var(--sy-border); box-sizing:border-box; }
.sy-outline-list li:last-child { border-bottom:none; }
.sy-outline-name { display:flex; align-items:center; gap:10px; color:#2d3f55; line-height:1.55; min-width:0; }
.sy-outline-name i { color:var(--sy-orange); flex:0 0 auto; }
.sy-outline-duration { color:var(--sy-blue); font-weight:800; white-space:nowrap; background:#f5f8fb; border-radius:999px; padding:6px 11px; min-width:72px; text-align:center; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
.sy-side-card { padding:22px; }
.sy-meta-list { margin:0; }
.sy-meta-list dt { color:var(--sy-muted); font-size:13px; font-weight:800; margin-top:16px; }
.sy-meta-list dt:first-child { margin-top:0; }
.sy-meta-list dd { margin:6px 0 0; color:#2d3f55; line-height:1.75; }
.sy-meta-list a { color:var(--sy-blue); text-decoration:none; font-weight:700; }
.sy-meta-list a:hover { color:var(--sy-orange); text-decoration:underline; }
.sy-link-tags, .sy-keywords { display:flex; flex-wrap:wrap; gap:8px; }
.sy-link-tags a, .sy-keywords a { display:inline-flex; align-items:center; background:#f6f8fb; border:1px solid var(--sy-border); color:var(--sy-blue); padding:7px 11px; border-radius:999px; text-decoration:none; font-weight:700; }
.sy-link-tags a:hover, .sy-keywords a:hover { background:var(--sy-orange); border-color:var(--sy-orange); color:#fff; }
.sy-page-actions { display:flex; justify-content:flex-end; gap:12px; margin:28px 0 8px; }
.sy-detail-main .lblClass { line-height:1.75; }
.sy-detail-main table.noborder { display:none; }

@media (max-width: 1100px) { .sy-content-layout { grid-template-columns:1fr; } .sy-content-right { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; } .sy-content-right .sy-card { margin-bottom:0; } }
@media (max-width: 860px) { .sy-detail-main { padding:20px 16px 36px; } .sy-detail-hero { grid-template-columns:1fr; padding:22px; } .sy-cover-panel { max-width:320px; margin:0 auto; } .sy-title-panel h1 { font-size:30px; } .sy-primary-meta, .sy-summary-grid, .sy-content-right { grid-template-columns:1fr; } .sy-outline-list li { display:grid; grid-template-columns:minmax(0,1fr) 110px; align-items:center; column-gap:18px; width:100%; padding:14px 4px; border-bottom:1px solid var(--sy-border); box-sizing:border-box; } }
@media (max-width: 560px) { .sy-action-bar, .sy-page-actions { flex-direction:column; align-items:stretch; } .sy-btn { width:100%; box-sizing:border-box; } .sy-outline-list li { display:grid; grid-template-columns:minmax(0,1fr) 110px; align-items:center; column-gap:18px; width:100%; padding:14px 4px; border-bottom:1px solid var(--sy-border); box-sizing:border-box; } .sy-outline-duration { color:var(--sy-blue); font-weight:800; white-space:nowrap; background:#f5f8fb; border-radius:999px; padding:6px 11px; min-width:72px; text-align:center; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; } }


/* =========================================================
   SunnyAudios Front V1.2：detail.aspx 書目詳情頁強化
   ========================================================= */

.sy-detail-hero{
    position:relative;
}

.sy-detail-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    color:#e86d00;
    background:#fff4e7;
    border:1px solid rgba(255,132,0,.28);
    font-weight:900;
}

.sy-primary-meta{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.sy-summary-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
}

.sy-related-card{
    margin-top:22px;
}

.sy-related-links{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.sy-related-links a{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:54px;
    padding:12px 14px;
    border:1px solid rgba(255,132,0,.26);
    border-radius:18px;
    color:#073763;
    background:#fffaf4;
    text-decoration:none;
    font-weight:900;
}

.sy-related-links a:hover{
    color:#fff;
    background:#ff8500;
    border-color:#ff8500;
}

.sy-related-links a i{
    color:#ff8500;
}

.sy-related-links a:hover i{
    color:#fff;
}

.sy-action-bar .sy-btn{
    cursor:pointer;
}

.sy-meta-list dt{
    color:#073763;
    font-weight:900;
}

.sy-meta-list dd{
    line-height:1.75;
}

@media(max-width:1000px){
    .sy-primary-meta,
    .sy-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .sy-related-links{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:640px){
    .sy-summary-grid,
    .sy-related-links{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   SunnyAudios Front V1.7F：detail 章節時間右側固定對齊
   ========================================================= */

.sy-outline-name span {
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.sy-outline-duration-wrap {
    width:110px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    justify-self:end;
}


/* =========================================================
   SunnyAudios Front V1.7G：章節時間絕對右欄固定版
   目的：不再受章節標題長短影響，右側時間固定同一條垂直線
   ========================================================= */

.sy-outline-list {
    width: 100% !important;
}

.sy-outline-list li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 14px 128px 14px 4px !important;
    border-bottom: 1px solid var(--sy-border) !important;
    box-sizing: border-box !important;
}

.sy-outline-name {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    line-height: 1.55 !important;
}

.sy-outline-name i {
    flex: 0 0 auto !important;
    color: var(--sy-orange) !important;
    margin-top: 0 !important;
}

.sy-outline-name span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.sy-outline-duration-wrap {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 104px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.sy-outline-duration {
    min-width: 76px !important;
    height: 32px !important;
    padding: 0 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

@media (max-width: 560px) {
    .sy-outline-list li {
        padding-right: 100px !important;
    }

    .sy-outline-duration-wrap {
        width: 88px !important;
        right: 4px !important;
    }

    .sy-outline-duration {
        min-width: 66px !important;
        height: 30px !important;
        font-size: 14px !important;
        padding: 0 8px !important;
    }
}


/* =========================================================
   SunnyAudios Detail V1.7RWD：手機版真正 RWD 防止右側溢出
   限定 detail.aspx 新版 class；不改顏色、不改桌機版
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.sy-detail-body,
.sy-detail-shell,
.sy-detail-main,
.sy-detail-main *,
.sy-detail-main *::before,
.sy-detail-main *::after {
    box-sizing: border-box;
}

.sy-detail-main,
.sy-detail-hero,
.sy-content-layout,
.sy-content-left,
.sy-content-right,
.sy-card,
.sy-title-panel,
.sy-cover-panel {
    min-width: 0;
    max-width: 100%;
}

.sy-richtext,
.sy-richtext p,
.sy-richtext div,
.sy-richtext li,
.sy-meta-list,
.sy-meta-list dd,
.sy-outline-name,
.sy-outline-name span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sy-richtext img,
.sy-richtext iframe,
.sy-richtext video,
.sy-richtext table {
    max-width: 100% !important;
}

.sy-richtext table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
}

@media (max-width: 760px) {
    .sy-detail-main {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow-x: hidden !important;
    }

    .sy-breadcrumb {
        max-width: 100% !important;
        overflow-x: hidden !important;
        row-gap: 6px !important;
    }

    .sy-breadcrumb a,
    .sy-breadcrumb span {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .sy-detail-hero {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
        padding: 18px !important;
        overflow: hidden !important;
    }

    .sy-cover-panel {
        width: 100% !important;
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .sy-cover-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sy-cover-tags {
        max-width: 100% !important;
    }

    .sy-title-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sy-title-panel h1,
    .sy-subtitle {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .sy-primary-meta,
    .sy-summary-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .sy-primary-meta > div,
    .sy-info-tile {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .sy-primary-meta strong,
    .sy-info-tile strong {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .sy-action-bar,
    .sy-page-actions {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sy-action-bar .sy-btn,
    .sy-page-actions .sy-btn {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .sy-content-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .sy-content-left,
    .sy-content-right {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .sy-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px !important;
        overflow: hidden !important;
    }

    .sy-section-title {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .sy-section-title h2,
    .sy-section-title span {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .sy-outline-list {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .sy-outline-list li {
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sy-outline-name {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .sy-outline-name span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .sy-outline-duration-wrap {
        width: auto !important;
        min-width: 72px !important;
        max-width: 92px !important;
        justify-self: end !important;
    }

    .sy-outline-duration {
        min-width: 68px !important;
        max-width: 90px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 14px !important;
    }

    .sy-related-links {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 380px) {
    .sy-detail-main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .sy-detail-hero {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .sy-primary-meta,
    .sy-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .sy-primary-meta > div,
    .sy-info-tile {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .sy-outline-list li {
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 8px !important;
    }

    .sy-outline-duration {
        font-size: 13px !important;
    }
}