/* 肌膚檢測首頁：快捷入口補說明文字、九種困擾改成有圖示的卡片（2026-09-28）
   老闆看過改版後的首頁：「中間有一小塊還是有一點點空」「九大困擾也用圖示說明」。
   只作用在 #page-home。圖示是線條畫，顏色跟著文字走。 */

/* ---------- 快捷入口：圖示＋標題＋一句說明＋箭頭 ---------- */
#page-home .quick-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 20px 18px;
}
#page-home .quick-action-icon { flex: none; margin: 0; width: 52px; height: 52px; }
#page-home .quick-action-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#page-home .quick-action-label { font-size: 16px; line-height: 1.3; }
#page-home .quick-action-desc { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
#page-home .quick-action-go {
    flex: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-deep);
    font-size: 15px;
    transition: background .2s, color .2s, border-color .2s;
}
#page-home .quick-action-card:hover .quick-action-go { background: var(--ink); border-color: var(--ink); color: #f3ecdf; }

/* ---------- 九種困擾：三欄卡片（圖示在上、名稱、一句說明；同一區塊旁邊放照片時欄寬只剩一半，直排才不會擠） ---------- */
#page-home .hl-concerns.hl-concerns--cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 12px;
}
#page-home .hl-concerns.hl-concerns--cards li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px 18px 16px;
    font-size: 14px;
    font-weight: 400;
}
#page-home .hl-concern-ic {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
#page-home .hl-concern-ic svg {
    width: 25px; height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#page-home .hl-concern-ic svg .f { fill: currentColor; stroke: none; }
#page-home .hl-concern-ic svg .t { fill: var(--gold); fill-opacity: .45; }
#page-home .hl-concerns--cards b { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); white-space: nowrap; }
#page-home .hl-concerns--cards small { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 4px; }

@media (max-width: 760px) {
    #page-home .quick-actions { grid-template-columns: 1fr; }
    #page-home .quick-action-card { padding: 14px 16px; }
    #page-home .quick-action-icon { width: 46px; height: 46px; }

    /* 手機：三欄、圖示在上、只留名稱（說明放不下） */
    #page-home .hl-concerns.hl-concerns--cards { gap: 8px; }
    #page-home .hl-concerns.hl-concerns--cards li {
        align-items: center;
        text-align: center;
        padding: 14px 6px 12px;
        border-radius: 14px;
    }
    #page-home .hl-concern-ic { width: 42px; height: 42px; margin-bottom: 8px; }
    #page-home .hl-concern-ic svg { width: 23px; height: 23px; }
    /* 名稱放不下時在斜線的地方換行，不要只掉一個字下去 */
    #page-home .hl-concerns--cards b { font-size: 12.5px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
    #page-home .hl-concerns--cards small { display: none; }
}