/* 美業頁:學精品保養與沙龍品牌的設計語言。紙色、沙色、墨色,陶土色只用在連結與小標;
   襯線標題、大留白、細線,不包卡片、沒有漸層與陰影。 */
body.ind-beauty {
  --paper: #f7f3ec; --sand: #ece4d8; --ink: #2a2724; --taupe: #6f675d; --rule: #d8cfc2; --clay: #9a6a55;
  --bg: var(--paper); --ink-2: #4a443e; --muted: var(--taupe); --line: var(--rule);
  --brand: var(--ink); --brand-ink: var(--paper); --mark-line: var(--paper);
  --serif: "Noto Serif TC", "Songti TC", serif;
  --latin: "Cormorant Garamond", "Noto Serif TC", serif;
  --font: "Noto Sans TC", "DM Sans", -apple-system, "PingFang TC", sans-serif;
  font-family: var(--font); font-size: 16px; line-height: 1.9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.ind-beauty {
    --paper: #1c1a17; --sand: #26231f; --ink: #ede6da; --taupe: #b3a898; --rule: #3a352f; --clay: #c9a08a; --ink-2: #d6cfc3;
  }
}
.ind-beauty .wrap { max-width: 1200px; }
.ind-beauty .site-head { border-bottom-color: var(--rule); }
.ind-beauty .btn-head { height: 40px; letter-spacing: .06em; font-size: 14px; }

.bt-eyebrow { font-family: "DM Sans", sans-serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); }
.bt-h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.5; letter-spacing: .02em; }
.bt-btn { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 28px; font-size: 15px; letter-spacing: .06em; text-decoration: none; border-radius: 1px; }
.bt-btn-main { background: var(--ink); color: var(--paper); }
.bt-btn-sub { border: 1px solid var(--ink); }
.bt-link { color: var(--clay); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* 首屏:左文字、右直式畫面 */
.bt-hero { padding: 40px 0 120px; }
.bt-hero .crumb { font-size: 13px; margin-bottom: 72px; }
.bt-hero .crumb a { color: var(--taupe); text-decoration: none; }
.bt-hero .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
.bt-hero .txt { grid-column: 1 / span 6; padding-bottom: 24px; }
.bt-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.4; letter-spacing: .02em; margin-top: 20px; }
.bt-hero .lead { margin-top: 24px; color: var(--ink-2); max-width: 26em; }
.bt-hero .act { margin-top: 40px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.bt-hero figure { grid-column: 8 / span 5; margin: 0; background: var(--sand); aspect-ratio: 3 / 4; overflow: hidden; position: relative; }
.bt-hero figure img { position: absolute; left: 14%; top: 12%; width: 118%; max-width: none; border: 1px solid var(--rule); animation: bt-settle 1.6s ease-out both; }
@keyframes bt-settle { from { transform: scale(1.04); } to { transform: none; } }
.bt-hero figcaption, .bt-fig figcaption { font-size: 12px; color: var(--taupe); margin-top: 10px; letter-spacing: .04em; }
@media (max-width: 860px) {
  .bt-hero { padding-bottom: 72px; }
  .bt-hero .crumb { margin-bottom: 40px; }
  .bt-hero .grid { grid-template-columns: 1fr; }
  .bt-hero .txt, .bt-hero figure { grid-column: 1; }
}

/* 一句話立場 */
.bt-stance { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 96px 0; }
.bt-stance p { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.7; max-width: 22em; margin: 0 auto; text-align: center; letter-spacing: .03em; }

/* 一天的段落:圖文左右交錯 */
.bt-day { padding: 120px 0 0; }
.bt-step { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; padding-bottom: 120px; }
.bt-step .txt { grid-column: 1 / span 4; }
.bt-step .bt-fig { grid-column: 6 / span 7; margin: 0; }
.bt-step.flip .txt { grid-column: 9 / span 4; order: 2; }
.bt-step.flip .bt-fig { grid-column: 1 / span 7; order: 1; }
.bt-step .time { font-family: var(--latin); font-size: 20px; color: var(--clay); letter-spacing: .06em; }
.bt-step h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.5; margin-top: 8px; }
.bt-step p { margin-top: 16px; color: var(--ink-2); max-width: 22em; }
.bt-fig .frame { background: var(--sand); padding: 7% 0 0 7%; overflow: hidden; }
.bt-fig img { width: 100%; border: 1px solid var(--rule); border-right: 0; border-bottom: 0; }
.bt-step.text-only .txt { grid-column: 3 / span 8; text-align: left; border-top: 1px solid var(--rule); padding-top: 32px; }
.bt-step.text-only p { max-width: 32em; }
@media (max-width: 860px) {
  .bt-day { padding-top: 72px; }
  .bt-step, .bt-step.flip { grid-template-columns: 1fr; padding-bottom: 72px; }
  .bt-step .txt, .bt-step .bt-fig, .bt-step.flip .txt, .bt-step.flip .bt-fig, .bt-step.text-only .txt { grid-column: 1; order: 0; }
}

/* 價格(收費方式) */
.bt-price { background: var(--sand); padding: 120px 0; }
.bt-price .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.bt-price .head { grid-column: 1 / span 4; }
.bt-price .cols { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.bt-price h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; }
.bt-price .st { display: block; font-size: 12px; letter-spacing: .12em; color: var(--clay); margin-top: 4px; }
.bt-price p { margin-top: 12px; color: var(--ink-2); font-size: 15px; }
.bt-price .how { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--taupe); }
@media (max-width: 860px) {
  .bt-price { padding: 72px 0; }
  .bt-price .grid, .bt-price .cols { grid-template-columns: 1fr; }
  .bt-price .head, .bt-price .cols { grid-column: 1; }
}

/* 常見問題 */
.bt-faq { padding: 120px 0; }
.bt-faq .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.bt-faq .head { grid-column: 1 / span 4; }
.bt-faq .list { grid-column: 6 / span 7; border-top: 1px solid var(--rule); }
.bt-faq details { border-bottom: 1px solid var(--rule); }
.bt-faq summary { cursor: pointer; list-style: none; padding: 22px 0; font-family: var(--serif); font-size: 18px; display: flex; justify-content: space-between; gap: 16px; }
.bt-faq summary::-webkit-details-marker { display: none; }
.bt-faq summary::after { content: "+"; font-family: var(--latin); font-size: 22px; color: var(--clay); line-height: 1; }
.bt-faq details[open] summary::after { content: "−"; }
.bt-faq details p { padding-bottom: 22px; color: var(--ink-2); max-width: 32em; }
@media (max-width: 860px) { .bt-faq { padding: 72px 0; } .bt-faq .grid { grid-template-columns: 1fr; } .bt-faq .head, .bt-faq .list { grid-column: 1; } }

.bt-end { border-top: 1px solid var(--rule); padding: 96px 0 120px; text-align: center; }
.bt-end h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; }
.bt-end .act { margin-top: 32px; }

/* 套文案後補的小件 */
.bt-hero .lead .sub, .bt-step .sub { font-family: var(--serif); color: var(--ink); }
.bt-step p.sub { margin-top: 10px; }
.bt-step p.sub + p { margin-top: 8px; }
.bt-stance .small { font-family: var(--font); font-size: 15px; line-height: 1.9; color: var(--taupe); margin-top: 24px; }
.bt-ph { background: var(--sand); aspect-ratio: 16 / 11; display: grid; place-content: center; text-align: center; color: var(--taupe); font-size: 14px; border: 1px solid var(--rule); }
.bt-ph span { display: block; font-family: var(--latin); font-size: 16px; letter-spacing: .12em; color: var(--clay); margin-bottom: 4px; }
.bt-price .cols.one { grid-template-columns: 1fr; }
.hsub { margin-top: 14px; color: var(--ink-2); font-size: 15px; }
.bt-faq details p b { font-weight: 500; color: var(--ink); }
.faq-link { color: var(--clay); margin-left: 6px; }