/* 霸道人夫 × 異物 活動頁。線上主題尚未載入全站設計系統（verzz-design.css），
   所以品牌 tokens、字體、按鈕都在這裡自帶，並限定在 .kol 內，不影響其他頁。
   色票與字體以 design/ds/colors_and_type.css 為準。 */
.kol {
  --vz-pink: #F6898C; --vz-pink-hover: #EB767A; --vz-pink-press: #D66065;
  --vz-peach: #F9BC95; --vz-soot: #362E2C; --vz-cream: #FFF9F2; --vz-paper: #FDF3EC;
  --vz-ink-700: #6B615D; --vz-ink-200: #EDE5DE;
  --vz-r-md: 1.4rem; --vz-r-lg: 2rem; --vz-r-xl: 2.8rem; --vz-r-pill: 999px;
  --vz-shadow-sm: 0 2px 6px rgba(53,47,44,.08), 0 1px 2px rgba(53,47,44,.04);
  --vz-shadow-md: 0 6px 18px rgba(53,47,44,.10), 0 2px 4px rgba(53,47,44,.05);
  --vz-ease-out: cubic-bezier(.22, 1, .36, 1);
  background: var(--vz-cream);
}

/* 按鈕：珊瑚粉 pill，安靜的實體按鈕回饋（升起↔壓下），不彈跳 */
body .kol .button.button--primary {
  border: none; border-radius: var(--vz-r-pill);
  background-color: var(--vz-pink); color: #fff;
  font-family: var(--vz-font-body); font-weight: 800; letter-spacing: 0.04em;
  box-shadow: none;
  transition: transform .18s var(--vz-ease-out), background-color .18s var(--vz-ease-out), box-shadow .18s var(--vz-ease-out);
}
body .kol .button.button--primary::before,
body .kol .button.button--primary::after { display: none; }
body .kol .button.button--primary:not([disabled]):hover { background-color: var(--vz-pink-hover); transform: translateY(-2px); box-shadow: var(--vz-shadow-md); }
body .kol .button.button--primary:not([disabled]):active { background-color: var(--vz-pink-press); transform: translateY(0) scale(0.97); box-shadow: none; transition-duration: .08s; }
body .kol .button.button--primary:focus-visible { outline: none; box-shadow: 0 0 0 0.3rem var(--vz-cream), 0 0 0 0.5rem var(--vz-soot); }
body .kol .button.button--primary[disabled] { background-color: var(--vz-ink-200); color: var(--vz-soot); }
@media (prefers-reduced-motion: reduce) {
  body .kol .button.button--primary { transition: none; }
  body .kol .button.button--primary:not([disabled]):hover, body .kol .button.button--primary:not([disabled]):active { transform: none; }
}

/* 'Noto Sans TC' 只載了「矽」一個字，排在 JP 之後補缺字 */
.kol {
  --vz-font-display: 'Noto Sans JP', 'Noto Sans TC', 'PingFang TC', system-ui, sans-serif;
  --vz-font-body: 'Ubuntu', 'Noto Sans JP', 'Noto Sans TC', 'PingFang TC', system-ui, sans-serif;
  --kol-gap: clamp(2.4rem, 5vw, 6.4rem);
  color: var(--vz-soot);
  font-family: var(--vz-font-body);
  overflow-x: clip;
}
.kol img { display: block; width: 100%; height: auto; }
.kol h1, .kol h2, .kol h3 { font-family: var(--vz-font-display); color: var(--vz-soot); margin: 0; }
.kol p { margin: 0; line-height: 1.85; }

.kol-eyebrow {
  font-family: 'Ubuntu', var(--vz-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--vz-pink-press, #D66065);
  margin-bottom: 1.2rem !important;
}

/* ---- Hero ---- */
.kol-hero {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--vz-paper, #FDF3EC);
}
.kol-hero__media img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 70%; }
.kol-hero__copy { padding: 3.2rem 2rem 4rem; }
.kol-hero__title {
  font-size: clamp(3.2rem, 7vw, 6.4rem);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.kol-hero__lede { margin-top: 2rem !important; font-size: 1.6rem; color: var(--vz-ink-700); max-width: 44rem; }
.kol-steps {
  list-style: none; padding: 0; margin: 2.8rem 0;
  display: flex; flex-wrap: wrap; gap: 0.8rem;
}
.kol-steps a {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--vz-r-pill);
  background: var(--vz-cream);
  box-shadow: inset 0 0 0 1px var(--vz-ink-200);
  color: var(--vz-soot); text-decoration: none; font-weight: 700; font-size: 1.4rem;
}
.kol-steps a:hover { box-shadow: inset 0 0 0 1px var(--vz-pink); }
.kol-steps span { color: var(--vz-pink-press); font-family: 'Ubuntu', sans-serif; }
.kol-hero__cta { min-width: 24rem; }
.kol-age { margin-top: 1.6rem !important; font-size: 1.2rem; color: var(--vz-ink-700); }

@media (min-width: 990px) {
  .kol-hero { grid-template-columns: 5fr 6fr; min-height: 88vh; align-items: center; }
  .kol-hero__media { height: 100%; }
  .kol-hero__media img { height: 100%; aspect-ratio: auto; }
  .kol-hero__copy { padding: 6rem clamp(4rem, 6vw, 10rem); }
}

/* ---- 章節 ---- */
.kol-chapter {
  display: grid; gap: 2.4rem;
  max-width: 128rem; margin: 0 auto;
  padding: var(--kol-gap) 2rem 0;
}
.kol-chapter__media { margin: 0; border-radius: var(--vz-r-xl); overflow: hidden; box-shadow: var(--vz-shadow-md); }
.kol-chapter__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.kol-chapter h2, .kol-bundle h2 {
  font-size: clamp(2.6rem, 4vw, 4rem); line-height: 1.3; font-weight: 900; margin-bottom: 1.6rem;
}
.kol-chapter__copy > p { font-size: 1.6rem; }
@media (min-width: 990px) {
  .kol-chapter { grid-template-columns: 1fr 1fr; gap: 6.4rem; align-items: start; }
  .kol-chapter__media { position: sticky; top: 10rem; }
  .kol-chapter--flip .kol-chapter__media { order: 2; }
}

.kol-points { list-style: none; padding: 0; margin: 2.4rem 0; display: grid; gap: 1.2rem; }
.kol-points li {
  position: relative; padding-left: 2.4rem; font-size: 1.5rem; line-height: 1.75; color: var(--vz-ink-700);
}
.kol-points li::before {
  content: ''; position: absolute; left: 0; top: 0.75em;
  width: 1rem; height: 1rem; border-radius: 50%; background: var(--vz-peach);
}
.kol-points strong { color: var(--vz-soot); }

/* ---- 漉漉補水 ---- */
.kol-water {
  margin: 2.8rem 0; padding: 2.4rem;
  border-radius: var(--vz-r-lg);
  background: var(--vz-paper);
}
.kol-water__lead { font-weight: 900; font-size: 1.7rem; font-family: var(--vz-font-display); }
.kol-water__steps { list-style: none; padding: 0; margin: 1.6rem 0; display: grid; gap: 1.2rem; }
.kol-water__steps li { display: grid; grid-template-columns: 3.6rem 1fr; column-gap: 1.2rem; font-size: 1.4rem; line-height: 1.6; color: var(--vz-ink-700); }
.kol-water__steps strong { display: block; color: var(--vz-soot); font-size: 1.5rem; }
.kol-water__dot { grid-row: span 2; width: 3.6rem; height: 3.6rem; border-radius: 50%; align-self: center; }
/* 由濃到稀：同一種顏色、透明度遞減，表達「加水變薄」 */
.kol-water__dot--1 { background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--vz-peach) 40%, var(--vz-pink) 100%); }
.kol-water__dot--2 { background: radial-gradient(circle at 35% 30%, #fff 0 12%, rgba(249,188,149,.7) 45%, rgba(246,137,140,.55) 100%); }
.kol-water__dot--3 { background: radial-gradient(circle at 35% 30%, #fff 0 16%, rgba(249,188,149,.45) 50%, rgba(246,137,140,.35) 100%); box-shadow: inset 0 0 0 2px rgba(246,137,140,.5); }
.kol-water__foot { font-size: 1.4rem; color: var(--vz-ink-700); }

/* ---- 購買盒 ---- */
.kol-buy {
  display: grid; grid-template-columns: 9.6rem 1fr; gap: 1.6rem; align-items: center;
  margin-top: 2.4rem; padding: 1.6rem;
  background: #fff; border-radius: var(--vz-r-lg); box-shadow: var(--vz-shadow-sm);
}
.kol-buy__media { border-radius: var(--vz-r-md); overflow: hidden; background: var(--vz-paper); }
.kol-buy__media img { aspect-ratio: 1; object-fit: cover; }
.kol-buy__title { font-size: 1.6rem !important; line-height: 1.4; font-weight: 700 !important; }
.kol-buy__title a { color: inherit; text-decoration: none; }
.kol-buy__title a:hover { text-decoration: underline; text-underline-offset: 0.3rem; }
.kol-buy__note { font-size: 1.3rem; color: var(--vz-ink-700); line-height: 1.6 !important; margin-top: 0.4rem !important; }
.kol-buy__price { font-family: 'Ubuntu', sans-serif; font-weight: 700; font-size: 1.7rem; margin-top: 0.6rem !important; }
.kol-buy__price s { font-weight: 400; color: var(--vz-ink-700); font-size: 1.3rem; margin-left: 0.6rem; }
.kol-buy__form { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; }
.kol-buy__select {
  flex: 1 1 12rem; min-height: 4.4rem; padding: 0 1.2rem;
  border-radius: var(--vz-r-pill); border: 1px solid var(--vz-ink-200); background: var(--vz-cream);
  font: inherit; font-size: 1.4rem; color: var(--vz-soot);
}
.kol-buy__add { flex: 1 1 14rem; min-height: 4.4rem; }
.kol-buy__add.is-loading { opacity: 0.6; cursor: progress; }
.kol-buy__soldout { margin-top: 1rem !important; color: var(--vz-ink-700); font-size: 1.4rem; }

.kol-buy--feature { grid-template-columns: 1fr; padding: 2rem; }
.kol-buy--feature .kol-buy__title { font-size: 2rem !important; }
@media (min-width: 750px) {
  .kol-buy { grid-template-columns: 12rem 1fr; }
  .kol-buy--feature { grid-template-columns: 22rem 1fr; }
}

/* ---- 洗練包 ---- */
.kol-bundle {
  display: grid; gap: 2.4rem;
  margin: var(--kol-gap) auto 0; max-width: 128rem;
  padding: clamp(2rem, 4vw, 4.8rem);
  background: var(--vz-soot); color: var(--vz-cream);
  border-radius: 0;
}
.kol-bundle h2 { color: var(--vz-cream) !important; }
.kol-bundle .kol-eyebrow { color: var(--vz-peach); }
.kol-bundle__copy > p { font-size: 1.6rem; color: rgba(255,249,242,.82); }
.kol-bundle__media { border-radius: var(--vz-r-xl); overflow: hidden; }
.kol-bundle__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.kol-bundle .kol-buy { color: var(--vz-soot); }
@media (min-width: 750px) { .kol-bundle { border-radius: var(--vz-r-xl); margin-left: 2rem; margin-right: 2rem; } }
@media (min-width: 990px) { .kol-bundle { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 4.8rem; } }
@media (min-width: 1320px) { .kol-bundle { margin-left: auto; margin-right: auto; } }

/* ---- 其他組合 ---- */
.kol-more { max-width: 128rem; margin: 0 auto; padding: var(--kol-gap) 2rem 0; }
.kol-more__title { font-size: 2.2rem; font-weight: 900; }
.kol-more__grid { display: grid; gap: 0 2.4rem; }
@media (min-width: 750px) { .kol-more__grid { grid-template-columns: 1fr 1fr; } }

/* ---- 收尾 ---- */
.kol-outro { position: relative; margin-top: var(--kol-gap); }
.kol-outro img { aspect-ratio: 16 / 10; object-fit: cover; max-height: 80vh; }
.kol-outro__copy {
  position: absolute; inset: auto 0 0 0;
  padding: 6rem 2rem 3.2rem; text-align: center;
  background: linear-gradient(to top, rgba(54,46,44,.85), rgba(54,46,44,0));
}
.kol-outro__line {
  color: var(--vz-cream); font-family: var(--vz-font-display);
  font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 900; margin-bottom: 2rem !important;
}
@media (max-width: 749px) { .kol-outro img { aspect-ratio: 4 / 5; } }

.kol-extra { max-width: 80rem; margin: var(--kol-gap) auto 0; padding: 0 2rem; }
.kol > :last-child { margin-bottom: var(--kol-gap); }

@media (prefers-reduced-motion: reduce) {
  .kol-chapter__media { position: static; }
}

/* ---- 旅行日誌時間軸 ---- */
.kol-eyebrow .kol-clock {
  display: inline-block; margin-right: 1.2rem; padding-right: 1.2rem;
  border-right: 1px solid currentColor;
  font-family: 'Ubuntu', sans-serif; font-weight: 500; letter-spacing: 0.06em;
  opacity: 0.75;
}

/* 淋浴照為直幅完整構圖 */
.kol-chapter--tall .kol-chapter__media img { aspect-ratio: 4 / 5; object-position: 50% 35%; }

/* ---- 夜：唯一的深色滿版段落，白天到夜晚的轉場 ---- */
.kol-night {
  margin-top: var(--kol-gap);
  padding: var(--kol-gap) 2rem;
  background:
    radial-gradient(60rem 40rem at 85% 10%, rgba(249,188,149,.16), transparent 70%),
    var(--vz-soot);
  color: var(--vz-cream);
}
.kol-night__head { max-width: 64rem; margin: 0 auto 4rem; text-align: center; }
.kol-night__head h2 { color: var(--vz-cream) !important; font-size: clamp(2.6rem, 4.4vw, 4.4rem); font-weight: 900; line-height: 1.3; margin-bottom: 1.6rem; }
.kol-night__head p { color: rgba(255,249,242,.78); font-size: 1.6rem; }
.kol-night .kol-eyebrow { color: var(--vz-peach); }
.kol-night__pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.4vw, 3.2rem);
  max-width: 112rem; margin: 0 auto;
}
.kol-night__pair img { border-radius: var(--vz-r-xl); aspect-ratio: 7 / 9; object-fit: cover; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
/* 錯位：第二張往下沉，像日誌裡隨手貼的兩張照片 */
.kol-night__pair img:nth-child(2) { margin-top: clamp(4rem, 10vw, 12rem); }

/* 收尾改直幅照：左右置中、限高 */
.kol-outro { max-width: 64rem; margin-left: auto; margin-right: auto; padding: 0 2rem; }
.kol-outro img { aspect-ratio: 3 / 4 !important; max-height: none; border-radius: var(--vz-r-xl); }
.kol-outro__copy { left: 2rem; right: 2rem; border-radius: 0 0 var(--vz-r-xl) var(--vz-r-xl); }

/* 慢慢浮現，不彈跳；只在支援 scroll-driven 動畫的瀏覽器啟用 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kol-chapter__media, .kol-night__pair img, .kol-bundle__media {
      animation: kol-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes kol-rise { from { opacity: 0; transform: translateY(2.4rem); } to { opacity: 1; transform: none; } }

/* 洗練包大卡：深色區塊裡欄寬有限，圖片縮小、按鈕不斷行 */
.kol-buy__add { white-space: nowrap; }
@media (min-width: 750px) {
  .kol-bundle .kol-buy--feature { grid-template-columns: 14rem 1fr; }
}

/* grid 子元素預設 min-width:auto，會被不斷行的按鈕撐出視窗；統一歸零 */
.kol-hero > *, .kol-chapter > *, .kol-bundle > *, .kol-more__grid > *, .kol-buy > * { min-width: 0; }
.kol-chapter, .kol-hero { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 990px) {
  .kol-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .kol-chapter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 專屬折扣碼 */
.kol-code { max-width: 72rem; margin: 0 auto 6rem; padding: 2.4rem 2.8rem; border: 2px dashed var(--vz-pink); border-radius: 1.6rem; background: #fff; text-align: center; }
.kol-code__lead { margin: 0; font-family: var(--vz-font-display); font-weight: 900; font-size: 1.9rem; line-height: 1.5; color: var(--vz-soot); }
.kol-code__value { color: var(--vz-pink); letter-spacing: .1em; }
.kol-code__detail { margin: .8rem 0 0; font-size: 1.5rem; color: var(--vz-ink-700); }
.kol-outro__code { font-size: 1.4rem; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
@media (max-width: 749px) { .kol-code { margin: 0 1.6rem 4.8rem; padding: 2rem 1.6rem; } .kol-code__lead { font-size: 1.7rem; } }
.kol-code-hint { margin: 1.2rem 0 0; font-size: 1.3rem; line-height: 1.6; color: var(--vz-ink-700); }
.kol-code-hint strong { color: var(--vz-pink-press); letter-spacing: .08em; }