@media all {
  /* 內容頁封面圖防溢出：原圖過大時限制在內容區內、維持比例（全板通用，各板 contentTemp 桶未涵蓋） */
  div.contentTempCover_odd img {
    max-width: 100%;
    height   : auto;
  }

  /* 列表頁說明欄（編輯器內容注入表格）圖片防溢出：原圖過大時限制在儲存格內、維持比例（全板通用） */
  .textTableContent_odd td img {
    max-width: 100%;
    height   : auto;
    cursor   : pointer;
  }

  /* linkBlock 標題改用 <button class="odd-linkblock-forh3color"> 做展開/收合（無障礙）。button 預設不繼承
     div.linkBlockTitle_odd 的字色 → 標題變成瀏覽器深色、配各板深色標題底＝低對比。此處 reset 成透明按鈕並
     color:inherit，讓標題沿用各板 linkBlockTitle 設的色（達原本設計的對比）。全板適用；個別板若另設色(含 !important)仍會贏。 */
  .odd-linkblock-forh3color {
    background: none;
    border    : 0;
    margin    : 0;
    padding   : 0;
    font      : inherit;
    color     : inherit;
    cursor    : pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  .transparent {
    display: block;
    color: transparent;
    background-color: transparent;
    line-height: 100%;
    cursor: default;
  }
  .transparent:link {
    color: transparent;
    background-color: transparent;
    cursor: default;
  }
  .transparent:visited {
    color: transparent;
    background-color: transparent;
    cursor: default;
  }
  .fake {
    width: 100%;
  }
  *[data-warning] {
    color: #e60a0a;
  }
  ul[data-liststyle-none],
  ol[data-liststyle-none] {
    list-style-type: none;
  }
  ul[data-liststyle-none] ul,
  ol[data-liststyle-none] ul,
  ul[data-liststyle-none] ol,
  ol[data-liststyle-none] ol {
    list-style-type: none;
  }
  button.btn {
    margin: 0 5px;
    box-shadow: 1px 1px 1px 1px rgba(150, 150, 150, 0.5);
    font-size: 1.1em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
  }
  button.btn:hover {
    box-shadow: 1px 1px 1px 1px rgba(150, 150, 150, 0.7);
  }
  button.btn:active {
    box-shadow: inset 1px 1px 1px 1px rgba(150, 150, 150, 0.3);
  }
  button.btn.btn_rectangle {
    min-width: 5em;
    padding: 3px 1em;
    border-radius: 5px;
  }
  button.btn.btn_circle_medium {
    font-size: calc(1.1em / 1.3);
    width: 1.3em;
    height: 1.3em;
    line-height: 1.3em;
    border-radius: 50%;
  }
  button.btn.red {
    background: linear-gradient(0deg, #a71416 30%, #c53234 70%);
    color: #F8F8F8;
  }
  button.btn.red:hover {
    background: linear-gradient(0deg, #c53234 30%, #e35052 70%);
  }
  button.btn.red:active {
    background: linear-gradient(0deg, #890000 30%, #a71416 70%);
  }
  button.btn.orange {
    background: linear-gradient(0deg, #eb8c04 30%, #ffa004 70%);
    color: #F8F8F8;
  }
  button.btn.orange:hover {
    background: linear-gradient(0deg, #eba004 30%, #ffb418 70%);
  }
  button.btn.orange:active {
    background: linear-gradient(0deg, #d77804 30%, #eb8c04 70%);
  }
  button.btn.green {
    background: linear-gradient(0deg, #19535f 30%, #2d6773 70%);
    color: #F8F8F8;
  }
  button.btn.green:hover {
    background: linear-gradient(0deg, #2d6773 30%, #417b87 70%);
  }
  button.btn.green:active {
    background: linear-gradient(0deg, #053f4b 30%, #19535f 70%);
  }
  button.btn.blue {
    background: linear-gradient(0deg, #1166ff, #589ff8);
    color: #F8F8F8;
  }
  button.btn.blue:hover {
    background: linear-gradient(0deg, #257aff, #6cb3ff);
  }
  button.btn.blue:active {
    background: linear-gradient(0deg, #0052eb, #448be4);
  }
  button.btn.purple {
    background: linear-gradient(0deg, #622ea1 30%, #6c33b2 70%);
    color: #F8F8F8;
  }
  button.btn.purple:hover {
    background: linear-gradient(0deg, #6c33b2 30%, #7135ba 70%);
  }
  button.btn.purple:active {
    background: linear-gradient(0deg, #5b2b96 30%, #622ea1 70%);
  }
  button.btn.gray {
    background: linear-gradient(0deg, #807f85, #a2a1a7);
    color: #F8F8F8;
  }
  button.btn.gray:hover {
    background: linear-gradient(0deg, #949399, #b6b5bb);
  }
  button.btn.gray:active {
    background: linear-gradient(0deg, #6c6b71, #8e8d93);
  }
  button.btn.white {
    background: linear-gradient(0deg, #eeeeee, #f5f5f5);
    color: #414141;
  }
  button.btn.white:hover {
    background: linear-gradient(0deg, #f8f8f8, #ffffff);
  }
  button.btn.white:active {
    background: linear-gradient(0deg, #dadada, #e1e1e1);
  }
  button.icon {
    padding: 1px 4px;
    color: #F8F8F8;
    font-size: 0.8em;
    font-weight: 300;
    border-width: 2px;
    border-style: solid;
    border-radius: 3px;
    cursor: pointer;
    transition: linear 100ms;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  }
  button.icon:hover {
    color: #414141;
    background-color: #F8F8F8;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  }
  button.icon:active {
    color: #414141;
    background-color: #F8F8F8;
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.1);
  }
  button.icon.red {
    background-color: #a71416;
    border-color: #a71416;
  }
  button.icon.orange {
    background-color: #eb8c04;
    border-color: #eb8c04;
  }
  button.icon.green {
    background-color: #19535f;
    border-color: #19535f;
  }
  button.icon.blue {
    background-color: #0052eb;
    border-color: #0052eb;
  }
  button.icon.purple {
    background-color: #5b2b96;
    border-color: #5b2b96;
  }
  button.icon.gray {
    background-color: #807f85;
    border-color: #807f85;
  }
  a.icon {
    width: 1em !important;
    height: 1em !important;
    background-size: 100%;
    margin-bottom: -0.2em;
    cursor: pointer;
  }
  a.icon.time {
    background-image: url("/oddi_lib/icon/1.x/timer.png");
  }
  a.icon.ontop {
    background-image: url("/oddi_lib/icon/1.x/ontop.png");
  }
  a.icon.error {
    background-image: url("/oddi_lib/icon/1.x/error.png");
  }
  a.icon.timeoff {
    background-image: url("/oddi_lib/icon/1.x/timeoff.png");
  }
  .accessibilityBadge {
    border: 0;
    float: right;
    width: calc(88px * 1.6);
    height: calc(31px * 1.6);
  }
  .accessibilityBadge > img {
    width: 100%;
    height: 100%;
  }
}

/* 短內容頁 footer 貼齊視窗下緣（全板共用）：main 撐開剩餘高度 */
@media only screen and (min-width: 0) {
    body {
        display       : flex;
        flex-direction: column;
        min-height    : 100vh;
    }
    main {
        flex: 1 0 auto;
    }
}

/* 全站訪客數（系統設定「計數器」）：放 base 讓 standalone 板也必載；
   footerMain 在部分板是 grid（nhsh/klgsh 家族）或 flex，強制佔滿整列 text-align 才有效 */
@media only screen and (min-width: 0) {
    div.Oddi_VisitorsCount {
        margin-top: .6em;
        width: 100%;
        box-sizing: border-box;
        grid-column: 1 / -1;
        align-self: stretch;
        justify-self: stretch;
    }
    div.Oddi_VisitorsCount[data-align="left"] {
        text-align: left;
    }
    div.Oddi_VisitorsCount[data-align="center"] {
        text-align: center;
    }
    div.Oddi_VisitorsCount[data-align="right"] {
        text-align: right;
    }
    div.Oddi_VisitorsCount .Oddi_VisuallyHidden {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    span.Oddi_VisitorsCountFlip {
        display: inline-flex;
        gap: 2px;
        vertical-align: middle;
        margin: 0 .2em;
    }
    span.Oddi_VisitorsCountFlipCard {
        display: inline-block;
        min-width: 1.15em;
        padding: .15em 0;
        background: linear-gradient(to bottom, #3a3a3a 0%, #222 49%, #111 51%, #2a2a2a 100%);
        color: #fff;
        border-radius: .2em;
        text-align: center;
        font-weight: bold;
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .35);
    }
    span.Oddi_VisitorsCountFlipComma {
        align-self: flex-end;
        opacity: .8;
    }
}