/* language 產業版型：首頁、關於頁、服務頁的專屬設計。只用 shared/tokens.css 的變數。
   主張：粗體字排版、高對比、帶一點玩心。超大多語單字、程度訊號格、硬邊方塊與對話框。
   推薦風格：主色 graphite、字型 sans。所有顏色都走 --p1…--p9／--line，換主色與字型時一起變。 */

/* ===== 共用小元件 ===== */
.ind-code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2em; padding: 1px 7px;
  border: 1.5px solid currentColor; border-radius: 4px;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; line-height: 1.5;
  letter-spacing: 0.08em; white-space: nowrap;
}
.ind-tri { display: flex; flex-wrap: wrap; gap: 0 0.55em; margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; color: var(--p5); }
.ind-tri span:first-child { color: var(--p1); text-transform: uppercase; }
.ind-tri span + span::before { content: "/"; margin-right: 0.55em; color: var(--line-strong); }
.ind-bubble { overflow: hidden; border-radius: 32px 32px 32px 4px; background: var(--p7); }
.ind-bubble img { width: 100%; height: 100%; object-fit: cover; }

/* 程度訊號格：A1 一格、B2 四格 */
.ind-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.ind-bars i { width: 4px; border-radius: 1px; background: var(--line-strong); }
.ind-bars i:nth-child(1) { height: 25%; } .ind-bars i:nth-child(2) { height: 50%; }
.ind-bars i:nth-child(3) { height: 75%; } .ind-bars i:nth-child(4) { height: 100%; }
.ind-bars[data-n="1"] i:nth-child(-n+1), .ind-bars[data-n="2"] i:nth-child(-n+2),
.ind-bars[data-n="3"] i:nth-child(-n+3), .ind-bars[data-n="4"] i:nth-child(-n+4) { background: currentColor; }

.ind-section { padding-block: var(--section-y); }
.ind-section--soft { background: var(--p8); }
.ind-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s4) var(--s6);
  margin-bottom: var(--s7); padding-top: var(--s5); border-top: 3px solid var(--p3);
}
.ind-head > div:not(.ind-score) { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.ind-head h2 { font-size: var(--fs-2xl); line-height: 1.25; }
.ind-head > .btn, .ind-head > .ind-score { justify-self: start; }
@media (max-width: 720px) { .ind-head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s6); } }

/* ===== 首頁 Z01 Hero：承諾大標領頭；三語問候縮成一行字卡；右邊大張對話框照片 ===== */
.ind-hero { padding-top: clamp(28px, 4vw, 56px); }
.ind-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: var(--s6) clamp(32px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 64px);
}
.ind-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5); min-width: 0; }
.ind-hero h1 { font-size: var(--fs-hero); line-height: 1.2; }
.ind-hero .lead { max-width: 30em; }
/* 問候語：一行三個字，こんにちは 留黑底反白塊，下面一條粗線是整個 Hero 唯一的重線 */
.ind-greet {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); align-self: stretch;
  margin: 0; padding-bottom: var(--s4); border-bottom: 3px solid var(--p3);
  font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-2xl); line-height: 1.25; color: var(--p3);
  font-feature-settings: "palt";
}
.ind-greet__w { display: inline-flex; align-items: flex-start; gap: 6px; white-space: nowrap; }
.ind-greet .ind-code { padding: 0 6px; font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--p5); }
.ind-greet__w--2 > span { padding: 0.02em 0.2em 0.06em; border-radius: 6px; background: var(--p3); color: var(--p9); }
.ind-greet__w--3 > span { display: inline-flex; align-items: center; color: var(--p1); }
.ind-greet__w--3 > span::after { content: ""; width: 0.08em; height: 0.82em; margin-left: 0.1em; background: var(--p1); }
.ind-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); font-size: var(--fs-sm); font-weight: 700; color: var(--p5); }
.ind-hero__levels { display: inline-flex; gap: 6px; color: var(--p3); }
.ind-hero__photo { position: relative; margin: 0; }
.ind-hero__photo .ind-bubble { aspect-ratio: 5 / 4; border-radius: 40px 40px 40px 6px; }
.ind-hero__photo figcaption {
  position: absolute; left: var(--s5); bottom: var(--s5); max-width: 80%;
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border: 2px solid var(--p3); border-radius: 18px 18px 18px 4px; background: var(--p9);
  font-size: var(--fs-sm); font-weight: 700; color: var(--p3);
}
.ind-hero__photo figcaption::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--p1); }
@media (prefers-reduced-motion: no-preference) {
  .ind-greet__w { animation: indRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .ind-greet__w--2 { animation-delay: 0.1s; }
  .ind-greet__w--3 { animation-delay: 0.2s; }
  .ind-greet__w--3 > span::after { animation: indBlink 1.1s steps(1) infinite; }
  .ind-hero__photo { animation: indRise 0.8s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes indRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes indBlink { 50% { opacity: 0; } }
}
@media (max-width: 860px) {
  .ind-hero__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ind-hero__photo figcaption { left: var(--s3); bottom: var(--s3); }
}

/* 跑馬燈：常用句三種語言 */
.ind-ticker { overflow: hidden; padding-block: 14px; background: var(--p3); color: var(--p9); }
.ind-ticker__track { display: flex; width: max-content; }
.ind-ticker ul { display: flex; list-style: none; }
.ind-ticker li { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.ind-ticker li::after { content: ""; width: 7px; height: 7px; background: color-mix(in srgb, var(--p9) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .ind-ticker__track { animation: indTicker 60s linear infinite; }
  .ind-ticker:hover .ind-ticker__track { animation-play-state: paused; }
  @keyframes indTicker { to { transform: translateX(-50%); } }
}

/* ===== 首頁 Z02 課程（程度分頁＋單字卡式課程卡） ===== */
.ind-levelbar {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 2px solid var(--p3); border-radius: 8px; overflow: hidden; background: var(--p9);
}
.ind-levelbar button {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 8px;
  padding: 14px 18px; border: 0; border-left: 2px solid var(--p3); background: none; color: var(--p3);
  text-align: left; cursor: pointer;
}
.ind-levelbar button:first-child { border-left: 0; }
.ind-levelbar b { grid-column: 1; font-family: var(--font-heading); font-size: var(--fs-xl); line-height: 1; letter-spacing: 0.02em; }
.ind-levelbar span { grid-column: 1; font-size: var(--fs-xs); color: var(--p5); white-space: nowrap; }
.ind-levelbar .ind-bars { grid-column: 2; grid-row: 1 / 3; align-self: center; height: 18px; }
.ind-levelbar .ind-bars i { width: 5px; }
.ind-levelbar button:hover { background: var(--p8); }
.ind-levelbar button[aria-pressed="true"] { background: var(--p3); color: var(--p9); }
.ind-levelbar button[aria-pressed="true"] span { color: color-mix(in srgb, var(--p9) 72%, transparent); }
.ind-levelbar button[aria-pressed="true"] .ind-bars i { background: color-mix(in srgb, var(--p9) 30%, transparent); }
.ind-levelbar button[aria-pressed="true"] .ind-bars[data-n] i:nth-child(-n+1) { background: var(--p9); }
.ind-levelbar button[aria-pressed="true"] .ind-bars[data-n="2"] i:nth-child(-n+2),
.ind-levelbar button[aria-pressed="true"] .ind-bars[data-n="3"] i:nth-child(-n+3),
.ind-levelbar button[aria-pressed="true"] .ind-bars[data-n="4"] i:nth-child(-n+4) { background: var(--p9); }
.ind-levelnote { margin: var(--s4) 0 var(--s5); font-size: var(--fs-sm); font-weight: 700; color: var(--p5); }
@media (max-width: 720px) {
  .ind-levelbar button { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 12px 4px; text-align: center; }
  .ind-levelbar span, .ind-levelbar .ind-bars { display: none; }
}

.ind-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.ind-card {
  display: flex; flex-direction: column; background: var(--p9); color: inherit; text-decoration: none;
  border: 2px solid var(--p3); border-radius: 8px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ind-card:hover { color: inherit; transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--p3); }
.ind-card__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 12px 16px; border-bottom: 2px solid var(--p3);
}
.ind-card__lv { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-2xl); line-height: 1; letter-spacing: 0.01em; color: var(--p3); white-space: nowrap; }
.ind-card__lv small { font-size: 0.55em; letter-spacing: 0.04em; color: var(--p5); }
.ind-card__tags { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--p5); text-align: right; }
.ind-card__tags .ind-code { color: var(--p3); }
.ind-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--p7); }
.ind-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.ind-card:hover .ind-card__media img { transform: scale(1.04); }
.ind-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--s2); padding: var(--s4) 16px 16px; }
.ind-card h3, .ind-card h2 { font-size: var(--fs-lg); line-height: 1.4; }
.ind-card__meta { font-size: var(--fs-sm); color: var(--p5); }
.ind-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin-top: auto; padding-top: var(--s3); border-top: 1px dashed var(--line-strong);
}
.ind-card__go { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--p3); color: var(--p9); font-weight: 700; transition: transform 0.18s ease; }
.ind-card:hover .ind-card__go { transform: translateX(3px); }
@media (max-width: 1000px) { .ind-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ind-cards { grid-template-columns: minmax(0, 1fr); } }

.ind-also {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line);
}
.ind-also p { margin-right: auto; font-weight: 700; color: var(--p3); }
.ind-also a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px 0 7px;
  border: 2px solid var(--p3); border-radius: 999px; color: var(--p3); font-weight: 700; text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.ind-also a b {
  display: inline-grid; place-items: center; min-width: 46px; height: 36px; padding: 0 10px; border-radius: 999px;
  background: var(--p3); color: var(--p9); font-size: var(--fs-xs); letter-spacing: 0.06em;
}
.ind-also a:hover { background: var(--p3); color: var(--p9); }
.ind-also a:hover b { background: var(--p9); color: var(--p3); }
@media (max-width: 600px) { .ind-also a { width: 100%; } .ind-also a .arrow { margin-left: auto; } }

/* ===== 首頁 Z03 評價（課程評價＋程度變化） ===== */
.ind-score { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm); color: var(--p5); line-height: 1.5; }
.ind-score > b { font-family: var(--font-heading); font-size: var(--fs-2xl); line-height: 1; color: var(--p3); font-variant-numeric: tabular-nums; }
.ind-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.ind-review {
  display: flex; flex-direction: column; gap: var(--s4); margin: 0; padding: var(--s6) var(--s5) var(--s5);
  background: var(--p9); border: 1px solid var(--line); border-top: 6px solid var(--p3); border-radius: 4px 4px 8px 8px;
}
.ind-review__jump {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-2xl);
  line-height: 1.1; letter-spacing: 0; color: var(--p6);
}
.ind-review__jump span:last-child { padding: 0.06em 0.24em 0.1em; border-radius: 6px; background: var(--p3); color: var(--p9); }
.ind-review__jump i { font-style: normal; font-size: 0.6em; color: var(--p1); }
.ind-scale { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.ind-scale li { padding-top: 6px; border-top: 6px solid var(--p7); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--p6); }
.ind-scale .is-had { border-top-color: var(--line-strong); }
.ind-scale .is-gain { border-top-color: var(--p1); color: var(--p3); }
.ind-review blockquote { margin: 0; font-size: var(--fs-lg); line-height: 1.7; color: var(--p3); }
.ind-review figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: auto; padding-top: var(--s4);
  border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--p5);
}
.ind-review figcaption b { color: var(--p3); }
.ind-review figcaption a { color: var(--p1); font-weight: 700; text-decoration: none; }
.ind-footnote { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5); margin-top: var(--s5); font-size: var(--fs-xs); color: var(--p6); }
.ind-footnote a { font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.ind-review__course { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; color: var(--p3); text-decoration: none; }
.ind-review__course .ind-code { color: var(--p1); }
.ind-review__course:hover { color: var(--p1); }
@media (max-width: 960px) { .ind-reviews { grid-template-columns: minmax(0, 1fr); } }

/* 審閱切換・手動輸入：一個大對話框＋兩張單字卡 */
.ind-voice { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s6) var(--s5); }
.ind-voice blockquote { margin: 0; }
.ind-voice figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-sm); color: var(--p5); }
.ind-voice figcaption b { color: var(--p3); }
.ind-voice__main {
  position: relative; display: flex; flex-direction: column; gap: var(--s5); margin: 0 0 26px;
  padding: clamp(28px, 4.5vw, 56px); border: 3px solid var(--p3); border-radius: 40px 40px 40px 6px; background: var(--p9);
}
.ind-voice__main::after { content: ""; position: absolute; left: -3px; bottom: -26px; width: 44px; height: 26px; background: var(--p3); clip-path: polygon(0 0, 100% 0, 0 100%); }
.ind-voice__big {
  align-self: flex-start; padding: 0 0.14em 0.04em; border-radius: 0.06em; background: var(--p3); color: var(--p9);
  font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-2xl); line-height: 1.15; letter-spacing: -0.01em;
}
.ind-voice__main blockquote { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-xl); line-height: 1.55; color: var(--p3); }
.ind-voice__main figcaption { margin-top: auto; padding-top: var(--s4); border-top: 2px solid var(--p3); }
.ind-voice__main figcaption .ind-code { margin-left: auto; color: var(--p3); }
.ind-voice__side { display: grid; grid-auto-rows: 1fr; gap: var(--s5); margin-bottom: 26px; }
.ind-voice__card { display: flex; flex-direction: column; margin: 0; background: var(--p9); border: 2px solid var(--p3); border-radius: 8px; }
.ind-voice__tag { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 2px solid var(--p3); font-size: var(--fs-sm); font-weight: 700; color: var(--p3); }
.ind-voice__tag .ind-code { color: var(--p1); }
.ind-voice__card blockquote { padding: var(--s4) 16px 0; font-size: var(--fs-lg); line-height: 1.65; color: var(--p3); }
.ind-voice__card figcaption { margin-top: auto; padding: var(--s4) 16px 14px; }
@media (max-width: 860px) {
  .ind-voice { grid-template-columns: minmax(0, 1fr); }
  .ind-voice__side { grid-auto-rows: auto; margin-bottom: 0; }
}

/* 審閱切換・Google 評論：硬邊評分橫條＋評論卡 */
.ind-gbar {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "src score meta link";
  margin-bottom: var(--s5); overflow: hidden; border: 2px solid var(--p3); border-radius: 8px; background: var(--p9);
}
.ind-gbar > * { display: flex; align-items: center; padding: 14px clamp(16px, 2vw, 24px); }
.ind-gbar__src { grid-area: src; gap: 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--p3); }
.ind-gbar__src .source-mark { width: 40px; height: 40px; border: 2px solid var(--p3); font-size: var(--fs-base); }
.ind-gbar__score { grid-area: score; border-left: 2px solid var(--p3); font-family: var(--font-heading); font-size: var(--fs-2xl); line-height: 1; color: var(--p3); font-variant-numeric: tabular-nums; }
.ind-gbar__meta { grid-area: meta; flex-direction: column; align-items: flex-start; gap: 2px; padding-left: 0; font-size: var(--fs-sm); color: var(--p5); }
.ind-gbar__link { grid-area: link; gap: 10px; background: var(--p3); color: var(--p9); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background 0.18s ease; }
.ind-gbar__link:hover { background: var(--p1); color: var(--p9); }
.ind-gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.ind-gcard { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: var(--s5); background: var(--p9); border: 2px solid var(--p3); border-radius: 8px; }
.ind-gcard__who { display: flex; align-items: center; gap: 10px; padding-bottom: var(--s3); border-bottom: 1px dashed var(--line-strong); font-size: var(--fs-xs); color: var(--p5); }
.ind-gcard__who b { display: block; font-size: var(--fs-sm); line-height: 1.3; color: var(--p3); }
.ind-gcard__who .source-mark { margin-left: auto; }
.ind-gcard blockquote { margin: 0; font-size: var(--fs-base); line-height: 1.75; color: var(--p4); }
@media (max-width: 960px) { .ind-gcards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .ind-gbar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "src src" "score meta" "link link"; }
  .ind-gbar__src { border-bottom: 2px solid var(--p3); }
  .ind-gbar__score { border-left: 0; }
  .ind-gbar__link { justify-content: center; }
}

/* ===== 首頁 Z04 團隊（語言代碼疊在照片上） ===== */
.ind-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.ind-teacher { position: relative; display: flex; flex-direction: column; gap: var(--s4); color: inherit; text-decoration: none; }
.ind-teacher:hover { color: inherit; }
.ind-teacher__code {
  position: absolute; top: 0; left: 0; z-index: 1; padding: 10px 16px 12px; border-radius: 8px 0 8px 0;
  background: var(--p3); color: var(--p9);
  font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-2xl);
  line-height: 1; letter-spacing: 0.02em;
}
.ind-teacher__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: var(--p7); }
.ind-teacher__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.ind-teacher:hover .ind-teacher__photo img { transform: scale(1.03); }
.ind-teacher__body { display: flex; flex-direction: column; gap: 6px; }
.ind-teacher__role { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--p1); }
.ind-teacher h3 { font-size: var(--fs-lg); }
.ind-teacher p { font-size: var(--fs-sm); color: var(--p5); }
.ind-speaks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ind-speaks span { padding: 2px 10px; border-radius: 999px; background: var(--p7); font-size: var(--fs-xs); font-weight: 700; color: var(--p4); }
@media (max-width: 860px) {
  .ind-team { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s3); scrollbar-width: thin; }
  .ind-teacher { scroll-snap-align: start; }
}

/* 審閱切換・關於我：王思妤一個人，對話框肖像＋自我介紹＋數字 */
.ind-solo { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: var(--s6) clamp(32px, 6vw, 96px); }
.ind-solo__photo { position: relative; margin: 0; }
.ind-solo__photo .ind-bubble { aspect-ratio: 4 / 5; border-radius: 8px 40px 40px 6px; }
.ind-solo__body { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.ind-solo__hi { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -0.01em; color: var(--p3); }
.ind-solo__hi span { padding: 0 0.14em 0.04em; border-radius: 0.06em; background: var(--p3); color: var(--p9); }
.ind-solo__quote { margin: 0; padding-left: var(--s4); border-left: 6px solid var(--p1); font-size: var(--fs-xl); font-weight: 700; line-height: 1.5; color: var(--p3); }
.ind-solo__body .btn { align-self: flex-start; }
@media (max-width: 760px) {
  .ind-solo { grid-template-columns: minmax(0, 1fr); }
  .ind-solo__photo { max-width: 420px; }
  .ind-solo__photo .ind-bubble { aspect-ratio: 1 / 1; }
}

/* ===== 首頁 Z05 信念（深色整版） ===== */
.ind-belief { padding-block: var(--section-y); background: var(--p3); color: var(--p9); }
.ind-belief .ind-tri { color: color-mix(in srgb, var(--p9) 55%, transparent); }
.ind-belief .ind-tri span:first-child { color: var(--p9); }
.ind-belief .ind-tri span + span::before { color: color-mix(in srgb, var(--p9) 35%, transparent); }
.ind-belief__lead { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: var(--s6) var(--s7); }
.ind-belief h2 { color: var(--p9); font-size: var(--fs-2xl); line-height: 1.3; }
.ind-belief__lead p { color: color-mix(in srgb, var(--p9) 76%, transparent); }
.ind-belief .btn--text { align-self: flex-start; color: var(--p9); }
.ind-belief .btn--text:hover { color: color-mix(in srgb, var(--p9) 80%, transparent); }
.ind-belief__cols { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s8); border-top: 1px solid color-mix(in srgb, var(--p9) 28%, transparent); }
.ind-belief__cols li { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s6) var(--s5) 0; border-left: 1px solid color-mix(in srgb, var(--p9) 28%, transparent); }
.ind-belief__cols li:first-child { padding-left: 0; border-left: 0; }
.ind-belief__word { align-self: flex-start; padding: 0.08em 0.3em 0.12em; border-radius: 6px; background: var(--p9); color: var(--p3); font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-xl); line-height: 1.15; }
.ind-belief__cols h3 { margin-top: var(--s3); color: var(--p9); }
.ind-belief__cols p { font-size: var(--fs-sm); color: color-mix(in srgb, var(--p9) 70%, transparent); }
@media (max-width: 860px) {
  .ind-belief__lead { grid-template-columns: minmax(0, 1fr); }
  .ind-belief__cols { grid-template-columns: minmax(0, 1fr); margin-top: var(--s7); }
  .ind-belief__cols li { padding: var(--s5) 0; border-left: 0; border-bottom: 1px solid color-mix(in srgb, var(--p9) 28%, transparent); }
}

/* ===== 首頁 Z06 文章（字典條目） ===== */
.ind-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.ind-entry { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line-strong); color: inherit; text-decoration: none; }
.ind-entry:hover { color: inherit; }
.ind-entry__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; background: var(--p7); }
.ind-entry__media img { width: 100%; height: 100%; object-fit: cover; }
.ind-entry__word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ind-entry__word b { flex-basis: 100%; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-xl); line-height: 1.2; color: var(--p3); transition: color 0.18s ease; }
.ind-entry:hover .ind-entry__word b { color: var(--p1); }
.ind-entry__ipa { font-size: var(--fs-sm); color: var(--p5); }
.ind-entry__pos { font-size: var(--fs-xs); font-weight: 700; color: var(--p1); }
.ind-entry h3 { font-size: var(--fs-lg); line-height: 1.45; }
.ind-entry__ex { padding-left: var(--s3); border-left: 3px solid var(--p7); font-size: var(--fs-sm); color: var(--p5); }
.ind-entry__meta { display: flex; gap: 10px; margin-top: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--p6); }
@media (max-width: 860px) { .ind-entries { grid-template-columns: minmax(0, 1fr); } }

/* ===== 首頁 Z07 CTA（對話框） ===== */
.ind-section--cta { padding-top: 0; padding-bottom: calc(var(--section-y) + 24px); }
.ind-cta {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s5) clamp(32px, 6vw, 96px);
  padding: clamp(28px, 5.5vw, 72px); border: 3px solid var(--p3); border-radius: 40px 40px 40px 6px; background: var(--p9);
}
.ind-cta::after { content: ""; position: absolute; left: -3px; bottom: -26px; width: 44px; height: 26px; background: var(--p3); clip-path: polygon(0 0, 100% 0, 0 100%); }
.ind-cta .ind-cta__big { justify-self: start; padding: 0.08em 0.3em 0.12em; border-radius: 6px; background: var(--p3); color: var(--p9); font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-2xl); line-height: 1.1; }
.ind-cta h2 { font-size: var(--fs-2xl); }
.ind-cta p { color: var(--p5); }
@media (max-width: 860px) { .ind-cta { grid-template-columns: minmax(0, 1fr); } }

/* ===== 關於頁 ===== */
.ind-profile { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px); border-bottom: 3px solid var(--p3); }
.ind-profile__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: var(--s6) clamp(32px, 6vw, 96px); }
.ind-profile__text { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.ind-profile h1 { display: flex; flex-direction: column; gap: var(--s3); font-size: var(--fs-hero); line-height: 1.1; }
.ind-profile h1 small { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.18em; color: var(--p5); }
.ind-profile__role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 700; color: var(--p3); }
.ind-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: 2px solid var(--p3); }
.ind-stats div { padding: 14px 16px; border-left: 1px solid var(--line); }
.ind-stats div:first-child { padding-left: 0; border-left: 0; }
.ind-stats dt { font-size: var(--fs-xs); font-weight: 700; color: var(--p5); }
.ind-stats dd { margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-2xl); line-height: 1.2; color: var(--p3); font-variant-numeric: tabular-nums; }
.ind-profile__photo { margin: 0; }
.ind-profile__photo .ind-bubble { aspect-ratio: 4 / 5; border-radius: 40px 40px 40px 6px; }
@media (max-width: 760px) {
  .ind-profile__inner { grid-template-columns: minmax(0, 1fr); }
  .ind-profile__photo { order: -1; max-width: 420px; }
}

.ind-story { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--s6) clamp(32px, 6vw, 96px); align-items: start; }
.ind-story__aside { position: sticky; top: 104px; display: flex; flex-direction: column; gap: var(--s5); }
.ind-quote { margin: 0; padding-top: var(--s5); border-top: 3px solid var(--p3); }
.ind-quote__en { display: inline-block; padding: 0.08em 0.3em 0.12em; border-radius: 6px; background: var(--p3); color: var(--p9); font-feature-settings: "palt"; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-2xl); line-height: 1.15; }
.ind-quote blockquote { margin: var(--s4) 0 0; font-size: var(--fs-xl); font-weight: 700; line-height: 1.5; color: var(--p1); }
.ind-prose { display: flex; flex-direction: column; gap: var(--s5); font-size: var(--fs-base); line-height: 1.85; color: var(--p4); }
.ind-prose h2 { font-size: var(--fs-2xl); }
@media (max-width: 760px) { .ind-story { grid-template-columns: minmax(0, 1fr); } .ind-story__aside { position: static; } }

/* 經歷：一階一階往上的程度階梯 */
.ind-ladder { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; border-bottom: 3px solid var(--p3); }
.ind-ladder li { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s4) var(--s5); background: var(--p9); border-top: 3px solid var(--p3); border-left: 1px solid var(--line-strong); }
.ind-ladder li:first-child { border-left: 0; }
.ind-ladder li:nth-child(1) { min-height: 190px; }
.ind-ladder li:nth-child(2) { min-height: 235px; }
.ind-ladder li:nth-child(3) { min-height: 280px; }
.ind-ladder li:nth-child(4) { min-height: 325px; }
.ind-ladder li:nth-child(5) { min-height: 370px; background: var(--p3); color: var(--p9); }
.ind-ladder b { font-family: var(--font-heading); font-size: var(--fs-2xl); line-height: 1; color: var(--p3); font-variant-numeric: tabular-nums; }
.ind-ladder li:nth-child(5) b { color: var(--p9); }
.ind-ladder .ind-code { align-self: flex-start; color: var(--p5); }
.ind-ladder li:nth-child(5) .ind-code { color: color-mix(in srgb, var(--p9) 70%, transparent); }
.ind-ladder p { font-size: var(--fs-sm); color: var(--p5); }
.ind-ladder li:nth-child(5) p { color: color-mix(in srgb, var(--p9) 80%, transparent); }
@media (max-width: 860px) {
  .ind-ladder { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .ind-ladder li, .ind-ladder li:nth-child(n) { min-height: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: baseline; gap: 4px var(--s4); padding: var(--s4) 0; border-left: 0; border-top: 1px solid var(--line-strong); }
  .ind-ladder li:nth-child(5) { padding-inline: var(--s4); border-radius: 8px; }
  .ind-ladder b { grid-row: 1 / 3; }
  .ind-ladder .ind-code { justify-self: start; }
}

/* ===== 服務總覽（加購） ===== */
.ind-pagehead { padding-block: clamp(32px, 5vw, 64px) var(--s6); }
.ind-pagehead__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: var(--s5) var(--s7); padding-bottom: var(--s6); border-bottom: 3px solid var(--p3); }
.ind-pagehead h1 { margin-top: var(--s3); font-size: var(--fs-3xl); line-height: 1.2; }
.ind-pagehead h1 span { display: block; margin-top: var(--s2); font-size: var(--fs-base); line-height: 1.5; color: var(--p5); }
.ind-pagehead .breadcrumb { margin-bottom: var(--s4); }
@media (max-width: 760px) { .ind-pagehead__inner { grid-template-columns: minmax(0, 1fr); } }

.ind-filter { border-bottom: 0; margin-bottom: var(--s5); padding-top: 0; }
.ind-filter .chip, .ind-svc .chip { border-radius: 6px; border: 1.5px solid var(--p3); color: var(--p3); font-weight: 700; }
.ind-filter .chip[aria-pressed="true"], .ind-svc .chip[aria-pressed="true"] { background: var(--p3); color: var(--p9); }

.ind-svc-list { list-style: none; display: grid; gap: var(--s5); }
.ind-svc-row {
  display: grid; grid-template-columns: 150px 260px minmax(0, 1fr) auto; grid-template-areas: "code media body side";
  align-items: center; gap: var(--s5) var(--s6); padding: var(--s5); border: 2px solid var(--p3); border-radius: 8px;
  background: var(--p9); color: inherit; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ind-svc-row:hover { color: inherit; transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--p3); }
.ind-svc-row__code { grid-area: code; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-2xl); line-height: 1; letter-spacing: 0.01em; color: var(--p3); }
.ind-svc-row__code small { display: block; margin-top: 8px; font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--p5); }
.ind-svc-row__media { grid-area: media; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: var(--p7); }
.ind-svc-row__media img { width: 100%; height: 100%; object-fit: cover; }
.ind-svc-row__body { grid-area: body; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.ind-svc-row__body h2 { font-size: var(--fs-lg); }
.ind-svc-row__body p { font-size: var(--fs-sm); color: var(--p5); }
.ind-svc-row__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.ind-svc-row__meta span { padding: 2px 10px; border-radius: 999px; background: var(--p7); font-size: var(--fs-xs); font-weight: 700; color: var(--p4); }
.ind-svc-row__side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s3); text-align: right; }
.ind-svc-row__side .price { font-size: var(--fs-xl); }
.ind-svc-row__side .price small { font-size: var(--fs-sm); font-weight: 400; color: var(--p5); }
.ind-svc-row__go { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--p3); color: var(--p9); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
@media (max-width: 1080px) {
  .ind-svc-row { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "media code" "media body" "media side"; align-items: start; gap: var(--s3) var(--s5); }
  .ind-svc-row__side { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
}
@media (max-width: 600px) {
  .ind-svc-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "code" "media" "body" "side"; padding: var(--s4); }
  .ind-svc-row__code small { display: inline; margin: 0 0 0 8px; }
}
.ind-svc-empty { margin-top: var(--s5); }

/* ===== 服務內頁（加購）：沿用預約結構，改成硬邊方塊 ===== */
.ind-svc .svc-head { gap: var(--s4); padding-block: var(--s6) var(--s5); margin-bottom: var(--s5); border-bottom: 3px solid var(--p3); }
.ind-svc .svc-head h1 { font-size: var(--fs-3xl); line-height: 1.25; }
.ind-svc__title small { display: block; margin-top: var(--s2); font-size: var(--fs-base); letter-spacing: 0.04em; color: var(--p5); }
.ind-svc .svc-head .ind-hero__levels { display: inline-flex; flex-wrap: wrap; }
.ind-svc .svc-gallery figure { border-radius: 8px; }
.ind-svc .svc-gallery figure:first-child { border-radius: 32px 32px 32px 4px; }
.ind-svc .svc-main > section + section { border-top: 2px solid var(--p3); }
.ind-svc .svc-main h2 { font-size: var(--fs-2xl); }
.ind-svc .svc-facts div { padding: var(--s4); border: 1.5px solid var(--line-strong); border-radius: 8px; }
.ind-svc .svc-facts svg { color: var(--p3); }
.ind-svc .timeline { border-left: 0; counter-reset: indstep; }
.ind-svc .timeline li { grid-template-columns: 96px minmax(0, 1fr); padding-left: 0; padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px dashed var(--line-strong); }
.ind-svc .timeline li::before { display: none; }
.ind-svc .timeline b { display: inline-flex; align-self: start; justify-content: center; padding: 2px 8px; border: 1.5px solid var(--p3); border-radius: 4px; font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0.06em; }
.ind-svc .teacher-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ind-svc .teacher-list > div { padding: var(--s4); border: 1.5px solid var(--line-strong); border-radius: 8px; }
.ind-svc .instructor img { border-radius: 50% 50% 50% 4px; }
.ind-svc .enroll { border: 2px solid var(--p3); border-radius: 10px; box-shadow: 8px 8px 0 var(--p3); }
.ind-svc .book-label { font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--p5); }
.ind-svc .session label { border-radius: 6px; }
.ind-svc .cal__grid button { border-radius: 6px; }
.ind-svc .cal__grid button[aria-pressed="true"] { background: var(--p3); }
.ind-svc .slots button { border: 1.5px solid var(--p3); border-radius: 6px; }
.ind-svc .slots button:disabled { border-color: var(--line); }
.ind-svc .slots button[aria-pressed="true"] { background: var(--p3); border-color: var(--p3); color: var(--p9); }
.ind-svc .book-total { border-top: 2px solid var(--p3); }
.ind-svc .rating-big b { font-size: var(--fs-2xl); }
.ind-svc .chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
@media (max-width: 960px) { .ind-svc .teacher-list { grid-template-columns: minmax(0, 1fr); } }
