/* 尚儀教育有聲雲｜關於我們與聯絡資訊 UI V1 */
:root{--km-blue:#0b3b66;--km-blue2:#174f7e;--km-orange:#f39a21;--km-ink:#1f3448;--km-muted:#68798b;--km-line:#dce6ef;--km-bg:#f4f7fa;}
html,body{margin:0;min-height:100%;}
body.sy-knowmore-body{background:var(--km-bg);color:var(--km-ink);font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;}
.sy-knowmore-body *{box-sizing:border-box;}
.sy-km-skip{position:absolute;left:-9999px;top:auto;}
.sy-km-skip:focus{left:16px;top:16px;z-index:10000;padding:10px 16px;background:#fff;color:var(--km-blue);border-radius:8px;}
.sy-km-main{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:34px 0 60px;}
.sy-km-hero{padding:42px 48px;border-radius:30px;background:linear-gradient(135deg,var(--km-blue),var(--km-blue2));color:#fff;box-shadow:0 18px 42px rgba(11,59,102,.16);}
.sy-km-eyebrow{margin:0 0 10px;color:#ffd099;font-size:13px;font-weight:900;letter-spacing:.14em;}
.sy-km-hero h1{margin:0;font-size:clamp(32px,4vw,48px);line-height:1.2;font-weight:950;}
.sy-km-hero>p:last-child{margin:14px 0 0;color:rgba(255,255,255,.9);font-size:18px;line-height:1.7;}
.sy-km-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.8fr);gap:24px;margin-top:24px;align-items:start;}
.sy-km-card{border:1px solid var(--km-line);border-radius:26px;background:#fff;box-shadow:0 14px 34px rgba(23,52,80,.08);}
.sy-km-about{display:grid;grid-template-columns:72px minmax(0,1fr);gap:22px;padding:34px;}
.sy-km-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:20px;background:#fff1dc;color:#db7e06;font-size:30px;font-weight:900;}
.sy-km-kicker{margin:0 0 8px;color:var(--km-orange);font-size:13px;font-weight:900;letter-spacing:.1em;}
.sy-km-card h2{margin:0 0 18px;color:var(--km-blue);font-size:28px;line-height:1.35;font-weight:950;}
.sy-km-about p:not(.sy-km-kicker){margin:0 0 16px;color:#40566b;font-size:17px;line-height:1.9;}
.sy-km-contact{padding:32px;}
.sy-km-contact dl{margin:0;}
.sy-km-contact dl>div{padding:14px 0;border-top:1px solid var(--km-line);}
.sy-km-contact dl>div:first-child{border-top:0;padding-top:0;}
.sy-km-contact dt{margin:0 0 5px;color:var(--km-muted);font-size:13px;font-weight:800;}
.sy-km-contact dd{margin:0;color:var(--km-ink);font-size:15px;line-height:1.65;font-weight:700;overflow-wrap:anywhere;}
.sy-km-contact a{color:var(--km-blue);text-decoration:none;}
.sy-km-contact a:hover{text-decoration:underline;}
.sy-km-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.sy-km-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px 17px;border-radius:12px;font-size:14px;font-weight:900;text-decoration:none!important;}
.sy-km-btn-primary{color:#fff!important;background:linear-gradient(135deg,var(--km-orange),#d97d04);}
.sy-km-btn-light{color:var(--km-blue)!important;background:#f4f8fb;border:1px solid var(--km-line);}
@media(max-width:900px){.sy-km-grid{grid-template-columns:1fr}.sy-km-main{width:min(100% - 24px,1180px)}.sy-km-hero{padding:34px 30px}}
@media(max-width:560px){.sy-km-main{width:min(100% - 20px,1180px);padding-top:20px}.sy-km-hero{padding:28px 22px;border-radius:22px}.sy-km-hero>p:last-child{font-size:16px}.sy-km-about{grid-template-columns:1fr;padding:24px}.sy-km-contact{padding:24px}.sy-km-card{border-radius:22px}.sy-km-actions{display:grid}.sy-km-btn{width:100%}}


/* 2026-07-25 縮寬版：版心比 V1 更收斂，閱讀感比照我的書房 */
.sy-km-main{
    width:min(1080px,calc(100% - 56px));
    margin:0 auto;
    padding:28px 0 56px;
}
.sy-km-hero{
    padding:34px 40px;
    border-radius:28px;
}
.sy-km-hero h1{
    max-width:760px;
}
.sy-km-hero>p:last-child{
    max-width:760px;
}
.sy-km-grid{
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.82fr);
    gap:22px;
    margin-top:22px;
}
.sy-km-about{
    padding:30px;
}
.sy-km-contact{
    padding:28px;
}
@media(max-width:1180px){
    .sy-km-main{width:min(100% - 40px,1080px)}
}
@media(max-width:900px){
    .sy-km-main{width:min(100% - 24px,1080px)}
}
@media(max-width:560px){
    .sy-km-main{width:min(100% - 20px,1080px);padding-top:20px}
    .sy-km-hero{padding:26px 22px;border-radius:22px}
}


/* 2026-07-25 V3：主視覺固定藍底白字，避免被全站舊樣式覆蓋 */
body.sy-knowmore-body .sy-km-hero,
body.sy-knowmore-body .sy-km-hero:hover,
body.sy-knowmore-body .sy-km-hero:focus {
    color:#ffffff !important;
    background:linear-gradient(135deg,#0b3b66 0%,#174f7e 100%) !important;
}
body.sy-knowmore-body .sy-km-hero h1,
body.sy-knowmore-body .sy-km-hero h1 a,
body.sy-knowmore-body .sy-km-hero p,
body.sy-knowmore-body .sy-km-hero span {
    color:#ffffff !important;
    text-shadow:none !important;
}
body.sy-knowmore-body .sy-km-hero .sy-km-eyebrow {
    color:#ffd59d !important;
}


/* 2026-07-25 V4：版心強制比照「我的書房」最終版，避免全站 main 樣式覆蓋 */
body.sy-knowmore-body main#mainContent.sy-km-main {
    display: block !important;
    width: calc(100% - 40px) !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 28px 0 56px !important;
}

body.sy-knowmore-body main#mainContent.sy-km-main .sy-km-hero,
body.sy-knowmore-body main#mainContent.sy-km-main .sy-km-grid {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.sy-knowmore-body main#mainContent.sy-km-main .sy-km-hero {
    padding: 30px 38px !important;
    border-radius: 28px !important;
}

@media (max-width: 900px) {
    body.sy-knowmore-body main#mainContent.sy-km-main {
        width: calc(100% - 28px) !important;
        padding-top: 22px !important;
    }
}

@media (max-width: 640px) {
    body.sy-knowmore-body main#mainContent.sy-km-main {
        width: calc(100% - 24px) !important;
        padding: 16px 0 34px !important;
    }

    body.sy-knowmore-body main#mainContent.sy-km-main .sy-km-hero {
        padding: 24px 22px !important;
        border-radius: 22px !important;
    }
}