/*
 * MIKESYS 配色與元件
 * ------------------------------------------------------------
 * 依 Logo 延伸：水波紋（洗滌／流動）疊在齒輪（工業／精密）。
 * 整站的對比就從這組來 —— 大區塊的分隔用波浪，資料區塊用工整的網格。
 *
 * 色碼來自「配色指南」8-1，全部定義成 CSS 變數，
 * 元件一律引用變數而不寫死色碼，之後要微調整站同步改。
 *
 * 這支放在 style-fontsize.css 之後載入，同特異性時它要贏。
 */

:root {
    /* 8-1 色彩系統 */
    --mk-primary: #1C69A8;   /* 科技鈷藍：主要按鈕、連結、標題重點字 */
    --mk-accent:  #36B1BC;   /* 湖水綠：CTA hover、次要強調、圖示 */
    --mk-dark:    #0D3B75;   /* 深海軍藍：Header／Footer、Hero 深色區塊 */
    --mk-light:   #D2F4F5;   /* 冰藍：區塊底色、卡片淺底 */
    --mk-text:    #1E2A38;   /* 深藍灰：內文，比純黑柔和又保有藍調 */
    --mk-white:   #FFFFFF;

    /* 由主色推出來的輔助值。指南說冰藍直接大面積鋪會太淡，
       所以區塊底色用降飽和後的版本，只有卡片與標籤才用原色。 */
    --mk-light-soft: #F2FAFB;
    --mk-line:       #D8E3ED;
    --mk-muted:      #5D6B7A;
    --mk-hover:      #15537F;   /* 主色壓深，按鈕 hover 用 */

    /* 淺亮青只用在小面積裝飾（icon 邊框、hover 光澤），不鋪大面積 */
    --mk-glow: #9FE0E3;

    /* 語意色，跟品牌色分開 */
    --mk-warn: #B26A00;
    --mk-ok:   #2E7D32;
}

body {
    color: var(--mk-text);
}

/* ---------- 連結與標題 ---------- */
#main a:hover,
.mk-inquiry a:hover,
.mk-zone a:hover {
    color: var(--mk-primary);
}

#main .box > .hd h3 {
    color: var(--mk-dark);
    border-left: 4px solid var(--mk-accent);
    padding-left: 12px;
}

/* ---------- 按鈕 ---------- */
.mk-btn,
#main a.mk-btn {
    display: inline-block;
    padding: 11px 26px;
    min-height: 44px;
    line-height: 22px;
    box-sizing: border-box;
    background: var(--mk-primary);
    color: var(--mk-white);
    border: 1px solid var(--mk-primary);
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.mk-btn:hover,
#main a.mk-btn:hover {
    background: var(--mk-hover);
    border-color: var(--mk-hover);
    color: var(--mk-white);
}

.mk-btn-ghost,
#main a.mk-btn-ghost {
    background: transparent;
    color: var(--mk-primary);
}

.mk-btn-ghost:hover,
#main a.mk-btn-ghost:hover {
    background: var(--mk-light-soft);
    color: var(--mk-hover);
}

/* 商品頁的詢價按鈕沿用站內既有的 .button 外框，只換顏色 */
#main a.button.mk-btn-quote {
    background: var(--mk-primary);
    border-color: var(--mk-primary);
    color: var(--mk-white);
}

#main a.button.mk-btn-quote:hover {
    background: var(--mk-hover);
    border-color: var(--mk-hover);
}

#main a.button.mk-btn-line {
    background: var(--mk-white);
    border: 1px solid var(--mk-accent);
    color: var(--mk-accent);
}

#main a.button.mk-btn-line:hover {
    background: var(--mk-light-soft);
}

/* ---------- 商品頁：價格改成詢價／限購 ---------- */
.mk-price-quote strong {
    color: var(--mk-primary);
    font-size: 22px;
    font-weight: 700;
}

.mk-price-quote .mk-price-note {
    display: block;
    margin-top: 4px;
    color: var(--mk-muted);
    font-size: 13px;
    font-weight: 400;
}

.mk-locked {
    display: inline-block;
    margin-right: 12px;
    padding: 8px 14px;
    background: var(--mk-light);
    border-radius: 4px;
    color: var(--mk-dark);
    font-size: 14px;
}

.mk-stock {
    display: inline-block;
    padding: 2px 10px;
    background: var(--mk-accent);
    border-radius: 11px;
    color: var(--mk-white);
    font-size: 12px;
    font-weight: 600;
}

.mk-spec {
    color: var(--mk-muted);
}

/* ---------- 詢價表單 ---------- */
.mk-inquiry .bd {
    padding: 22px 24px 28px;
}

.mk-inquiry-intro,
.mk-inquiry-hint {
    margin: 0 0 14px;
    line-height: 1.75;
    font-size: 15px;
}

.mk-inquiry-hint {
    padding: 12px 16px;
    background: var(--mk-light-soft);
    border-left: 4px solid var(--mk-accent);
    border-radius: 0 4px 4px 0;
    color: var(--mk-text);
}

.mk-inquiry-goods {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--mk-light-soft);
    border: 1px solid var(--mk-line);
    border-radius: 6px;
}

.mk-inquiry-thumb {
    width: 88px;
    height: 88px;
    object-fit: contain;
    background: var(--mk-white);
    border-radius: 4px;
    flex: none;
}

.mk-inquiry-goods-info {
    min-width: 0;
}

.mk-inquiry-goods-name {
    margin: 0 0 6px;
    color: var(--mk-dark);
    font-size: 17px;
    font-weight: 700;
}

.mk-inquiry-goods-meta {
    margin: 0;
    color: var(--mk-muted);
    font-size: 13px;
}

.mk-form {
    max-width: 640px;
}

.mk-field {
    margin-bottom: 16px;
}

.mk-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--mk-dark);
    font-size: 14px;
    font-weight: 600;
}

.mk-req {
    margin-left: 6px;
    padding: 1px 7px;
    background: var(--mk-light);
    border-radius: 9px;
    color: var(--mk-primary);
    font-size: 11px;
    font-weight: 600;
}

.mk-field input[type="text"],
.mk-field input[type="tel"],
.mk-field input[type="email"],
.mk-field textarea {
    width: 100%;
    padding: 11px 13px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--mk-white);
    border: 1px solid var(--mk-line);
    border-radius: 4px;
    color: var(--mk-text);
    font: inherit;
    font-size: 15px;
}

.mk-field input:focus,
.mk-field textarea:focus {
    border-color: var(--mk-primary);
    outline: 2px solid var(--mk-glow);
    outline-offset: 1px;
}

.mk-field textarea {
    min-height: 130px;
    line-height: 1.7;
    resize: vertical;
}

.mk-submit {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.mk-privacy {
    margin-top: 14px;
    color: var(--mk-muted);
    font-size: 13px;
}

/* 蜜罐：給機器人看的，人看不到也 tab 不到 */
.mk-honey {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mk-error {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #FDECEC;
    border-left: 4px solid #C62828;
    border-radius: 0 4px 4px 0;
    color: #8E1F1F;
    font-size: 15px;
}

.mk-done {
    padding: 18px 4px 8px;
}

.mk-done-title {
    margin: 0 0 10px;
    color: var(--mk-dark);
    font-size: 22px;
    font-weight: 700;
}

.mk-done-sn {
    margin: 0 0 10px;
    font-size: 16px;
}

.mk-done-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* ---------- 鞋包特區 ---------- */
.mk-zone .bd {
    padding: 22px 24px 28px;
}

.mk-zone-title {
    margin: 0 0 8px;
    color: var(--mk-dark);
    font-size: 20px;
    font-weight: 700;
    text-wrap: balance;
}

.mk-zone-intro {
    margin: 0 0 24px;
    max-width: 68ch;
    color: var(--mk-muted);
    line-height: 1.8;
    font-size: 15px;
}

/* 齒輪的精密感：網格對齊工整，與 Hero 的流動感形成對比 */
.mk-zone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}

.mk-zone-card {
    display: flex;
    flex-direction: column;
    background: var(--mk-white);
    border: 1px solid var(--mk-line);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.mk-zone-card:hover {
    border-color: var(--mk-accent);
    box-shadow: 0 2px 12px rgba(28, 105, 168, .12);
}

.mk-zone-photo {
    display: block;
    padding: 14px;
    background: var(--mk-light-soft);
    text-align: center;
}

.mk-zone-photo img {
    max-width: 100%;
    height: 150px;
    object-fit: contain;
}

.mk-zone-body {
    padding: 12px 14px 16px;
}

.mk-zone-cat {
    margin: 0 0 6px;
    color: var(--mk-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}

.mk-zone-name {
    display: block;
    margin-bottom: 6px;
    color: var(--mk-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}

.mk-zone-spec {
    margin: 0 0 8px;
    color: var(--mk-muted);
    font-size: 13px;
}

.mk-zone-price {
    margin: 0;
    font-size: 16px;
}

.mk-zone-price strong {
    color: var(--mk-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mk-quote-tag,
.mk-rank-tag {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.mk-quote-tag {
    background: var(--mk-light);
    color: var(--mk-primary);
}

.mk-rank-tag {
    background: #FFF3DC;
    color: var(--mk-warn);
}

.mk-zone-foot,
.mk-empty {
    margin: 22px 0 0;
    color: var(--mk-muted);
    font-size: 14px;
}

/* ---------- 文章頁的表格與按鈕（頁面內容用得到） ---------- */
.mk-table {
    width: 100%;
    margin: 14px 0 20px;
    border-collapse: collapse;
    font-size: 15px;
}

.mk-table th,
.mk-table td {
    padding: 10px 14px;
    border: 1px solid var(--mk-line);
    text-align: left;
    line-height: 1.7;
}

.mk-table th {
    width: 30%;
    background: var(--mk-light-soft);
    color: var(--mk-dark);
    font-weight: 600;
    white-space: nowrap;
}

/* 寬內容自己捲，頁面本體不要橫向捲動 */
.article_content table,
.mk-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

/* ---------- 手機 ---------- */
@media screen and (max-width: 767px) {
    .mk-inquiry .bd,
    .mk-zone .bd {
        padding: 16px 14px 22px;
    }

    .mk-inquiry-goods {
        flex-direction: column;
        align-items: flex-start;
    }

    .mk-zone-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .mk-zone-photo img {
        height: 116px;
    }

    .mk-submit .mk-btn {
        flex: 1 1 auto;
        text-align: center;
    }

    .mk-table th {
        width: 38%;
    }
}

/* ---------- 手機浮動列：詢價／限購版本 ---------- */
.mk-float-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
}

.mk-float-quote .mk-float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    background: var(--mk-primary);
    border-radius: 6px;
    color: var(--mk-white);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

.mk-float-quote .mk-float-btn:hover,
.mk-float-quote .mk-float-btn:active {
    background: var(--mk-hover);
    color: var(--mk-white);
}

/* ---------- 語言切換 ---------- */
.mk-lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 12px;
    flex: none;
}

.mk-lang-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 11px;
    border: 1px solid var(--mk-line);
    border-radius: 4px;
    background: var(--mk-white);
    color: var(--mk-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.mk-lang-item:hover {
    border-color: var(--mk-primary);
    color: var(--mk-primary);
}

.mk-lang-item.is-current {
    background: var(--mk-primary);
    border-color: var(--mk-primary);
    color: var(--mk-white);
    cursor: default;
}

/* 手機上只留兩個字母，三顆按鈕才排得下 */
@media screen and (max-width: 767px) {
    .mk-lang-switch {
        margin-right: 6px;
        gap: 1px;
    }

    .mk-lang-item {
        min-height: 30px;
        padding: 4px 7px;
        font-size: 12px;
        max-width: 4.2em;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}