#article{    display: block;background: #fff;}
.textArticle-article {
  /* 主色票：冷暖雙色 */
  --cool:#aa7ae1;/* 藍紫 */
  --cool-soft:#eef0ff;
  --warm:#F44336;/* 桃紅 */
  --warm-2:#ff9b4a;/* 橘黃 */
  --ink:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --card:#fff;
  --pill:#f9fafb;
  color:var(--ink);
  margin:0 auto;
  max-width:1100px;
  margin:auto;
  padding: 0px 24px 10px;
}
.textArticle-article * { box-sizing: border-box }
/* Hero */
.textArticle-article .hero { color: #fff; border-radius: 22px; padding: 45px 40px; margin: 0 0 24px 0; box-shadow: 0 10px 30px rgb(169 169 169/18%); }
.textArticle-article .hero .Imgbox { margin: 0 0 30px 0; }
.textArticle-article .hero .heroTxt { margin: 0 0 10px; font-size: 30px; letter-spacing: .4px; font-weight: 600; }
.textArticle-article .hero p { margin: 0; opacity: .95 }
.textArticle-article .hero .tags { margin-top: 14px }
.textArticle-article .tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgb(206 206 206/16%); border: 1px solid rgb(110 110 110/35%); margin-right: 6px; backdrop-filter: blur(2px); font-size: 14px; color: #555; }
/* 目錄 */
.textArticle-article .toc { margin: 14px 0 50px; background: -webkit-linear-gradient(270deg,#ffffff 0%,#f7f7f7 100%); padding: 20px 30px 40px; border-radius: 20px; border: 1px solid #e8e8e8; }
.textArticle-article .toc b { display: block; margin-bottom: 8px; width: calc(100% - 0px); padding: 10px 10px; font-size: 1.4em; line-height: 1.6em; }
.textArticle-article .toc a { display: block; color: var(--ink); text-decoration: none; border-left: 3px solid #d0d0d000; padding: 10px 10px 10px 30px; border-bottom: 1px #ccc dashed; }
.textArticle-article .toc a:hover { border-left-color: var(--cool); color: #111; background: #e1e1e140; }
#articlebeauty .infoWrap ul li a { margin-right: 10px; display: none }
/* 標題與圖片 */
.textArticle-article h2 { position: relative; font-size: 27px; font-weight: 600; margin: 60px 0 .9rem; padding-left: 1.15rem; margin-bottom: 20px; border-bottom: #aaaaaa6b 1px solid; padding-bottom: 20px; }
.textArticle-article h2:before { content: ""; position: absolute; left: 0; top: 0.25em; width: 1px; height: 1.3em; border-radius: 0; background: #111; border-left: 5px solid #111; }
.textArticle-article h3 { font-size: 18px; margin: 18px 0 8px }
.textArticle-article p { margin: .7rem 0; letter-spacing: .2px; line-height: 190%; font-size: 17px; margin-top: 20px; }
.textArticle-article p a { letter-spacing: .2px; line-height: 190%; font-size: 17px; }
.textArticle-article img { height: auto; border-radius: 12px; margin: 70px 0; display: block; width: 100%; object-fit: fill; }


/* 卡片/網格 */
.textArticle-article .cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 50px; }
.textArticle-article .cargrid2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.textArticle-article .card { background: #fff; border-radius: 20px; padding: 36px 40px; border: 1px solid #e5e7eb; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(17,24,39,.08); }
.textArticle-article .card h4 { font-size: 20px; margin-bottom: .6rem; font-weight: 700; }
.textArticle-article .card.cool { border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(17,24,39,.08); }
.textArticle-article .card.warm { border-color: rgb(181 215 255); box-shadow: 0 6px 18px rgba(255,107,107,.08) }
.textArticle-article .card ul { list-style: disc; margin: 20px 10px; }
.textArticle-article .card ul li { line-height: 210%; }


/* 表格（比較表） */
.textArticle-article .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.textArticle-article table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); margin: 40px 0 18px; font-size: 14px }
.textArticle-article th,.textArticle-article td { border: 1px solid var(--line); padding: 12px 12px; vertical-align: top; line-height: 200%; }
.textArticle-article th { background: linear-gradient(90deg,rgb(92 109 255/12%),rgb(255 255 255)); text-align: left }
.textArticle-article td b { color: #5064d2; font-size: 18px; font-weight: 500; }


/* 步驟 */
.textArticle-article .steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px }
.textArticle-article .step { background: #fff; border-radius: 20px; padding: 36px 40px; border: 1px solid #e5e7eb; }
.textArticle-article .num { display: inline-flex; width: 23px; height: 23px; border-radius: 999px; align-items: center; justify-content: center; color: #fff; font-weight: 700; margin-right: 8px; background: linear-gradient(135deg,var(--cool),var(--warm)); }
.textArticle-article .step b { font-size: 1.2rem; }


/* 錯誤/建議 對照 */
.textArticle-article .grid2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px }
.textArticle-article .panel { border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 36px 40px; }
.textArticle-article .panel.good h4,.textArticle-article .panel.good h4 a,.textArticle-article .panel.bad h4 { color: #059669; font-size: 22px; text-align: center; margin-bottom: 20px; }
.textArticle-article .panel.bad h4 { color: #b91c1c; }
.textArticle-article .panel p { text-align: center; }
.textArticle-article .panel.good ul.CaseBox {display: grid;align-items: center;grid-template-columns: repeat(2, 1fr);justify-content: space-around;gap: 16px;}
.textArticle-article .panel.good ul.CaseBox li { width: 100%; }
.textArticle-article .panel.good ul.CaseBox li a { display: block; padding: 10px 15px; border-radius: 999px; background: rgb(206 206 206/16%); border: 1px solid rgb(110 110 110/35%); font-size: 14px; color: #555; text-align: center; }


/* CTA */
.textArticle-article .cta {margin: 28px 0 60px;border-radius: 18px;padding: 18px;text-align: center;color: #fff;background: linear-gradient(135deg, var(--cool) 0%, #8b7bff 30%, #E91E63 70%, var(--warm-2) 100%);box-shadow: 0 12px 28px rgba(0,0,0,.12);border-radius: 50px;padding: 50px 80px;}
.textArticle-article .cta *{    color: #fff;}
.textArticle-article .cta h3 { margin: 0 0 10px; font-size: 22px }
.textArticle-article .actions {display: flex;gap: 12px;justify-content: center;flex-wrap: wrap;margin-top: 30px;}
.textArticle-article .btn {display: inline-block;border: 2px solid rgba(255,255,255,.9);padding: .72rem 1.2rem;border-radius: 50px;text-decoration: none;font-weight: 600;font-size: 18px;margin-right: .5rem;}
.textArticle-article .btn.primary { background: #fff; color: var(--ink) }
.textArticle-article .btn.ghost { background: transparent; color: #fff }
.textArticle-article .fine { font-size: 12px; color: #f3f4f6; margin-top: 8px }

/* RWD */
@media (max-width:980px) {
	.textArticle-article .cards { grid-template-columns: repeat(2,1fr) }
	.textArticle-article .steps { grid-template-columns: repeat(1,1fr) }
	.textArticle-article .table-responsive table { min-width: 100%; white-space: nowrap; }
	.textArticle-article img { margin: 40px 0; }
	.textArticle-article h2 { font-size: 22px; }
}
@media (max-width:720px) {
  .textArticle-article .cards,.textArticle-article .panel.good ul.CaseBox { grid-template-columns: 1fr }
  .textArticle-article .grid2 { grid-template-columns: 1fr }
  .textArticle-article .hero h1 { font-size: 28px }
}