/* 文章縮圖：圓體主標＋小狗。部落格列表、文章封面、延伸閱讀卡片共用。
   文字大小用容器寬度（cqw）算，小卡片和大封面同一套比例。 */
.thumb{position:relative;display:block!important;container-type:inline-size;overflow:hidden;isolation:isolate}
.thumb::before{content:"";position:absolute;z-index:-1;right:-6%;bottom:-24%;width:52%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.55)}
.thumb .tt{position:absolute;left:6.5cqw;top:50%;translate:0 -50%;max-width:60%;margin:0;font-family:"Huninn","Noto Sans TC",system-ui,sans-serif;font-weight:400;font-size:clamp(15px,8.2cqw,58px);line-height:1.22;letter-spacing:.02em;color:var(--ink,#2C302C);-webkit-text-stroke:.02em currentColor;text-align:left;white-space:nowrap}
.thumb .tt em{font-style:normal;color:var(--coral,#F4493C)}
.thumb .tag{display:inline-block;margin-bottom:.55em;padding:.32em .8em .28em;border-radius:99px;background:var(--ink,#2C302C);color:#fff;font-family:"Huninn","Noto Sans TC",system-ui,sans-serif;font-size:max(10px,.42em);line-height:1;letter-spacing:.06em;-webkit-text-stroke:0;vertical-align:top}
.thumb>img{position:absolute;right:3cqw;bottom:0;max-width:38%!important;max-height:none!important;height:70%!important;width:auto!important;object-fit:contain;object-position:right bottom}
.art.thumb{aspect-ratio:4/3}
.art.thumb .tt{top:38%;font-size:clamp(16px,9.6cqw,58px);max-width:84%}
.art.thumb>img{height:54%!important;max-width:42%!important}
.art.thumb::before{width:60%;right:-10%;bottom:-18%}
/* 文章頁的寬封面：主標放大、小狗靠右 */
.cover.thumb .tt{left:8cqw;font-size:clamp(26px,5.6cqw,64px)}
.cover.thumb::before{width:34%;right:4%;bottom:-40%}
.cover.thumb>img{right:9cqw;height:78%!important;max-width:34%!important}
@media (max-width:760px){.cover.thumb .tt{font-size:clamp(20px,8.6cqw,40px);max-width:66%}.cover.thumb>img{right:3cqw;height:66%!important}.cover.thumb::before{width:56%;right:-8%;bottom:-30%}}

/* 文章內的圖片：截圖（.shot）、氛圍照（.pic）、還沒有圖時的佔位（.ph） */
article figure.shot,article figure.pic{margin:28px 0}
article figure.shot img{display:block;width:100%;height:auto;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(44,48,44,.12),0 12px 28px -18px rgba(44,48,44,.35)}
article figure.pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px}
article figure figcaption{margin-top:10px;font-size:13px;line-height:1.7;color:var(--g600,#66645F)}
article .ph{display:grid;place-items:center;min-height:220px;margin:28px 0;padding:24px;border-radius:14px;border:2px dashed rgba(44,48,44,.22);background:repeating-linear-gradient(45deg,#F7F5EF 0 12px,#F1EEE6 12px 24px);color:var(--g600,#66645F);font-size:14px;line-height:1.7;text-align:center}
article .ph.ai{aspect-ratio:3/2;min-height:0}
article .ph.ai::before{content:"AI 氛圍圖待生成";display:block;margin-bottom:6px;font-weight:700;color:var(--ink,#2C302C)}

/* 文章表格：深色表頭、第一欄當列標題、隔行底色；手機改成一列一張卡片（build 會幫每格加 data-label） */
article table.cmp2.wide{min-width:0}
article table.cmp2,article table.fees{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px;line-height:1.7;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(44,48,44,.14)}
article .cmp2 th,article .fees th{background:var(--ink,#2C302C);color:#fff;font-size:14px;font-weight:700;letter-spacing:.04em;padding:13px 16px;border:0;text-align:left;white-space:nowrap}
article .cmp2 td,article .fees td{padding:14px 16px;border-top:1px solid rgba(44,48,44,.08);vertical-align:top;color:var(--ink,#2C302C)}
article .cmp2 tbody tr:nth-child(even) td,article .fees tbody tr:nth-child(even) td{background:#FAF8F3}
article .cmp2 td:first-child,article .fees td:first-child{background:#F4F2EC!important;font-weight:700;min-width:6.5em;max-width:15em}
article .cmp2 tbody tr:hover td{background:#FFF6DA}
article .cmp2 tbody tr:hover td:first-child{background:#FCEFC5!important}
article .cmp2 td.us{background:#EEF6CF!important;font-weight:700}
article .cmp2 th.us{background:#5E7A00}
article .cmp2 td strong,article .fees td strong{color:var(--coral,#F4493C)}
@media (max-width:760px){
  article .tw{overflow:visible}
  article table.cmp2,article table.fees{min-width:0!important;background:none;box-shadow:none;border-radius:0;overflow:visible}
  article .cmp2 thead,article .fees thead{display:none}
  article .cmp2 tbody,article .cmp2 tr,article .cmp2 td,article .fees tbody,article .fees tr,article .fees td{display:block;width:auto}
  article .cmp2 tr,article .fees tr{margin:0 0 12px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(44,48,44,.14)}
  article .cmp2 tbody tr:nth-child(even) td,article .fees tbody tr:nth-child(even) td{background:#fff}
  article .cmp2 td,article .fees td{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid rgba(44,48,44,.07);font-size:15px}
  article .cmp2 td::before,article .fees td::before{content:attr(data-label);font-size:13px;font-weight:500;color:var(--g600,#66645F);line-height:1.8}
  article .cmp2 td:first-child,article .fees td:first-child{display:block;white-space:normal;max-width:none;border-top:0;padding:12px 16px;font-size:16px;background:#F4F2EC!important}
  article .cmp2 td:first-child::before,article .fees td:first-child::before{content:none}
  article .cmp2 td.us{background:#EEF6CF!important}
  article .cmp2 td[data-label=""]{grid-template-columns:minmax(0,1fr)}
}

/* 手機畫面截圖：縮窄置中；兩張並排用 .shots */
article figure.shot.phone img{max-width:320px;margin:0 auto;border-radius:22px}
article figure.shot.phone figcaption{text-align:center}
article .shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:28px 0}
article .shots figure.shot{margin:0}
article .shots figure.shot.phone img{max-width:100%}