/* -------------------- 標題 Wrapper -------------------- */
.wrapper-title {
    max-width: var(--desk-width);
    margin: 140px auto 60px;
    /* border: 1px solid red; */
    padding: 24px;
}

.wrapper-title p {
    font-size: var(--H5-size);
    font-family: var(--chinese-font);
    color: var(--bdc-pink);
    font-weight: bold;
    margin-bottom: 20px;
}

.wrapper-title h1 {
    font-size: var(--H1-size);
    font-family: var(--chinese-font);
    color: var(--ftc-black);
    line-height: var(--line-height120);
    font-weight: bold;
    margin-bottom: 28px;
}

.wrapper-title h2 {
    font-size: var(--H5-size);
    line-height: var(--line-height120);
    color: var(--ftc-700);
}



/* -------------------- 二欄式 Wrapper-Grid -------------------- */
.wrapper-grid {
    /* outline: 1px red solid; */
    max-width: var(--desk-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 24px;
}

.left-side {
    /* outline: 1px solid blue; */
    grid-column: 1 / 3;
}

.right-side {
    /* outline: 1px solid yellow; */
    grid-column: 3 / 4;

    display: flex;
    flex-direction: column;
    padding-left: 60px;
}

/* -------------------- 文章內容 -------------------- */

.left-side article {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.left-side section {}

.left-side section > h3 {
    color: var(--ftc-black);
    font-size: var(--H5-size);
    font-weight: bold;
    margin-bottom: 1em;
}

.left-side section > p {
    color: var(--ftc-black);
    font-size: var(--H6-size);
    line-height: var(--line-height160);
}

.left-side section > ul {
    list-style: disc;
    padding-left: 2em;
}

.left-side section > ul > li {
    color: var(--ftc-black);
    font-size: var(--H6-size);
    line-height: var(--line-height160);
}

.left-side section > img {
    width: 100%;
}

/* 額外調整 */
.left-side section > .number-list {
    list-style: decimal;
}

.left-side section > .before-ul {
    margin-bottom: 8px;
}

/* -------------------- 小編 -------------------- */
.editor {
    margin-top: 20px;
    font-size: var(--p-size);
    color: var(--ftc-700);
    line-height: var(--line-height160);
}



/* -------------------- 熱門必讀 -------------------- */
.popular-posts {
    position: sticky;
    top: 120px;
    left: 0;
}

.popular-posts h1 {
    font-size: var(--H4-size);
    font-weight: bold;
    color: var(--ftc-black);
    margin-bottom: 20px;
}

.popular-posts ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.popular-posts li {
    padding: 8px;
}

.popular-posts li:hover {
    box-shadow: 0 0 14px hsl(0, 0%, 0%, .13);
}

.popular-posts a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 20px;
}

.popular-posts img {
    display: block;
    width: 60px;
}

.popular-posts p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    color: var(--ftc-700);
    font-size: var(--H6-size);
    line-height: var(--line-height160);
}


/* -------------------- 社群分享 -------------------- */
.wrapper-share {
    max-width: var(--desk-width);
    margin: 60px auto 0px;
    /* border: 1px solid red; */
    text-align: center;
}

.wrapper-share h1 {
    font-family: var(--eng-font);
    color: var(--ftc-700);
    font-size: var(--H5-size);
    margin-bottom: 20px;
    position: relative;
}

/* --- 兩條線 --- */
.wrapper-share h1::before, .wrapper-share h1::after {
    content: "";
    display: inline-block;
    width: 20%;
    height: 0.5px;
    background-color: var(--bdc-gray);
    vertical-align: middle;
}

.wrapper-share h1::before {
    margin-right: 20px;
}

.wrapper-share h1::after {
    margin-left: 20px;
}

/* --- social-icon --- */
.wrapper-share .share-icon-area {
    display: flex;
    justify-content: center;
    gap: 36px;
}

.share-icon-area i {
    font-size: var(--H3-size);
    color: var(--bdc-green);
}