@charset "utf-8";
/* CSS Document */

/* ==========================================================================
    樣式沙盒重設 (Scoped Reset) - 僅作用於表格包裝器內部，不影響外部網站
    ========================================================================== */
.table-container,
.table-container *,
.table-container *::before,
.table-container *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0; /* padding 由各別元素精準控制 */
    font-family: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ==========================================================================
    表格容器 (Table Container)
    ========================================================================== */
.table-container {
    width: 100% !important;
    max-width: 900px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important; /* 確保表格的圓角不會被子元素遮擋 */
    border: 1px solid #e2e8f0 !important;
    margin: 40px auto !important; /* 區塊置中與上下留白 */
}

/* ==========================================================================
    表格與選擇器強化 (高權重防止外部 CSS 覆蓋)
    ========================================================================== */
.table-container table.custom-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 標題欄位樣式：直接指定 th 元素，並加上 !important 與高 specificity 確保蓋過外部樣式 */
.table-container table.custom-table thead tr th {
    background-color: #3b5998 !important; /* 穩重質感的藍色底色 */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: 0.5px !important;
    padding: 20px 24px !important;
    text-align: center !important;
    border: none !important;
    vertical-align: middle !important;
}

/* 標題第一欄 (分辨指標) 底色加深區隔 */
.table-container table.custom-table thead tr th.col-indicator {
    background-color: #2f477a !important; 
}

.table-container table.custom-table thead tr th.col-urine {
}

.table-container table.custom-table thead tr th.col-discharge {
}

/* 內容列 (後續所有列) */
.table-container table.custom-table tbody tr {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.table-container table.custom-table tbody tr:last-child {
    border-bottom: none !important; /* 最後一列取消底線 */
}

/* 內容水平與垂直置中 (px 絕對單位，不受 root 12px 影響) */
.table-container table.custom-table td {
    background-color: #ffffff !important; /* 強制覆蓋宿主 td 的背景色 */
    padding: 24px 20px !important;
    text-align: center !important;      /* 強制水平置中 */
    vertical-align: middle !important;  /* 強制垂直置中 */
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    border: none !important;
    transition: background-color 0.25s ease !important;
}

/* 第一欄 (分辨指標) 特殊樣式與底色區隔 */
.table-container table.custom-table tbody td:first-child {
    font-weight: 700 !important;
    color: #1e293b !important;
    background-color: #fcfdfe !important; /* 淺灰藍色背景區隔 */
    border-right: 1px solid #f1f5f9 !important;
    font-size: 16px !important;
}

/* 滑鼠懸停效果：因為套用了 td 背景色，懸停效果必須直接套用在 td 上 */
.table-container table.custom-table tbody tr:hover td {
    background-color: #f8fafc !important;
}

.table-container table.custom-table tbody tr:hover td:first-child {
    background-color: #f1f5f9 !important; /* 懸停時指標列也稍微加深 */
}

/* ==========================================================================
    連結樣式 (Link Styles)
    ========================================================================== */
.table-container .product-link {
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2) !important;
    transition: all 0.2s ease !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    display: inline-block !important;
}

.table-container .product-link:hover {
    color: #1d4ed8 !important;
    background-color: rgba(59, 130, 246, 0.08) !important;
    border-bottom-color: #1d4ed8 !important;
}

/* 使用產品欄位中的文字與圖片分行且置中 */
.table-container table.custom-table td div {
    display: block !important;
    text-align: center !important;
}

.table-container table.custom-table td img {
    display: block !important;
    margin: 12px auto 0 auto !important; /* 上外距隔開文字，左右 auto 置中 */
    max-width: 120px !important;
    max-height: 120px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    padding: 6px !important;
}

/* 響應式優化 */
@media (max-width: 640px) {
    .table-container {
        margin: 20px auto !important;
    }
    .table-container table.custom-table thead tr th {
        padding: 16px 12px !important;
        font-size: 15px !important;
    }
    .table-container table.custom-table td {
        padding: 16px 12px !important;
        font-size: 14px !important;
    }
    .table-container table.custom-table tbody td:first-child {
        font-size: 14px !important;
    }
}

.flex { display: flex; }
.inline-flex { display: inline-flex; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }

.text-left{ text-align: left; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }

/* Sofy - Product */
.uc-product-desc {
    background: #fedeed;
}
.uc-product-desc .section {
    max-width: 1280px;
    margin: 0 auto;
}


.uc-h-desc{
    font-size: 1.4rem;
    padding: 2.0rem 2.0rem !important;
    margin: 0 auto 2.0rem !important;

    width: calc(100% - 10px);
    background-color: #fff;
    border-radius: 0 0 5px 5px;
    box-shadow: 2px 2px 0 1px rgba(232, 91, 160, 0.2);
}
.uc-h-desc p{
    font-size: inherit;
    color: #e85ba0;
    padding: 0;
    margin: 0;
}

@media screen and (min-width: 769px) {
    .uc-h-desc{
        font-size: 2.0rem;
    }
}

/* SOfy - Products 衛生棉褲 */
.uc-content-product-list-napkins-01 .uc-lyt-row { padding:0; max-width: none; display: block; }
.uc-content-product-list-napkins-01 .uc-lyt-col { padding: 0; display: block; }
.uc-content-product-list-napkins-01 .uc-product-body>*>* { padding: 21px 20px 31px; }
.uc-content-product-list-napkins-01 .uc-head-fix-01 { z-index: 98; }
.uc-content-product-list-napkins-01 .uc-product-head {
  background:#c2e5f8;
}
.uc-content-product-list-napkins-01 .uc-product-head>* { max-width: 1280px; margin:0 auto; }
.uc-content-product-list-napkins-01 .uc-product-head>*>* { padding-top: 15px; padding-bottom: 15px; }
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg { font-size:1.2rem; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; flex-flow:row nowrap; -webkit-box-align:center; align-items:center; margin:0; color:#e75ca0; }
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h1,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h2,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h3,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h4,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h5,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h6 { font-size:inherit; position:relative; margin:0; padding:20px 0 20px 4.375em; text-align:inherit; }
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h1::before,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h2::before,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h3::before,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h4::before,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h5::before,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h6::before { position:absolute; bottom:50%; left:0; display:block; width:3.4375em; height:3.4375em; content:""; -webkit-transform:translateY(50%); transform:translateY(50%); border-radius:50%; background:#e85ba0; }
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h1::after,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h2::after,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h3::after,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h4::after,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h5::after,
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h6::after {
    background:url(/content/dam/sites/fc-common/images/common/common/icon/shorts_napkin-04.png) no-repeat center;
    background-size:auto 2.5em;
    position:absolute; bottom:50%; left:0; display:block; width:3.4375em; height:3.4375em; content:""; -webkit-transform:translateY(50%); transform:translateY(50%); border-radius:50%;
}
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg .uc-title { font-size:1.33333em; text-align:left; }
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg .uc-text { padding-left:10px; color:#e85ba0; text-align:right; }
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg .uc-text p { margin:0; display:inline-block; text-align:left; }
.uc-content-product-list-napkins-01 .uc-product-head .uc-hdg>*:last-child { width:50%; margin-left:auto; }

@media screen and (min-width: 769px), print {
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg {
    font-size:2rem;
  }
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h1,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h2,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h3,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h4,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h5,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h6 {
    padding:25px 0 25px 3.84615em;
  }
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h1::before,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h2::before,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h3::before,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h4::before,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h5::before,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h6::before {
    width:2.69231em;
    height:2.69231em;
  }
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h1::after,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h2::after,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h3::after,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h4::after,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h5::after,
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg h6::after {
    width:2.69231em;
    height:2.69231em;
    background-size:auto 1.69231em;
  }
  .uc-content-product-list-napkins-01 .uc-product-head .uc-hdg>*:last-child {
    width:auto;
    margin-left:auto;
  }
}
.uc-content-product-list-napkins-01 .uc-product-body .uc-product-segment>* {
  max-width:1280px;
  margin:0 auto;
}
@media screen and (min-width: 769px), print {
  .uc-content-product-list-napkins-01 .uc-product-body .uc-product-segment>*>* {
    padding-top:39px;
    padding-bottom:52px;
  }
}


/* Sofy - Article */
.uc-article-htag{
    padding-left: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 12px;
    border-bottom: unset;
    text-align: left;
}

.uc-article-htag h3,
.uc-article-htag h4,
.uc-article-htag h5{ padding-left: 0 !important; margin: 0 !important; font-size: inherit; text-align: inherit; }

.uc-mod-article-content-01 .uc-article-hdg-02 { font-size: 1.8rem; }
.uc-article-htag:has(h3){ font-size: 1.7rem; }
.uc-article-htag:has(h4){ font-size: 1.6rem; }
.uc-article-htag:has(h4){ font-size: 1.5rem; }

@media screen and (min-width: 769px) {
    .uc-mod-article-content-01 .uc-article-hdg-02 { font-size: 2.0rem; }
    .uc-article-htag:has(h3){ font-size: 1.8rem; }
    .uc-article-htag:has(h4){ font-size: 1.7rem; }
    .uc-article-htag:has(h4){ font-size: 1.6rem; }
}

/* Sofy - Article List Fix */

/* 次排名 修補 */
.uc-mod-ranking-articel-02 .uc-ranking-order p{
  width: 2.7em;
  height: auto;
  margin: 9px 0 0;
  text-align: center;
}

@media screen and (min-width: 769px), print {
  .uc-mod-ranking-articel-02 .uc-ranking-order p{
    width: 3em;
    margin: 15px 0 0;
  }
}

/* 排名外 修補 */
.uc-mod-ranking-articel-03 .uc-ranking-order p {
    width: 14px;
    margin: 0;
}

@media screen and (min-width: 769px), print{
	.uc-mod-ranking-articel-03 .uc-ranking-order p {
        width: 20px;
        margin-left: 4px;
	}
}