/* ==========================================================================
   pages：各內頁專屬版型
   ========================================================================== */

/* ── 媒體變體 ─────────────────────────────────────────── */
.media--contain { background: var(--tile); aspect-ratio: 4 / 3; }
.media--contain img { object-fit: contain; padding: 6%; }
.media--auto { aspect-ratio: auto; }
.media--auto img { height: auto; }
.media--square { aspect-ratio: 1; }
.card--media .media { margin: calc(clamp(24px, 2.6vw, 40px) * -1) calc(clamp(24px, 2.6vw, 40px) * -1) 8px; border-radius: 0; aspect-ratio: 16 / 9; }
.card--media .media::after { display: none; }
.gallery { display: grid; gap: 14px; }
@media (min-width: 900px) { .gallery { grid-template-columns: 1fr 1fr; } }
.seo-figures { display: grid; gap: 14px; margin-top: clamp(48px, 6vw, 80px); }
.seo-figures img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.custom-plan { margin-top: clamp(56px, 7vw, 96px); padding: clamp(28px, 4vw, 56px); border-radius: var(--radius); border: 1px dashed var(--line-strong); display: grid; gap: 10px; justify-items: start; }

/* T-KI 商店徽章 */
.gc-tki-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.gc-tki-badge img { height: 48px; width: auto; }

/* ── 連結清單（聯絡頁、404） ──────────────────────────── */
.link-list { border-top: 1px solid var(--line); }
.link-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 1.05rem; transition: color var(--m-fast) var(--m-ease), padding var(--m-base) var(--ease-wind);
}
.link-list .icon { color: var(--muted); transition: transform var(--m-base) var(--ease-wind), color var(--m-base) var(--m-ease); }
@media (hover: hover) {
  .link-list a:hover { color: var(--accent-text); padding-left: 10px; }
  .link-list a:hover .icon { color: var(--accent-text); transform: rotate(45deg); }
}

/* 淺色版的諮詢區：表單卡改純白，避免和底色糊在一起 */
.contact-block[data-theme="light"] .form-card { background: #fff; box-shadow: 0 30px 80px rgba(11, 24, 48, .08); border: 1px solid var(--line); }

/* ── 案例格 ───────────────────────────────────────────── */
.case-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (max-width: 639px) {
  .case-grid, .case-grid--4 { grid-template-columns: 1fr; gap: 14px; }
  .case-card__body { padding: 12px 34px 14px 12px; }
  .case-card__title { font-size: 1rem; }
  .case-card__arrow { right: 10px; bottom: 14px; }
}
.case-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
@media (min-width: 1024px) { .case-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-card[hidden] { display: none; }
.case-card__link {
  position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%;
  border-radius: var(--radius); overflow: hidden;
  background: var(--tile); border: 1px solid var(--line);
  transition: border-color var(--m-base) var(--m-ease), transform var(--m-slow) var(--ease-wind);
}
.case-card__logo { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 12% 16%; background: #ffffff; border-bottom: 1px solid var(--line); }
.case-card__logo img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; transition: transform var(--m-slow) var(--ease-wind); }
.case-card__initial { font-family: var(--font-serif); font-weight: 900; font-size: 3.2rem; color: rgba(11, 24, 48, .2); }
.case-card__body { display: grid; gap: 4px; align-content: start; padding: 18px 56px 20px 20px; }
.case-card__title { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; line-height: 1.35; }
.case-card__meta { font-size: .8rem; color: var(--muted); letter-spacing: .06em; }
.case-card__arrow { position: absolute; right: 18px; bottom: 20px; color: var(--muted); transition: transform var(--m-base) var(--ease-wind), color var(--m-base) var(--m-ease); }
@media (hover: hover) {
  .case-card__link:hover { border-color: rgba(58, 155, 235, .6); transform: translateY(-6px); }
  .case-card__link:hover .case-card__logo img { transform: scale(1.06); }
  .case-card__link:hover .case-card__arrow { color: var(--accent-text); transform: rotate(45deg); }
}

/* ── 案例內頁 ─────────────────────────────────────────── */
.case-layout { display: grid; gap: clamp(32px, 5vw, 88px); align-items: start; }
@media (min-width: 1024px) { .case-layout { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } .case-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.case-aside { display: grid; gap: 20px; }
.case-logo { display: grid; place-items: center; width: min(100%, 240px); aspect-ratio: 2 / 1; padding: 18px 26px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); }
.case-logo img { max-height: 100%; width: auto; object-fit: contain; }
.case-facts { display: grid; border-top: 1px solid var(--line); }
.case-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .925rem; }
.case-facts dt { color: var(--muted); }
.case-facts dd { text-align: right; font-weight: 500; }
.case-entry h2:first-child { margin-top: 0; }

/* ── 搜尋框 ───────────────────────────────────────────── */
.search-form { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--tile); border: 1px solid var(--line-strong); margin-top: 18px; }
.search-form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(58, 155, 235, .16); }
.search-form input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; font: inherit; color: var(--fg); outline: none; }
.search-form button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); flex: none; }

/* ── 專案流程：旅程 ───────────────────────────────────── */
.journey__wrap { position: relative; }
.journey__rail { position: absolute; left: var(--rail-x, 27px); top: 28px; bottom: 28px; width: 1px; background: var(--line); }
.journey__fill { position: absolute; inset: 0; background: linear-gradient(var(--brand), rgba(58, 155, 235, .4)); transform: scaleY(0); transform-origin: top; }
.journey__step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 0 0 clamp(48px, 7vw, 120px); }
.journey__num {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong);
  font-family: var(--font-mono); font-size: .8rem; color: var(--accent-text);
  transition: background var(--m-slow) var(--m-ease), color var(--m-slow) var(--m-ease), box-shadow var(--m-slow) var(--m-ease);
}
.journey__step.is-active .journey__num { background: var(--brand); color: var(--ink); box-shadow: 0 0 0 8px rgba(58, 155, 235, .16); }
.journey__title { font-family: var(--font-serif); font-weight: 900; font-size: clamp(1.8rem, 4.4vw, 4rem); line-height: 1.1; letter-spacing: -.015em; }
.journey__en { margin-top: 6px; font-family: var(--font-latin); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.5rem); color: var(--faint); }
.journey__body .check-list { margin-top: 22px; max-width: 34em; }
@media (min-width: 1024px) {
  .journey__step { grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1.4fr); }
  .journey__step::before {
    content: attr(data-n); grid-column: 1; justify-self: end; align-self: start;
    font-family: var(--font-latin); font-size: clamp(6rem, 11vw, 11rem); line-height: .8; color: transparent;
    -webkit-text-stroke: 1px var(--line-strong); margin-top: -.06em;
    transition: color var(--m-slow) var(--m-ease), -webkit-text-stroke-color var(--m-slow) var(--m-ease);
  }
  .journey__step.is-active::before { color: var(--fg); -webkit-text-stroke-color: transparent; }
  .journey__num { grid-column: 2; justify-self: center; }
  .journey__body { grid-column: 3; }
}

/* ── 案例卡：有截圖的版本 ─────────────────────────────── */
.case-card__shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f7; border-bottom: 1px solid var(--line); }
.case-card__shot > img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 900ms var(--ease-wind); }
.case-card__badge {
  position: absolute; left: 10px; bottom: 10px; display: grid; place-items: center;
  width: 64px; height: 40px; padding: 6px 8px; border-radius: 10px; background: #fff;
  box-shadow: 0 6px 18px rgba(11, 24, 48, .18);
}
.case-card__badge img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (hover: hover) { .case-card__link:hover .case-card__shot > img { transform: scale(1.05); } }
.case-card__title { text-wrap: balance; }

/* ── 案例內頁：桌機＋手機展示台 ───────────────────────── */
.case-stage { padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 56px); overflow: clip; }
.case-stage__inner { position: relative; display: grid; }
.case-stage__desktop { width: min(100%, 1180px); }
.case-stage__phone { position: absolute; right: max(var(--gutter), 2%); bottom: -6%; width: clamp(120px, 20vw, 250px); }
.case-stage__inner.is-mobile-only { justify-items: center; }
.case-stage__inner.is-mobile-only .case-stage__phone { position: static; width: min(70vw, 280px); }
.case-stage__note { margin-top: clamp(40px, 5vw, 64px); font-size: .75rem; color: var(--faint); letter-spacing: .04em; }
@media (max-width: 767px) { .case-stage__phone { bottom: -14%; right: 4px; } }

/* ── 辦公室實景（原圖 586px 寬，最大不超過原尺寸） ───────── */
.office-photo { position: relative; max-width: 586px; width: 100%; justify-self: end; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.office-photo img { width: 100%; height: auto; display: block; }
.office-photo figcaption {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; background: rgba(11, 24, 48, .78); color: var(--paper);
  font-size: .75rem; letter-spacing: .04em; backdrop-filter: blur(6px);
}
.contact-block__info .office-photo { justify-self: start; margin-top: 8px; }

/* 聯絡頁手機：表單排最前面 */
@media (max-width: 1023px) { .page-contact .contact-block__form { order: -1; } }

/* 案例總覽：前兩件精選大卡；hover 滑出手機版畫面 */
@media (min-width: 1024px) {
  .case-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .case-card--feature { grid-column: span 2; }
  .case-card--feature .case-card__title { font-size: 1.6rem; }
}
.case-card__phone {
  position: absolute; right: 14px; bottom: -8%; width: 22%; aspect-ratio: 390 / 844;
  padding: 4px; border-radius: 14px; background: #0a1426; box-shadow: 0 16px 40px rgba(4, 10, 22, .45);
  transform: translateY(70%); opacity: 0;
  transition: transform var(--m-slow) var(--ease-wind), opacity var(--m-base) var(--m-ease);
}
.case-card__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 10px; }
@media (hover: hover) {
  .case-card__link:hover .case-card__phone { transform: translateY(-6%); opacity: 1; }
}

/* 案例內頁：下一個案例（全寬大連結） */
.next-case { position: relative; display: block; overflow: hidden; isolation: isolate; background: var(--bg); color: var(--fg); border-top: 1px solid var(--line); }
.next-case__inner { display: grid; gap: 14px; padding-block: clamp(56px, 8vw, 120px); }
.next-case__title { display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-serif); font-weight: 900; font-size: clamp(2.2rem, 6vw, 5.6rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.next-case__title .icon { flex: none; transition: transform var(--m-slow) var(--ease-wind); }
.next-case__bg { position: absolute; inset: 0; z-index: -1; opacity: .22; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%); mask-image: linear-gradient(90deg, transparent 20%, #000 75%); }
.next-case__bg img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1) blur(6px); transform: scale(1.05); transition: transform 1200ms var(--ease-wind), opacity var(--m-slow) var(--m-ease); }
@media (hover: hover) {
  .next-case:hover .next-case__title .icon { transform: translateX(12px); }
  .next-case:hover .next-case__bg img { transform: scale(1); }
}

/* 案例：網站導覽（長截圖切成四段） */
.tour__list { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 900px) { .tour__list { grid-template-columns: 1fr 1fr; } .tour__item:nth-child(even) { margin-top: clamp(40px, 6vw, 96px); } }
@media (max-width: 899px) {
  .tour__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scrollbar-width: none; }
  .tour__list::-webkit-scrollbar { display: none; }
  .tour__item { flex: 0 0 86%; scroll-snap-align: start; }
}
.tour__item { display: grid; gap: 12px; }
.tour__item .browser__view img { width: 100%; height: 100%; object-fit: cover; }
.tour__cap { display: flex; gap: 12px; align-items: baseline; font-size: .9rem; color: var(--muted); }
.tour__cap b { font-family: var(--font-mono); font-weight: 500; font-size: .75rem; color: var(--accent-text); letter-spacing: .12em; }

/* ── 作品頁：瀏覽器框寬窄交錯（7:5／5:7），手機兩欄精簡 ── */
.work__filter { position: sticky; top: 0; z-index: 5; padding-block: 12px; margin-bottom: clamp(24px, 3vw, 40px); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.work-grid { display: grid; gap: clamp(32px, 5vw, 72px) clamp(16px, 2.4vw, 36px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .work-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .work-tile { grid-column: span 6; }
  .work-tile:nth-child(4n+1), .work-tile:nth-child(4n+4) { grid-column: span 7; }
  .work-tile:nth-child(4n+2), .work-tile:nth-child(4n+3) { grid-column: span 5; }
  .work-tile:nth-child(4n+2) { margin-top: clamp(32px, 5vw, 80px); }
}
.work-tile[hidden], .work-others__list li[hidden] { display: none; }
.work-tile__link { display: grid; gap: 14px; }
.work-tile__meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; }
.work-tile__index { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; color: var(--accent-text); }
.work-tile__title { font-family: var(--font-serif); font-weight: 900; font-size: clamp(1rem, 1.9vw, 1.7rem); line-height: 1.3; text-wrap: balance; transition: color var(--m-base) var(--m-ease); }
.work-tile__cat { grid-column: 2; font-size: .78rem; color: var(--muted); letter-spacing: .06em; }
@media (hover: hover) { .work-tile__link:hover .work-tile__title { color: var(--accent-text); } }
@media (max-width: 899px) {
  .work-tile .browser__bar { height: 18px; padding: 0 8px; gap: 4px; }
  .work-tile .browser__bar i { width: 6px; height: 6px; }
  .work-tile .browser__url { display: none; }
  .work-tile__meta { grid-template-columns: 1fr; }
  .work-tile__index { display: none; }
  .work-tile__cat { grid-column: 1; }
}
.work-others { margin-top: clamp(56px, 8vw, 112px); display: grid; gap: 18px; }
.work-others__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); border-top: 1px solid var(--line); }
.work-others__list a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.work-others__list a span { flex: 1; font-weight: 500; }
.work-others__list small { color: var(--muted); font-size: .78rem; }
.work-others__list .icon { color: var(--muted); }


/* 流程站點：圓點不再重複數字（大數字已在左側），經過時亮起 */
.journey__num { width: 22px; height: 22px; margin: 17px; }
.journey__step.is-active .journey__num { box-shadow: 0 0 0 6px rgba(58, 155, 235, .2); }
@media (max-width: 1023px) { .journey__num { margin: 17px 17px 0; } .journey__step::after { content: attr(data-n); position: absolute; left: 0; top: 52px; width: 56px; text-align: center; font-family: var(--font-mono); font-size: .7rem; color: var(--accent-text); } }

.work.sec { padding-top: clamp(28px, 4vw, 56px); }
@media (max-width: 899px) { .work-tile:nth-child(3n+1) { grid-column: 1 / -1; } }

/* ── SEO 頁：GEO／AIO 加值服務 ─────────────────────────── */
.engines { display: grid; gap: 12px; counter-reset: none; }
@media (min-width: 900px) { .engines { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); } }
.engine {
  position: relative; overflow: hidden; display: grid; gap: 16px; align-content: start;
  padding: clamp(24px, 3vw, 40px); border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line);
}
.engine--ai { background: radial-gradient(120% 90% at 100% 0%, rgba(58, 155, 235, .2), transparent 60%); box-shadow: inset 0 0 0 1px rgba(58, 155, 235, .45); }
.engine__ab { font-family: var(--font-latin); font-size: clamp(4rem, 8vw, 7rem); line-height: .8; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px var(--line-strong); }
.engine--ai .engine__ab { color: var(--brand); -webkit-text-stroke: 0; }
.engine__name { font-size: 1.2rem; font-weight: 700; letter-spacing: .04em; }
.engine__meta { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.engine__meta div { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 12px; }
.engine__meta dt { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; color: var(--faint); padding-top: .3em; }
.engine__meta dd { color: var(--muted); line-height: 1.75; }

.geo__sub { margin: clamp(56px, 7vw, 96px) 0 clamp(20px, 2.4vw, 32px); font-family: var(--font-serif); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.geo-do { display: grid; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .geo-do { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); } }
@media (min-width: 1100px) { .geo-do { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.geo-do__item { display: grid; gap: 8px; align-content: start; padding: 24px 0 28px; border-bottom: 1px solid var(--line); }
.geo-do__num { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; color: var(--accent-text); }
.geo-do__title { font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; }
.geo-do__text { color: var(--muted); font-size: .95rem; line-height: 1.85; }

.geo__foot { display: grid; gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) { .geo__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.geo__price { color: var(--muted); }
.geo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.geo__actions .link-arrow { margin-top: 0; }
.geo__reads { display: grid; gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.geo__reads-label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; color: var(--faint); }
.geo__reads ul { display: grid; border-top: 1px solid var(--line); }
.geo__reads a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 500; transition: color var(--m-base) var(--m-ease); }
.geo__reads a .icon { flex: none; color: var(--faint); transition: transform var(--m-base) var(--m-ease-out), color var(--m-base) var(--m-ease); }
@media (hover: hover) { .geo__reads a:hover { color: var(--accent-text); } .geo__reads a:hover .icon { color: var(--accent-text); transform: translateX(4px); } }