/* EVENT PAGES: one page per occasion, read top to bottom (no paging) */

/* picture hero */
.sub-hero {
  position: relative; min-height: 86svh; overflow: hidden;
  display: grid; align-items: end; padding: 128px var(--m) 56px calc(var(--m) + 72px);
  background: #0d0d0d; color: #fff;
}
.sub-hero > img, .sub-hero > picture > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.66); animation: sub-in 2.6s var(--ease) both; }
@keyframes sub-in { from { transform: scale(1.14); } }
.sub-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .6) 42%, rgba(0, 0, 0, .12) 80%); /* taste-skill-ignore: neutral scrim under hero copy */ }
.sub-hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 140px; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .6), transparent); /* taste-skill-ignore: neutral scrim under the bar */ }
.sub-hero > :not(img) { position: relative; z-index: 2; }
.sub-hero .hero-side { top: 128px; bottom: 56px; }
.sub-copy { max-width: 940px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; padding: 0; margin: 0 0 20px; font-size: 0.9375rem; font-weight: 500; color: #e6e6e1; }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .6; }
.crumbs a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; }
.crumbs a:hover { text-decoration-color: #fff; }
.sub-hero h1 { font-size: clamp(2.75rem, 5.6vw, 5.25rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.04em; margin-bottom: 22px; }
.sub-hero .hero-facts { margin-top: 40px; }

/* sections */
.sec { padding: clamp(80px, 11vw, 144px) var(--m); }
.sec h2 { font-weight: 500; }
.sec-lead { margin-top: 18px; max-width: 30em; font-size: 1.125rem; color: var(--muted); }
.split { display: grid; grid-template-columns: 4fr 8fr; gap: 32px 6vw; align-items: start; }
.split > :first-child { position: sticky; top: 104px; }

/* where it fits */
.fit ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fit li { padding: 26px 26px 28px; background: var(--surface); color: var(--muted); font-size: 1.0625rem; }
.fit li b { display: block; margin-bottom: 8px; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }

/* fees */
.fees { background: var(--surface); }
.fees dl { display: grid; gap: 4px; }
.fees dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 20px; background: var(--bg); transition: transform .3s var(--ease); }
.fees dl div:hover { transform: translateX(6px); }
.fees dt { font-size: 1.0625rem; }
.fees dd { font-size: 1.375rem; font-weight: 500; white-space: nowrap; color: var(--accent-hi); font-variant-numeric: tabular-nums; }
.fees-note { margin-top: 20px; font-size: 1rem; color: var(--muted); max-width: 44em; }

/* a sample running order, set like a printed programme */
.flow { background: var(--field-1); color: var(--field-1-ink); }
.flow ::selection { background: var(--field-1-ink); color: var(--field-1); }
.flow-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 6vw; margin-bottom: 44px; }
.flow-head p { max-width: 30em; font-size: 1.0625rem; }
.flow ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.flow li { display: grid; grid-template-columns: 10rem 1fr 1.1fr; gap: 6px 36px; align-items: baseline; padding: 24px 28px; background: var(--field-2); transition: background-color .3s; }
.flow li:hover { background: var(--field-3); }
.flow time { font-size: clamp(1.75rem, 3vw, 2.75rem); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.flow li b { font-size: 1.3125rem; font-weight: 500; }
.flow li span { font-size: 1.0625rem; color: var(--field-muted); }

/* songs */
.songs ul { columns: 2; column-gap: 40px; }
.songs li { break-inside: avoid; display: grid; gap: 2px; padding: 0 0 22px; }
.songs li b { font-size: 1.1875rem; font-weight: 500; }
.songs li span { font-size: 1rem; color: var(--muted); }
.songs .btn-text { margin-top: 18px; display: inline-block; }

/* questions */
.sub-faq .faq { margin-top: 0; }

/* call to book */
.band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; padding: clamp(56px, 7vw, 88px) var(--m); background: var(--accent); color: var(--accent-ink); }
.band h2 { font-size: clamp(2rem, 3.8vw, 3.5rem); font-weight: 500; }
.band p { margin-top: 10px; font-size: 1.125rem; }
.band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.band .btn { background: var(--accent-ink); color: var(--accent); min-height: 58px; font-size: 1.0625rem; }
.band .btn:hover { background: var(--ink); color: var(--bg); }
.band-tel { font-size: 1.5rem; font-weight: 500; text-decoration: underline; text-underline-offset: 6px; font-variant-numeric: tabular-nums; }

/* the other occasions */
.more-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 36px; }
.more-row a { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #111; color: #fff; }
.more-row img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--img)); transform: scale(1.04); transition: transform 1.1s var(--ease); }
.more-row a:hover img { transform: scale(1.12); }
.more-row span { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 80px 20px 20px; background: linear-gradient(transparent, rgba(0, 0, 0, .84)); /* taste-skill-ignore: neutral scrim under caption */ }
.more-row b { font-size: 1.375rem; font-weight: 500; }
.more-row small { font-size: 1rem; color: #e2e2dd; }

@media (max-width: 1240px) {
  .more-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .sub-hero { min-height: 92svh; padding: 110px 16px 36px; }
  .sub-hero::before { background: linear-gradient(rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, .88) 72%); /* taste-skill-ignore: neutral scrim under hero copy */ }
  .sub-hero .hero-side { display: none; }
  .sub-hero h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
  .sec { padding: 72px 16px; }
  .split { grid-template-columns: 1fr; }
  .split > :first-child { position: static; }
  .fit ul { grid-template-columns: 1fr; }
  .flow-head { flex-direction: column; align-items: flex-start; }
  .flow li { grid-template-columns: 1fr; gap: 4px; padding: 20px; }
  .songs ul { columns: 1; }
  .band { padding: 56px 16px; }
  .band-actions .btn { flex: 1 1 100%; }
  .more-row { gap: 8px; }
  .more-row span { padding: 60px 14px 14px; }
  .more-row b { font-size: 1.125rem; }
}

/* 404 */
.nf-h { margin: 28px 0 0; font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; }
.nf-line { background: none; color: var(--ink); border-color: var(--ink); }
.nf-line:hover { background: var(--ink); color: var(--bg); }
.nf-events { margin-top: 40px; }

/* round 11: each event page wears its occasion colour (tokens and the serif come from styles.css) */
.sub-hero { border-bottom: 14px solid var(--ev); }
.sub-hero h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; }
.sec h2, .band h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; }
.fit li b, .flow li b, .songs li b { font-family: var(--serif); font-weight: 600; }
/* the fees chapter sits on the occasion colour under the same proscenium arch as the about chapter */
.fees { background: var(--ev); color: var(--ev-ink); border-radius: 50% 50% 0 0 / 120px 120px 0 0; }
.fees .sec-lead, .fees-note { color: var(--ev-ink); opacity: .86; }
.fees dl div { background: rgba(255, 255, 255, .22); }
.fees dd { color: var(--ev-ink); }
.band { background: var(--ev); color: var(--ev-ink); }
.band .btn { background: var(--ev-ink); color: var(--ev); }
.band-tel { color: var(--ev-ink); }

/* ---------- 시안D: guide pages — plain paragraphs, related links, guide cards ---------- */
.prose { display: grid; gap: 14px; max-width: 42em; font-size: 1.0625rem; color: var(--muted); }
.related h2 { margin-bottom: 24px; }
.rel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 8px; }
.rel-list a { display: grid; gap: 4px; min-height: 64px; align-content: center; padding: 16px 20px; background: var(--surface); color: var(--ink); font-size: 1.0625rem; font-weight: 500; transition: background-color .2s, transform .2s var(--ease); }
.rel-list a::after { content: "→"; justify-self: end; margin-top: -1.5em; color: var(--muted); }
.rel-list span { font-size: 0.9375rem; font-weight: 400; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .rel-list a:hover { background: var(--surface-2); transform: translateY(-2px); } }
.rel-cards a { min-height: 96px; padding-right: 44px; }
.foot-guide { margin-top: 8px; }
@media (max-width: 860px) {
  .rel-list { grid-template-columns: 1fr; }
  .fit li { padding: 18px 18px 20px; font-size: 1rem; }
  .fit li b { font-size: 1.1875rem; }
}
.fees-note a, .prose a { text-decoration: underline; text-underline-offset: 3px; color: inherit; }
/* arrow sits in its own lane at the right edge so it never covers the text */
.rel-list a { position: relative; padding-right: 52px; }
.rel-list a::after { position: absolute; right: 20px; top: 50%; margin: 0; transform: translateY(-50%); transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .rel-list a:hover::after { transform: translate(3px, -50%); } }

/* ---------- 시안D v10: mail forms and printable tables on guide pages ---------- */
.sub-form { display: grid; gap: 10px; max-width: 34rem; }
.sub-form label { display: grid; gap: 4px; font-size: 0.9375rem; font-weight: 500; }
.sub-form input, .sub-form select, .sub-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); font-size: 1rem; }
.sub-form input:focus-visible, .sub-form select:focus-visible, .sub-form textarea:focus-visible { outline: 3px solid var(--accent-hi); outline-offset: 0; }
.sub-form .consent { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; font-weight: 400; line-height: 1.5; }
.sub-form .consent input { width: 18px; min-height: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.sub-form .consent a { text-decoration: underline; text-underline-offset: 3px; }
.sub-form .btn { justify-self: start; margin-top: 6px; }
.plan-head { display: grid; gap: 12px; margin-bottom: 20px; }
.plan-head p { max-width: 40em; color: var(--muted); }
.plan-head .btn { justify-self: start; }
.plan-scroll { overflow-x: auto; }
.plan-table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 1rem; }
.plan-table th, .plan-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.plan-table th { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.plan-table td:first-child { white-space: nowrap; font-weight: 600; }
@media (max-width: 860px) { .plan-table { font-size: 0.875rem; } .plan-table th, .plan-table td { padding: 10px; } }
@media print {
  .bar, .sheet, .dock, .sub-hero img, .hero-side, .hero-cta, .band, .related, .foot, .sub-faq, .plan-head .btn, .crumbs { display: none !important; }
  body { background: #fff; color: #000; }
  .sub-hero { min-height: 0; border: 0; padding: 0; }
  .sub-copy, .sec { padding: 12px 0 !important; color: #000; }
  .plan-table th, .plan-table td { border-color: #999; color: #000; }
}

/* phone: each table row becomes a small card with its column names */
@media (max-width: 860px) {
  .plan-table, .plan-table tbody, .plan-table tr, .plan-table td { display: block; min-width: 0; }
  .plan-table thead { display: none; }
  .plan-table tr { padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
  .plan-table td { padding: 2px 0; border: 0; white-space: normal; }
  .plan-table td + td::before { content: attr(data-label); display: block; margin-top: 6px; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
}

/* 10/30: 홈과 같은 가운데 1,200px 칸(데스크톱). 배경은 끝까지, 내용만 가운데. 되돌리기: 이 블록 삭제 */
@media (min-width: 861px) {
  .sub-hero, main > .sec, main > .band {
    padding-left: max(var(--m), calc((100% - 1200px) / 2));
    padding-right: max(var(--m), calc((100% - 1200px) / 2));
  }
}
/* 10/30 통일: 홈과 같은 글자 크기와 간격 리듬. 되돌리기: 이 블록 삭제 */
.sec { padding-top: clamp(64px, 7.5vw, 108px); padding-bottom: clamp(64px, 7.5vw, 108px); }
.sec-lead, .ss-head p { font-size: 1.0625rem; line-height: 1.65; }

/* 11/1 문의서 보내기 결과(서버 전송, 안 되면 메일 앱·내용 복사) */
.send-status { display: grid; gap: 8px; font-size: 0.9375rem; line-height: 1.6; }
.send-status:empty { display: none; }
.send-status p { margin: 0; }
.send-fallback { display: flex; flex-wrap: wrap; gap: 8px; }
.send-fallback .btn { min-height: 44px; background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.send-hint { font-size: 0.875rem; opacity: .8; }
button[type="submit"]:disabled { opacity: .6; cursor: progress; }

/* 11/1 '…전체 보기' 연결과 '피날레가 지키는 것' */
.sec-more { margin: 20px 0 0; font-size: 0.9375rem; font-weight: 500; }
.split > .sec-more { grid-column: 2; margin-top: 0; }
.sec-more a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 5px; }
.sec-more a::after { content: "→"; text-decoration: none; transition: transform .25s; }
@media (hover: hover) and (pointer: fine) { .sec-more a:hover::after { transform: translateX(4px); } }
@media (max-width: 860px) { .split > .sec-more { grid-column: auto; } }
.attach-quote { margin: 4px 0 0; font-size: 0.9375rem; }
.attach-quote .btn { min-height: 44px; padding: 0 18px; background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; white-space: normal; text-align: left; }
.attach-quote a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--muted); }

/* ---------- 11/2 회사 소개 v2: 밝은 종이 바탕, 사진·조명 없이 글자와 가는 선으로(무드팩토리 소개 쪽 구성) ---------- */
[data-about] { --ab-bg: #f4f1ea; --ab-ink: #1d1c19; --ab-muted: #5b5850; --ab-line: rgb(29 28 25 / .14); --ab-accent: #3d5a3c; }
[data-about] main { background: var(--ab-bg); color: var(--ab-ink); }
[data-about] main > .sec::after, [data-about] main > .band::after, [data-about] .ab-sec::after { display: none; }
.ab-head { max-width: 68rem; margin: 0 auto; padding: calc(96px + env(safe-area-inset-top, 0px)) var(--m) 56px; }
.ab-head .crumbs { color: var(--ab-muted); }
.ab-head .crumbs a { color: inherit; }
.ab-eyebrow { margin: 28px 0 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ab-accent); }
.ab-head h1 { margin: 14px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(2.5rem, 6.4vw, 4.75rem); line-height: 1.06; letter-spacing: -0.03em; color: var(--ab-ink); }
.ab-lead { max-width: 46rem; margin: 26px 0 0; font-size: clamp(1.1875rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.6; word-break: keep-all; }
.ab-sub { max-width: 40rem; margin: 16px 0 0; font-size: 1rem; line-height: 1.85; color: var(--ab-muted); word-break: keep-all; }
.ab-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.ab-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--ab-line); border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--ab-muted); text-decoration: none; transition: border-color .2s, color .2s; }
.ab-jump a:hover { border-color: var(--ab-accent); color: var(--ab-accent); }
.ab { max-width: 68rem; margin: 0 auto; padding: 0 var(--m) 40px; }
.ab-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 64px; padding: 64px 0; border-top: 1px solid var(--ab-line); scroll-margin-top: 88px; }
.ab-k { margin: 0 0 14px; font-size: 0.8125rem; font-weight: 600; letter-spacing: .18em; color: var(--ab-accent); }
.ab-l h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.375rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ab-ink); word-break: keep-all; }
.ab-tag { margin: 12px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ab-muted); word-break: keep-all; }
.ab-r { max-width: 40rem; font-size: 1rem; line-height: 1.9; word-break: keep-all; }
.ab-r > p { margin: 0 0 14px; }
.ab-big { font-family: var(--serif); font-size: 1.5rem !important; font-weight: 600; line-height: 1.4; color: var(--ab-ink); }
.ab-check { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--ab-line); }
.ab-check li { display: flex; gap: 10px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--ab-line); font-size: 0.9375rem; font-weight: 500; }
.ab-check li::before { content: "✓"; color: var(--ab-accent); font-weight: 700; }
.ab-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; font-size: 0.9375rem; font-weight: 600; color: var(--ab-accent); text-decoration: none; }
.ab-more::after { content: "→"; transition: transform .25s; }
.ab-more:hover::after { transform: translateX(4px); }
.ab-ceo { margin: 0 0 22px; padding: 22px 24px; border-left: 3px solid var(--ab-accent); background: rgb(255 255 255 / .55); }
.ab-ceo figcaption { display: flex; align-items: baseline; gap: 10px; }
.ab-ceo b { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.ab-ceo figcaption span { font-size: 0.875rem; color: var(--ab-muted); }
.ab-ceo ul { margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.8; }
.ab-ceo li::before { content: "— "; color: var(--ab-muted); }
.ab-qa { display: grid; gap: 0; margin: 0; }
.ab-q { padding: 18px 0; border-bottom: 1px solid var(--ab-line); }
.ab-q:first-child { border-top: 1px solid var(--ab-line); }
.ab-q dt { font-weight: 700; font-size: 1.0625rem; color: var(--ab-ink); }
.ab-q dd { margin: 6px 0 0; color: var(--ab-muted); font-size: 0.9375rem; line-height: 1.8; }
.ab-wide { grid-template-columns: 1fr; }
.ab-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ab-ink); }
.ab-steps li { padding: 18px 18px 0 0; }
.ab-steps span { font-size: 0.8125rem; font-weight: 600; letter-spacing: .14em; color: var(--ab-accent); }
.ab-steps b { display: block; margin-top: 8px; font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; }
.ab-steps p { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.75; color: var(--ab-muted); word-break: keep-all; }
.ab-info { margin: 0; }
.ab-info div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ab-line); }
.ab-info div:first-child { border-top: 1px solid var(--ab-line); }
.ab-info dt { font-size: 0.875rem; color: var(--ab-muted); }
.ab-info dd { margin: 0; font-weight: 500; }
.ab-info a, .ab-r a:not(.ab-more) { color: var(--ab-accent); }
[data-about] .related, [data-about] .band { background: transparent; }
@media (max-width: 860px) {
  .ab-head { padding: 88px 16px 40px; }
  .ab { padding: 0 16px 24px; }
  .ab-sec { grid-template-columns: 1fr; padding: 44px 0; }
  .ab-steps { grid-template-columns: 1fr; border-top: 0; }
  .ab-steps li { padding: 16px 0; border-top: 1px solid var(--ab-line); }
  .ab-info div { grid-template-columns: 7rem 1fr; }
}
.ab-head .crumbs, .ab-head .crumbs a, .ab-head .crumbs li { color: var(--ab-muted) !important; opacity: 1 !important; }

/* ---------- 11/2 시안 B 적용: 행사·편성 쪽(body[data-look="event"]) — 첫 장 무대 사진 유지, 본문 조명 끄고 카드 칸을 가는 선으로 ---------- */
[data-look="event"] { --pl: color-mix(in srgb, currentColor 16%, transparent); }
[data-look="event"] main > .sec::after, [data-look="event"] main > .band::after { display: none; }
[data-look="event"] .fit ul { gap: 0 40px; }
[data-look="event"] .fit li { background: none; border-radius: 0; padding: 18px 0 20px; border-top: 1px solid var(--pl); box-shadow: none; }
[data-look="event"] .fit li b { font-size: 1.1875rem; }
[data-look="event"] .fees dl { gap: 0; }
[data-look="event"] .fees dl div { background: none; border-radius: 0; padding: 14px 0; border-bottom: 1px solid var(--pl); }
[data-look="event"] .fees dl div:first-child { border-top: 1px solid var(--pl); }
[data-look="event"] .fees dl div:hover { transform: none; }

/* ---------- 11/2 편성과 요금 아래쪽: '요금 안내' 한 구역 세 열(가는 선) ---------- */
.pn { --pl: color-mix(in srgb, currentColor 16%, transparent); }
.pn::after { display: none; }
.pn-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 48px; flex-wrap: wrap; margin-bottom: 36px; }
.pn-head h2 { margin: 0; font-family: var(--serif); font-weight: 600; }
.pn-head p { margin: 0; color: var(--muted); max-width: 30rem; }
.pn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.pn-col h3 { margin: 0; padding-bottom: 14px; border-bottom: 1px solid currentColor; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.pn-check { list-style: none; margin: 0; padding: 0; }
.pn-check li { display: grid; gap: 2px; padding: 13px 0 13px 24px; border-bottom: 1px solid var(--pl); position: relative; }
.pn-check li::before { content: "✓"; position: absolute; left: 0; top: 13px; color: var(--accent-hi); font-weight: 700; }
.pn-check b { font-weight: 600; }
.pn-check span, .pn-rows dd { color: var(--muted); font-size: 0.9375rem; line-height: 1.65; }
.pn-rows { margin: 0; }
.pn-rows div { padding: 13px 0; border-bottom: 1px solid var(--pl); }
.pn-rows dt { font-weight: 600; }
.pn-rows dd { margin: 3px 0 0; }
.pn-price em { display: block; font-style: normal; font-weight: 600; color: var(--accent-hi); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
@media (max-width: 860px) { .pn-grid { grid-template-columns: 1fr; gap: 32px; } .pn-head { margin-bottom: 24px; } }

/* ---------- 11/2 기능 쪽(행사별 공연, 편성 모음, 섭외 문의, 레퍼토리, 안내 글 모음, 자주 묻는 질문) 첫 장을 낮게: 고르고 쓰는 부분이 첫 화면에 보이게 ---------- */
[data-hero="compact"] .sub-hero { min-height: clamp(360px, 50svh, 500px); padding-top: 112px; padding-bottom: 40px; }
[data-hero="compact"] .sub-hero .hero-side { display: none; }
[data-hero="compact"] .sub-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }
[data-hero="compact"] .hero-facts { margin-top: 18px; }
@media (max-width: 860px) { [data-hero="compact"] .sub-hero { min-height: 0; padding: 96px 16px 28px; } }

/* 11/2 요금 쪽: 첫 장 위 여백 줄이기, 행사별 추천 구성 목록 */
body:not([data-home]) .prices.page { min-height: 0; padding-top: 24px; }
.pp { --pl: color-mix(in srgb, currentColor 16%, transparent); }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.pp-list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--pl); color: inherit; text-decoration: none; }
.pp-list span { grid-column: 1 / -1; font-size: 0.875rem; color: var(--muted); }
.pp-list b { font-family: var(--serif); font-weight: 600; font-size: 1.125rem; }
.pp-list em { font-style: normal; font-weight: 600; color: var(--accent-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-list a:hover b { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 860px) { .pp-list { grid-template-columns: 1fr; } }
/* 11/2 요금 첫 장: 아래 내용 바로가기 줄 */
.pr-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pr-jump a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: inherit; text-decoration: none; transition: border-color .2s, background-color .2s; }
.pr-jump a::after { content: "↓"; opacity: .7; }
.pr-jump a:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }
.ticket img[data-ph] { object-fit: cover; object-position: 60% 50%; }
.ticket img[data-ph="p-piano"] { object-position: 30% 50%; }

/* ---------- 11/2 '함께 보면 좋은 글' 등 목록: 단추 칸 대신 읽기 쉬운 줄(제목+화살표), 전 쪽 공통 ---------- */
.rel-list { gap: 0 40px; }
.rel-list a { background: none !important; min-height: 0; padding: 16px 40px 16px 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 0; font-family: var(--serif); font-weight: 600; }
.rel-list a::after { right: 4px; }
@media (hover: hover) and (pointer: fine) { .rel-list a:hover { transform: none; text-decoration: underline; text-underline-offset: 6px; } .rel-list a:hover::after { transform: translate(4px, -50%); } }

/* ---------- 11/2 안내 글 모음: 주제별 읽기 목록 ---------- */
.gl { --pl: color-mix(in srgb, currentColor 16%, transparent); }
.gl-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 56px; padding: 36px 0; border-top: 1px solid currentColor; }
.gl-group:first-of-type { border-top-width: 2px; }
.gl-head h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; }
.gl-head p { margin: 6px 0 0; color: var(--muted); }
.gl-list { list-style: none; margin: 0; padding: 0; }
.gl-list a { position: relative; display: grid; gap: 4px; padding: 16px 40px 16px 0; border-bottom: 1px solid var(--pl); color: inherit; text-decoration: none; }
.gl-list li:first-child a { padding-top: 4px; }
.gl-list b { font-size: 1.1875rem; font-weight: 600; }
.gl-list span { color: var(--muted); font-size: 0.9375rem; }
.gl-list a::after { content: "→"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--muted); transition: transform .2s; }
@media (hover: hover) and (pointer: fine) { .gl-list a:hover b { text-decoration: underline; text-underline-offset: 6px; } .gl-list a:hover::after { transform: translate(4px, -50%); } }
@media (max-width: 860px) { .gl-group { grid-template-columns: 1fr; padding: 28px 0; } }

/* ---------- 11/2 정보형 쪽(안내 글·진행 과정·자주 묻는 질문·개인정보·후기·영문): 시안 A′ — 사이트 기본 색 그대로, 사진 없는 글자 첫 장 + 가는 선 ---------- */
[data-look="guide"] { --pl: color-mix(in srgb, var(--ink) 14%, transparent); }
[data-look="guide"] main > .sec::after, [data-look="guide"] main > .band::after { display: none; }
[data-look="guide"] .sub-hero { min-height: 0; background: var(--bg); color: var(--ink); padding: 124px max(var(--m), calc((100% - 68rem) / 2)) 44px; border-bottom: 1px solid var(--pl); }
[data-look="guide"] .sub-hero > img, [data-look="guide"] .sub-hero > picture > img, [data-look="guide"] .sub-hero .hero-side, [data-look="guide"] .sub-hero::before, [data-look="guide"] .sub-hero::after { display: none; }
[data-look="guide"] .sub-hero h1 { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: clamp(2.25rem, 5vw, 3.75rem); }
[data-look="guide"] .sub-hero .hero-lede { color: var(--muted); max-width: 44rem; }
[data-look="guide"] .sub-hero .crumbs, [data-look="guide"] .sub-hero .crumbs a, [data-look="guide"] .sub-hero .crumbs li { color: var(--muted) !important; opacity: 1; }
[data-look="guide"] .hero-facts { border-top: 1px solid var(--pl); padding-top: 16px; }
[data-look="guide"] .hero-facts dt { color: var(--muted); } [data-look="guide"] .hero-facts dd { color: var(--ink); }
[data-look="guide"] .sub-hero .btn-line { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: transparent; }
[data-look="guide"] .sec { border-top: 1px solid var(--pl); }
[data-look="guide"] .sec h2 { font-family: var(--serif); font-weight: 600; }
[data-look="guide"] .fit ul { gap: 0 40px; }
[data-look="guide"] .fit li { background: none; border-radius: 0; padding: 18px 0 20px; border-top: 1px solid var(--pl); }
[data-look="guide"] .fit li b { font-size: 1.1875rem; }
[data-look="guide"] .fees dl { gap: 0; }
[data-look="guide"] .fees dl div { background: none; padding: 14px 0; border-bottom: 1px solid var(--pl); }
[data-look="guide"] .fees dl div:first-child { border-top: 1px solid var(--pl); }
[data-look="guide"] .fees dl div:hover { transform: none; }
[data-look="guide"] .bar.is-over { background: var(--bg); color: var(--ink); }
/* 11/2 편성 첫 장 사진: 연주자 얼굴이 잘리지 않게 위쪽을 기준으로 */
.sub-hero > img[src*="/ens-"], .sub-hero > picture > img[src*="/ens-"]{ object-position: 50% 22%; }
.ticket img[data-ph="p-str"] { object-position: 90% 40%; }
.rel-list a { font-family: inherit; font-weight: 600; }  /* 11/2 명조 굵은 글꼴을 이 목록 때문에 따로 받지 않게 */
.sub-hero > img[src*="ens-vocal-recital"], .sub-hero > picture > img[src*="ens-vocal-recital"]{ object-position: 64% 58%; }
.ticket img[data-ph="p-vocal"] { object-position: 66% 55%; }

/* 11/2 밤: 요금 첫 장 — 기능을 위로, 아래에 약속 띠와 '아래로 이어짐' 안내 */
body:not([data-home]) .prices.page { padding-top: 36px; padding-bottom: 32px; }
body:not([data-home]) .prices .prices-head, body:not([data-home]) .prices h1 { margin-top: 0; }
.pr-strip { list-style: none; margin: 22px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 32px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.pr-strip li { display: grid; gap: 2px; }
.pr-strip b { font-weight: 600; }
.pr-strip span { font-size: 0.875rem; color: var(--muted); }
.pr-more { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px auto 0; padding: 12px 20px; width: fit-content; max-width: 100%; border-radius: 999px; background: color-mix(in srgb, currentColor 9%, transparent); color: inherit; text-decoration: none; font-size: 0.9375rem; font-weight: 600; }
.pr-more i { font-style: normal; display: inline-block; animation: pr-bob 1.6s ease-in-out infinite; }
@keyframes pr-bob { 50% { transform: translateY(4px); } }
:root[data-motion="less"] .pr-more i { animation: none; }
@media (prefers-reduced-motion: reduce) { .pr-more i { animation: none; } }
@media (max-width: 860px) { .pr-strip { grid-template-columns: 1fr 1fr; } .pr-more span { text-align: center; } }
.sub-hero > img[src*="/as-"], .sub-hero > picture > img[src*="/as-"]{ object-position: 50% 45%; }
[data-hero="compact"] .sub-hero { min-height: clamp(520px, 60svh, 620px); }
@media (max-width: 860px) { [data-hero="compact"] .sub-hero { min-height: 0; } }
@media (min-width: 861px) { [data-hero="compact"] .sub-hero { min-height: 640px; } }
.ticket img[data-ph="p-str"] { object-position: 22% 85%; }
.ticket img[data-ph="p-winds"], .ticket img[data-ph="p-orch"], .ticket img[data-ph="p-joint"] { object-position: 50% 70%; }
.ticket img[data-ph="p-piano"] { object-position: 32% 50%; }

/* 11/3 페이지 안 이동 때 제목이 고정 머리글에 가리지 않게 */
.sec h2[id], section[aria-labelledby] > div > h2[id], section[aria-labelledby] > h2[id] { scroll-margin-top: 104px; }
@media (max-width: 760px) { .sec h2[id], section[aria-labelledby] > div > h2[id], section[aria-labelledby] > h2[id] { scroll-margin-top: 80px; } }

/* ==========================================================================
   11/3 하위 행사 쪽(patch_1103_subhead.py): 상위 메뉴 표시 · 형제 탭 줄 · 낮은 첫 장(사진 없음)
   ========================================================================== */
:root { --bar-h: 68px; --sibs-h: 56px; }
@media (max-width: 860px) { :root { --bar-h: 64px; --sibs-h: 52px; } }
.bar-links a.is-parent { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 9px; }

.sibs { position: sticky; top: var(--bar-h); z-index: 30; display: flex; align-items: stretch; margin-top: var(--bar-h); padding-left: var(--m); background: #232322; }
:root[data-theme="light"] .sibs { background: #ecebe6; }
.sibs-in { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; height: var(--sibs-h); padding-right: var(--m); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.sibs-in::-webkit-scrollbar { display: none; }
.sibs a { position: relative; display: flex; align-items: center; padding: 0 14px; white-space: nowrap; font-size: 0.9375rem; font-weight: 500; color: rgb(255 255 255 / .74); transition: color .2s; }
:root[data-theme="light"] .sibs a { color: rgb(20 21 20 / .72); }  /* 11/4 글자 대비 4.5:1 이상 */
.sibs a:hover { color: var(--ink); }
.sibs a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.sibs a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--ev, var(--accent)); }
.sibs .sibs-up { flex: 0 0 auto; padding: 0 22px 0 0; margin-right: 8px; color: var(--ink); font-weight: 600; }
.sibs .sibs-up i { font-style: normal; margin-right: 8px; transition: transform .25s var(--ease); }
.sibs .sibs-up:hover i { transform: translateX(-4px); }

.sub-head { background: var(--ev); color: var(--ev-ink); }
.sh-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 18rem); column-gap: clamp(36px, 5vw, 96px); align-items: center;
  padding: clamp(40px, 4.4vw, 60px) max(var(--m), calc((100vw - 1200px) / 2)) clamp(36px, 3.6vw, 52px); }
.sh-field ::selection { background: var(--ev-ink); color: var(--ev); }
.sh-field > h1, .sh-field > .hero-lede, .sh-field > .hero-cta { grid-column: 1; }
.sub-head h1 { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(2.5rem, 4.2vw, 4rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: var(--ev-ink); }
.sub-head .hero-lede { max-width: 38em; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ev-ink); }
.sub-head .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.sub-head .hero-cta .btn { background: var(--ev-ink); color: var(--ev); }
.sub-head .hero-cta .btn:hover { background: #000; }
.sub-head .hero-cta .btn-line { background: transparent; color: var(--ev-ink); border: 2px solid var(--ev-ink); box-shadow: none; }
.sub-head .hero-cta .btn-line:hover { background: var(--ev-ink); color: var(--ev); }
.sub-head .hero-facts { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0; padding: 26px 28px; border: 0; background: rgb(20 21 20 / .07); border-radius: var(--r-lg, 20px); }
.sub-head .hero-facts div { display: flex; flex-direction: column-reverse; gap: 4px; }
.sub-head .hero-facts dd { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--ev-ink); font-variant-numeric: tabular-nums; }
.sub-head .hero-facts dt { font-size: 0.875rem; font-weight: 500; color: var(--ev-ink); opacity: .78; }
/* 본문을 더 위로: 첫 구역 위 여백 줄임 */
.sub-head + .sec { padding-top: clamp(48px, 5vw, 72px); }
.sub-head + .sec .fit li { border-radius: var(--r-lg, 20px); }
/* 탭 줄이 따라오므로 안쪽 이동 때 그만큼 더 띄움 */
.sibs ~ main h2[id] { scroll-margin-top: calc(var(--bar-h) + var(--sibs-h) + 24px); }

@media (max-width: 860px) {
  .sibs a { padding: 0 12px; font-size: 0.875rem; }
  .sibs .sibs-up { padding-right: 16px; margin-right: 4px; }
  .sh-field { grid-template-columns: 1fr; padding: 26px var(--m) 28px; }
  .sub-head h1 { font-size: clamp(1.875rem, 8vw, 2.25rem); margin-bottom: 12px; }
  .sub-head .hero-lede { font-size: 0.9375rem; line-height: 1.55; }
  .sub-head .hero-cta { margin-top: 18px; }
  .sub-head .hero-cta .btn { flex: 1 1 0; min-height: 46px; }
  .sub-head .hero-facts { grid-column: 1; grid-row: auto; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px 16px; margin-top: 20px; padding: 16px 18px; border-radius: var(--r-md, 14px); }
  .sub-head .hero-facts div:first-child { grid-column: 1 / -1; }
  .sub-head .hero-facts dd { font-size: 1.125rem; }
  .sub-head .hero-facts dt { font-size: 0.8125rem; }
  .sub-head + .sec { padding-top: 44px; }
}
@media print { .sibs { display: none !important; } .sub-head { background: none; } }

/* 11/4 얇은 구분선 대신 한 덩어리 묶음 목록: 연한 면 안을 2px 바탕색 틈으로 나눔 */
:is([data-look="event"], [data-look="guide"]) .fit ul { gap: 2px; background: var(--bg); border-radius: var(--r-lg, 20px); overflow: hidden; }
:is([data-look="event"], [data-look="guide"]) .fit li { border-top: 0; border-radius: 0; padding: 22px 24px 24px; background: var(--surface); }

/* 11/6: 나뉜 구역 제목이 넓은 PC에서 3줄로 넘어가던 것 */
@media (min-width: 861px) { .split h2 { font-size: clamp(2rem, 3.4vw, 3.5rem); word-break: keep-all; } }

/* 11/9 공연/연주: 행사 5묶음 목록(3차) — 묶음마다 서로 확실히 다른 짙은 행사색 면 + 그 행사의 실제 사진, 항목은 밝은 칸 */
.related.occ-light { background: #eeede9; color: #1d1c19; --ink: #1d1c19; --muted: #57544c; }
.related.occ-light h2 { color: #1d1c19; }
/* 11/9 5차(사용자): 묶음별 색·색 띠·금액 없음 — 모든 묶음 같은 숯색 면, 구분은 사진과 제목으로 */
.occ-g { --g-bg: #262725; --g-tile: #31322f; --g-ink: #f4f4f1; --g-sub: #cfcec7; --g-arrow: #f4f4f1; }
.occ-groups { display: grid; gap: 20px; }
.occ-g { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); border-radius: var(--r-lg, 20px); background: var(--g-bg); color: var(--g-ink); overflow: hidden; }
.occ-g-head { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; padding: 24px 26px; isolation: isolate; }
.occ-g-head img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.occ-g-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / .42); }
.occ-g-head h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.occ-g-head p { margin: 6px 0 0; font-size: max(15px, 0.9375rem); font-weight: 600; color: #fff; }
.occ-g-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: center; margin: 0; padding: 20px; list-style: none; }
.occ-g-list li { display: grid; }
.occ-g-list a { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 48px 18px 20px; border-radius: var(--r-md, 14px); background: var(--g-tile); color: var(--g-ink); text-decoration: none; transition: background-color .2s, transform .2s var(--ease); }
.occ-g-list a b { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; }
.occ-g-list a span { font-size: 1rem; line-height: 1.5; color: var(--g-sub); }
.occ-g-list a::after { content: "→"; position: absolute; right: 20px; top: 18px; font-size: 1.1875rem; color: var(--g-arrow); transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .occ-g-list a:hover { background: #3b3c38; } .occ-g-list a:hover::after { transform: translateX(4px); } }
.occ-g-list a:active { transform: scale(.985); }
@media (max-width: 1000px) { .occ-g { grid-template-columns: 1fr; } .occ-g-head { min-height: 150px; } }
@media (max-width: 860px) { .occ-groups { gap: 14px; } .occ-g-head { min-height: 128px; padding: 18px; } .occ-g-list { grid-template-columns: 1fr; padding: 12px; gap: 8px; } .occ-g-list a { padding: 16px 44px 16px 16px; } .occ-g-list a::after { right: 16px; top: 16px; } }

/* 11/9 강연과 렉처 콘서트 쪽: 주제 안 6개 카드(선 없이 면과 간격으로) */
.lec-forms li { scroll-margin-top: 150px; }
.lec-topics h2 { margin-bottom: 0; }
.lec-topic-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.lec-topic-list li { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: var(--r-lg, 20px); background: var(--surface); }
.lec-topic-list b { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.lec-topic-list > li > span { font-size: 1rem; line-height: 1.6; color: var(--ink); }
.lec-topic-list dl { display: grid; gap: 10px; margin: auto 0 0; padding-top: 14px; }
.lec-topic-list dl div { display: grid; gap: 2px; }
.lec-topic-list dt { font-size: max(13px, 0.8125rem); color: var(--muted); }
.lec-topic-list dd { margin: 0; font-size: max(15px, 0.9375rem); color: var(--ink); }
@media (max-width: 1100px) { .lec-topic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .lec-topic-list { grid-template-columns: 1fr; } .lec-topic-list li { padding: 22px 18px; } }

/* 11/9 요금 쪽: 다른 하위 쪽과 같은 위 여백(제목이 경로·탭 사이에 끼지 않게), 머리와 탭 사이·구역 아래 여백 */
body:not([data-home]) .prices.page { padding-top: 126px; padding-bottom: 72px; }
body:not([data-home]) .prices .tabs { margin-top: 28px; }
@media (max-width: 860px) { body:not([data-home]) .prices.page { padding-top: 96px; padding-bottom: 48px; } body:not([data-home]) .prices .tabs { margin-top: 20px; } }
body:not([data-home]) .prices .pr-jump { margin-top: 18px; }
/* 11/10 자주 묻는 질문 주제 묶음(patch_1110_cta_faq.py) */
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.faq-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); color: var(--ink); text-decoration: none; font-size: 0.9375rem; transition: background .15s, transform .12s; }
.faq-jump a:hover { background: var(--surface-3); }
.faq-jump a:active { transform: scale(.96); }
.faq-groups .faq-h { margin: 40px 0 0; font-size: 1.125rem; font-weight: 600; scroll-margin-top: 96px; }
.faq-groups .faq-h:first-child { margin-top: 0; }
.faq-groups .faq-h small { margin-left: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--accent-hi); }
.faq-groups .faq-h + .faq { margin-top: 12px; }
@media (min-width: 861px) { .sub-faq.split > div:first-child:has(.faq-jump) { position: sticky; top: 96px; align-self: start; } .faq-jump { flex-direction: column; align-items: flex-start; } }