/* ════════════════════════════════════════════════════════════
   /styles/custom/ 全客製作品頁（2026-10-04 立）
   ------------------------------------------------------------
   框架要安靜，主角是三張作品：骨白紙、深森林綠、襯線字，跟行銷站同一個世界。
   作品自己的顏色只用在兩個地方：手機背後一層 ≤14% 的暈光（--cs-tone），
   以及影片本身。沒有第二個強調色。
   零 GSAP／Lenis：動態只有 .reveal 與影片（同 DESIGN §9 三分頁）。
   ════════════════════════════════════════════════════════════ */

.pg-custom { --cs-bezel: .5rem; }

/* ---------- 手機外框（影片與截圖共用） ----------
   圓角同心：內圓角＝外圓角 − 邊框寬（DESIGN §9 螢幕框規則的同一條） */
.cs-phone {
  --r: clamp(1.5rem, 4.4vw, 2.5rem);
  display: block;
  position: relative;
  aspect-ratio: 624 / 1350;
  padding: var(--cs-bezel);
  border-radius: var(--r);
  background: #1d1b18;
  box-shadow: var(--shadow-soft), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.cs-phone > video,
.cs-phone > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--r) - var(--cs-bezel));
  background: #14130f;
}
.cs-phone-sm { --r: clamp(1.05rem, 3.2vw, 2.1rem); --cs-bezel: clamp(.3rem, .9vw, .45rem); }

/* ════════════ 首屏：白牆 ════════════ */
.cs-hero {
  position: relative;
  overflow: clip;
  padding: clamp(1.6rem, 5vw, 3.4rem) var(--gutter) clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}
.cs-hero-in { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; }
.cs-h1 {
  margin-top: .9rem;
  font-size: clamp(1.75rem, 7.2vw, 3.4rem);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.3;
  text-wrap: balance;
}
.cs-lead {
  margin: clamp(1rem, 3vw, 1.4rem) auto 0;
  max-width: 34em;
  color: var(--ink-soft);
}
/* 手機：長段落置中難讀，眉標／標題／導言一起靠左；牆照樣置中 */
@media (max-width: 699px) { .cs-hero-in { text-align: left; } }

/* 手機與桌機的第一屏都要看得到整面牆（桌機 1440×900 量過） */
.cs-wall {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: clamp(1.4rem, 4.4vw, 2.8rem) auto 0;
  padding: 0;
  max-width: 54rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
.cs-ex { display: flex; justify-content: center; min-width: 0; }
.cs-ex-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.cs-ex .cs-phone { width: clamp(6.2rem, 17vw, 12.6rem); transition: transform .6s var(--ease-out); }
.cs-ex-2 .cs-phone { width: clamp(7.6rem, 20vw, 14.6rem); }
@media (hover: hover) { .cs-ex-link:hover .cs-phone { transform: translateY(-6px); } }

/* 展品說明卡：博物館牆上的那張小卡 */
.cs-plate {
  display: grid;
  justify-items: start;
  gap: .1rem;
  margin-top: clamp(1rem, 2.4vw, 1.6rem);
  padding-top: .7rem;
  width: clamp(6.2rem, 17vw, 12.6rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  text-align: left;
}
.cs-plate i { font-family: var(--font-serif-latin); font-size: clamp(1rem, 2.4vw, 1.6rem); color: var(--accent); line-height: 1.2; }
.cs-plate b { font-size: clamp(1rem, 2.2vw, 1.2rem); letter-spacing: .12em; font-weight: 600; }
.cs-plate small { font-size: var(--text-small); color: var(--ink-soft); letter-spacing: .06em; }
.cs-disclaim { position: relative; z-index: 1; margin-top: clamp(1.2rem, 3vw, 1.8rem); font-size: var(--text-small); color: var(--ink-soft); }

/* 手機：三支疊成扇形，中間那支在前；說明卡照樣一欄一張 */
@media (max-width: 699px) {
  .cs-ex .cs-phone { width: 30vw; }
  .cs-ex-2 { position: relative; z-index: 2; }
  .cs-ex-2 .cs-phone { width: 38vw; }
  .cs-ex-1 .cs-phone { transform: translateX(14%) rotate(-5deg); transform-origin: 50% 100%; }
  .cs-ex-3 .cs-phone { transform: translateX(-14%) rotate(5deg); transform-origin: 50% 100%; }
  .cs-plate { width: auto; justify-items: center; text-align: center; border-top: 0; padding-top: 0; }
  .cs-plate small { display: none; }
  .cs-ex-link { min-height: 44px; }
}

/* ════════════ 三個 case ════════════ */
.cs-case {
  position: relative;
  overflow: clip;
  padding-block: clamp(3.6rem, 8vw, 6.5rem);
  border-bottom: 1px solid var(--hairline);
}
.cs-case-alt { background: var(--paper-raise); }
/* 作品色的暈光：只在手機背後，≤14%，不算第二強調色 */
.cs-case::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(38% 34% at 50% 40%, color-mix(in srgb, var(--cs-tone) 14%, transparent), transparent 72%);
}
.cs-case-in {
  position: relative;
  z-index: 1;
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "stage" "notes" "spec" "act";
  row-gap: clamp(1.8rem, 5vw, 2.4rem);
}
.cs-head { grid-area: head; }
.cs-stage { grid-area: stage; }
.cs-notes { grid-area: notes; }
.cs-spec { grid-area: spec; }
.cs-act { grid-area: act; }

.cs-no { font-family: var(--font-serif-latin); font-style: italic; font-size: 1.05rem; letter-spacing: .14em; color: var(--accent); }
.cs-no span { color: var(--ink-soft); }
.cs-name { margin-top: .35rem; font-size: clamp(2.5rem, 9vw, 3.8rem); font-weight: 700; letter-spacing: .12em; line-height: 1.15; }
.cs-latin { margin-top: .4rem; font-family: var(--font-serif-latin); font-style: italic; font-size: clamp(1.1rem, 2.6vw, 1.4rem); color: var(--ink-soft); }
.cs-concept { margin-top: clamp(1rem, 3vw, 1.4rem); max-width: 30em; }

.cs-stage { margin: 0; display: grid; justify-items: center; gap: .9rem; }
.cs-stage .cs-phone { width: min(70vw, 19.5rem); }
.cs-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .9rem; font-size: var(--text-small); color: var(--ink-soft); }
.cs-toggle {
  min-height: 44px;
  min-width: 5.2rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--ink);
  font: inherit;
  letter-spacing: .1em;
  cursor: pointer;
}
.cs-toggle:hover { box-shadow: inset 0 0 0 1px var(--ink); }

.cs-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.cs-note {
  display: grid;
  grid-template-columns: clamp(5.4rem, 24vw, 6.6rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: .8rem;
  background: var(--paper-raise);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) * .7);
}
.cs-case-alt .cs-note { background: var(--paper); }
.cs-note img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--radius) * .4); background: #e9e5dc; }
.cs-note i { font-family: var(--font-serif-latin); font-size: 1.15rem; color: var(--accent); margin-right: .35rem; }
.cs-note b { font-weight: 600; letter-spacing: .04em; }
.cs-note p { margin-top: .3rem; color: var(--ink-soft); line-height: 1.75; }

.cs-spec { margin: 0; border-top: 1px solid var(--hairline); padding-top: 1rem; display: grid; gap: .6rem; }
.cs-spec div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: .8rem; }
.cs-spec dt { color: var(--ink-soft); letter-spacing: .12em; }
.cs-spec dd { margin: 0; }

.cs-act { display: flex; flex-wrap: wrap; gap: .75rem; }
.cs-act .btn { min-height: 48px; }

@media (min-width: 1000px) {
  .cs-case-in {
    grid-template-columns: minmax(0, 1fr) clamp(15.5rem, 20vw, 18rem) minmax(0, 1.1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "head stage notes"
      "spec stage notes"
      "act  stage notes";
    column-gap: clamp(2.2rem, 4.4vw, 4.4rem);
    row-gap: 1.6rem;
    align-items: start;
  }
  .cs-stage, .cs-notes { align-self: center; }
  /* 第二款左右鏡像，三屏不再同一個節奏（評審第 1 輪 P1-6） */
  .cs-case-alt .cs-case-in {
    grid-template-columns: minmax(0, 1.1fr) clamp(15.5rem, 20vw, 18rem) minmax(0, 1fr);
    grid-template-areas:
      "notes stage head"
      "notes stage spec"
      "notes stage act";
  }
  .cs-note { grid-template-columns: 8.4rem minmax(0, 1fr); }
  .cs-stage .cs-phone { width: 100%; }
    .cs-case::before { background: radial-gradient(22% 40% at 50% 46%, color-mix(in srgb, var(--cs-tone) 14%, transparent), transparent 72%); }
}

/* ════════════ 流程 ════════════ */
.cs-how-in { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-areas: "copy" "fig"; }
.cs-how-copy { grid-area: copy; }
.cs-how-fig { grid-area: fig; margin: 0; display: grid; justify-items: center; gap: .9rem; }
.cs-how-fig .cs-phone { width: min(60vw, 16rem); }
.cs-how-fig figcaption { font-size: var(--text-small); color: var(--ink-soft); letter-spacing: .06em; }
.cs-steps { list-style: none; margin: clamp(1.6rem, 4vw, 2.2rem) 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.cs-steps li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .6rem; padding: 1.1rem 0; border-bottom: 1px solid var(--hairline); }
.cs-steps i { font-family: var(--font-serif-latin); font-style: italic; font-size: 1.7rem; line-height: 1.1; color: var(--accent); }
.cs-steps b { font-weight: 600; letter-spacing: .08em; }
.cs-steps p { margin-top: .25rem; color: var(--ink-soft); line-height: 1.75; }
@media (min-width: 900px) {
  .cs-how-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "fig copy"; align-items: center; }
}

/* ════════════ 價格 ════════════ */
.cs-price { border-top: 1px solid var(--hairline); }
.cs-cards { display: grid; gap: 1.1rem; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
@media (min-width: 760px) { .cs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper-raise);
}
.cs-card.is-main { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.cs-card h3 { font-size: var(--text-h3); letter-spacing: .14em; font-weight: 600; }
.cs-card-num { margin-top: .6rem; font-family: var(--font-serif-latin); font-size: clamp(2.4rem, 7vw, 3rem); line-height: 1.15; letter-spacing: .02em; }
.cs-card-num small { font-family: var(--font-serif-tc); font-size: .42em; margin-left: .3em; letter-spacing: .1em; }
.cs-card-num-sm { font-family: var(--font-serif-tc); font-size: clamp(1.6rem, 5vw, 2rem); letter-spacing: .1em; padding-block: .25em; }
.cs-card-lead { margin-top: .9rem; color: var(--ink-soft); }
.cs-card.is-main .cs-card-lead { color: color-mix(in srgb, var(--accent-ink) 86%, var(--accent)); }
.cs-card ul { list-style: none; margin: 1.2rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--hairline); display: grid; gap: .45rem; font-size: var(--text-small); }
.cs-card.is-main ul { border-top-color: rgba(242, 241, 236, .24); }
.cs-card li::before { content: "—"; margin-right: .6em; opacity: .6; }

.cs-same { list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0; display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .cs-same { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.cs-same li { border-top: 1px solid var(--hairline); padding-top: 1rem; }
.cs-same b { display: block; font-weight: 600; letter-spacing: .1em; }
.cs-same span { display: block; margin-top: .35rem; color: var(--ink-soft); line-height: 1.75; }

/* ════════════ FAQ（同 /pricing 的手風琴語彙） ════════════ */
.cs-faq { position: relative; overflow: clip; border-top: 1px solid var(--hairline); }
.cs-faq .container { position: relative; z-index: 1; }
.cs-faq-bot { right: 4%; top: 10%; width: clamp(5rem, 8vw, 8.5rem); --bot-o: .55; }
.pg-custom .faq-list { margin-top: clamp(1.8rem, 4vw, 2.6rem); border-top: 1px solid var(--hairline); }
.pg-custom .faq-list details { border-bottom: 1px solid var(--hairline); }
.pg-custom .faq-list summary {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: 1.1rem 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  letter-spacing: .06em;
}
.pg-custom .faq-list summary::-webkit-details-marker { display: none; }
.pg-custom .faq-list summary::after { content: "＋"; margin-left: auto; color: var(--accent); font-weight: 400; }
.pg-custom .faq-list details[open] summary::after { content: "－"; }
.pg-custom .faq-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pg-custom .faq-body { padding: 0 0 1.3rem; }
.pg-custom .faq-body p { color: var(--ink); line-height: 1.8; }
.cs-card > .btn { margin-top: auto; align-self: flex-start; }
.cs-card ul { margin-bottom: 1.6rem; }

/* 桌機：左文右牆，一屏看完整面牆（2026-10-04 自檢：置中直排時 1440×900 會切掉手機下半） */
@media (min-width: 1100px) {
  .cs-hero {
    display: grid;
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
    align-content: center;
    min-height: calc(100svh - var(--sn-h));
    /* 本體維持滿版（氛圍層才鋪得滿），內容推到 84rem 欄內：DESIGN §9 雷 6 的同一招 */
    padding-inline: max(var(--gutter), calc((100% - 84rem) / 2 + var(--gutter)));
    text-align: left;
    border-bottom: 0;
  }
  .cs-hero-in { margin: 0; }
  .cs-h1 { font-size: clamp(2.2rem, 2.9vw, 2.75rem); }
  .cs-lead { margin-inline: 0; }
  .cs-wall { margin: 0; max-width: none; }
  .cs-ex .cs-phone, .cs-plate { width: clamp(10rem, 14vw, 13rem); }
  .cs-ex-2 .cs-phone { width: clamp(11.6rem, 16vw, 15rem); }
  main > .cs-hero + .cs-case { border-top: 1px solid var(--hairline); }
}
.cs-disclaim { text-align: inherit; }

/* 眉標裡的中文不吃 .pg-kicker 的斜體（Noto Serif TC 沒有斜體，硬斜是破綻） */
.cs-zh { font-family: var(--font-serif-tc); font-style: normal; letter-spacing: .2em; }
/* 規格欄的詞組不准從中間斷；說明文字讓瀏覽器避開孤字 */
.nw { white-space: nowrap; }
.cs-concept, .cs-lead, .cs-note p, .cs-steps p, .cs-same span, .cs-card-lead, .pg-custom .faq-body p, .cs-spec dd { text-wrap: pretty; }
.cs-note b { text-wrap: balance; }
/* 首屏 CTA：手機在牆下面，桌機在左欄文字下面 */
.cs-hero-act { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.1rem; margin-top: clamp(1.4rem, 4vw, 2rem); }
.cs-hero-act span { font-size: var(--text-small); color: var(--ink-soft); letter-spacing: .06em; }
@media (min-width: 1100px) {
  .cs-hero { grid-template-areas: "text wall" "act wall"; }
  .cs-hero-in { grid-area: text; align-self: end; }
  .cs-wall { grid-area: wall; }
  .cs-hero-act { grid-area: act; align-self: start; justify-content: flex-start; margin-top: 1.6rem; }
}
/* LINE 按鈕前的小對話框圖示：一眼看出按了會開 LINE */
.cs-line::before {
  content: "";
  flex: none;
  width: 1.05em; height: 1.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 3.9 3.5 7.2 8.3 7.9.3.1.8.2.9.5.1.3.1.7 0 1l-.1.9c0 .3-.2 1 .9.5s5.9-3.5 8-6C21.4 14.2 22 12.7 22 11c0-4.4-4.5-8-10-8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 3.9 3.5 7.2 8.3 7.9.3.1.8.2.9.5.1.3.1.7 0 1l-.1.9c0 .3-.2 1 .9.5s5.9-3.5 8-6C21.4 14.2 22 12.7 22 11c0-4.4-4.5-8-10-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cs-stage .cs-phone { cursor: pointer; }
@media (min-width: 1100px) {
  .cs-disclaim { grid-area: note; margin-top: 1rem; }
  .cs-hero { grid-template-areas: "text wall" "act wall" "note wall"; }
}
/* 桌機左欄三段（文字／CTA／免責）緊貼成一組，上下各留一格彈性空白置中；右邊整面牆跨全部列 */
@media (min-width: 1100px) {
  .cs-hero {
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: ". wall" "text wall" "act wall" "note wall" ". wall";
  }
  .cs-hero-in { align-self: auto; }
  .cs-hero-act { margin-top: 1.6rem; }
}

/* ── 評審第 2 輪 ── */
/* 手機首屏：iPhone 實際可視高度約 664px，整面牆要在第一屏 */
@media (max-width: 699px) {
  .cs-h1 { font-size: clamp(1.6rem, 6.6vw, 2rem); }
  .cs-wall { margin-top: 1rem; }
  /* 招牌互動卡改上下排，截圖撐滿卡寬（原本 94px 寬看不清點唱機上的字） */
  .cs-note { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .cs-note img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
}
/* 第二款的互動卡改髮絲線條列：三款連著看不再是同一個模子 */
.cs-case-alt .cs-note { background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; padding: 1rem 0 0; }
/* 卡片小標：序號併進 b，b 是區塊才吃得到 balance */
.cs-note b { display: block; text-wrap: balance; }
.pg-custom .faq-list summary .q { text-wrap: balance; }
/* 價格卡條列：懸掛縮排、內文字級 */
.cs-card ul { font-size: var(--text-body); }
.cs-card li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); text-wrap: pretty; }
.cs-card li::before { margin: 0; }
/* 長輩會看的小字放大 */
.cs-toggle { font-size: var(--text-body); }
.cs-hero-act span { font-size: var(--text-body); }

/* ── 評審第 3 輪 ── */
.cs-hint { grid-area: hint; font-size: var(--text-small); color: var(--ink-soft); margin-top: -1rem; }
.cs-case-in { grid-template-areas: "head" "stage" "notes" "spec" "act" "hint"; }
.cs-cap, .cs-disclaim { font-size: .9375rem; }
.cs-lead { position: relative; z-index: 1; }
/* 手機：導言排在牆與 CTA 下面，首屏先給標題＋整面牆＋名牌 */
@media (max-width: 899px) {
  .cs-hero { display: flex; flex-direction: column; }
  .cs-hero-in { order: 1; }
  .cs-wall { order: 2; }
  .cs-hero-act { order: 3; }
  .cs-lead { order: 4; margin-top: 1.4rem; }
  .cs-disclaim { order: 5; }
}
@media (max-width: 699px) {
  .cs-hero { padding-top: 1rem; }
  .cs-h1 { margin-top: .5rem; }
  .cs-ex .cs-phone { width: 28vw; }
  .cs-ex-2 .cs-phone { width: 35vw; }
  .cs-hero-act { margin-top: .75rem; }
  .cs-lead { text-align: left; }
  /* 暈光掛在手機本身背後（區塊在手機版有兩千多 px 高，掛在區塊 40% 會落到互動卡上） */
  .cs-stage { position: relative; isolation: isolate; }
  .cs-stage::before { content: ""; position: absolute; inset: -12% -40%; z-index: -1; pointer-events: none;
    background: radial-gradient(50% 45% at 50% 45%, color-mix(in srgb, var(--cs-tone) 14%, transparent), transparent 72%); }
}
@media (max-width: 999px) { .cs-case::before { display: none; } }
/* 平板也走左文右牆（1024×768 原本會斷成上下兩截） */
@media (min-width: 900px) {
  .cs-hero {
    display: grid;
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 5rem);
    min-height: calc(100svh - var(--sn-h));
    padding-inline: max(var(--gutter), calc((100% - 84rem) / 2 + var(--gutter)));
    text-align: left;
    border-bottom: 0;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: ". wall" "text wall" "lead wall" "act wall" "note wall" ". wall";
  }
  .cs-hero-in { grid-area: text; margin: 0; }
  .cs-lead { grid-area: lead; margin-inline: 0; }
  .cs-wall { grid-area: wall; margin: 0; max-width: none; align-self: center; }
  .cs-hero-act { grid-area: act; justify-content: flex-start; margin-top: 1.6rem; }
  .cs-disclaim { grid-area: note; margin-top: 1rem; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .cs-hero { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .cs-h1 { font-size: 2.2rem; }
  .cs-ex .cs-phone, .cs-plate { width: clamp(7.5rem, 15vw, 10rem); }
  .cs-ex-2 .cs-phone { width: clamp(8.5rem, 17vw, 11.5rem); }
}
/* 桌機互動卡縮圖放大到讀得到圖上的字 */
@media (min-width: 1000px) {
  .cs-note { grid-template-columns: 11rem minmax(0, 1fr); }
  .cs-case-in { grid-template-areas: "head stage notes" "spec stage notes" "act stage notes" "hint stage notes"; grid-template-rows: auto auto auto 1fr; }
  .cs-case-alt .cs-case-in { grid-template-areas: "notes stage head" "notes stage spec" "notes stage act" "notes stage hint"; }
  .cs-hint { margin-top: -.6rem; }
}
/* 手機 flex 直排時標題區要撐滿寬，否則 margin:auto 會把它縮成置中的一小塊 */
@media (max-width: 899px) { .cs-hero-in { width: 100%; } }
/* 平板寬度名牌太窄，物件小字收起來（不然會剩一個字掉行） */
@media (min-width: 900px) and (max-width: 1099px) { .cs-plate small { display: none; } }