/* ==========================================================================
   다듬은 판(2026-10-30). styles.css, soft.css 다음에 읽힙니다. 홈에만 연결.
   되돌리기: index.html <head> 의 refine.css 한 줄과 끝의 refine.js 한 줄을 지우면 이전 모습.
   ① 2장부터 내용을 가운데 1,200px 안으로(배경은 끝까지)
   ② 2장 소개: 넓은 사진 띠 → 제목과 본문 → 네 단계 가로 타임라인
   ③ 3장 행사: 왼쪽 목록 + 오른쪽 큰 미리보기(애플식)
   ④ 4장 아티스트: 세로 초상 카드 한 줄, 흑백 → 올리면 컬러
   휴대폰(860px 이하)은 바꾸지 않습니다.
   ========================================================================== */
@media (min-width: 861px) {
  /* ① a centred column; the right edge still leaves room for the page index */
  .about.page, .occ.page, .artists.page, .prices.page, .quote.page, .rep.page {
    padding-left: max(var(--m), calc((100% - 1200px) / 2));
    padding-right: max(calc(var(--m) + 56px), calc((100% - 1200px) / 2));
  }

  /* ② about */
  .about { grid-template-columns: 1fr; row-gap: 22px; align-content: center; justify-items: center; text-align: center; }
  .about .about-photo, .js .about .about-photo { grid-column: 1; width: 100%; height: clamp(150px, 22svh, 240px); min-height: 0; border-radius: var(--r-lg, 20px); clip-path: none; }
  .js .about .about-photo img { transform: none; }
  .about .about-photo img { object-position: 50% 42%; }
  .about .about-photo figcaption { padding: 40px 22px 16px; font-size: 0.9375rem; text-align: left; }
  .about .about-body { grid-column: 1; display: grid; justify-items: center; gap: 0; }
  .about .about-body h2 { font-size: clamp(2rem, 3vw, 2.75rem); }
  .about .about-text { margin-top: 14px; max-width: 38em; font-size: 1.0625rem; }
  .about .about-steps { position: relative; width: 100%; margin-top: 30px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; text-align: left; }
  .about .about-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: currentColor; opacity: .25; }
  .about .about-steps li { position: relative; padding: 26px 0 0; background: none; border: 0; font-size: 0.9375rem; line-height: 1.55; }
  .about .about-steps li::before { content: ""; position: absolute; left: 0; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper-ink); }
  .about .about-steps q { margin-bottom: 8px; padding: 0; border: 0; font-size: 0.875rem; font-style: normal; opacity: .75; }
  .about .about-steps b { font-size: 1.0625rem; font-weight: 600; margin-bottom: 4px; }

  /* ③ occasions: names on the left, one large picture with its details on the right */
  .occ .occ-cards { position: relative; display: grid; grid-template-columns: 34% 1fr; grid-auto-rows: min-content; align-content: start; gap: 6px 0; height: min(56svh, 560px); }
  .occ .occ-cards .card, .js .occ .occ-cards .card { grid-column: 1; position: static; display: block; flex: none; min-height: 0; aspect-ratio: auto; overflow: visible; clip-path: none; background: none; color: var(--ink); border-radius: var(--r-md, 14px); transition: background-color .2s; }
  .occ .occ-cards .card img { position: absolute; top: 0; right: 0; bottom: 0; left: calc(34% + 28px); width: calc(66% - 28px); height: 100%; object-fit: cover; border-radius: var(--r-lg, 20px); opacity: 0; transform: scale(1.02); transition: opacity .45s cubic-bezier(.23, 1, .32, 1), transform .8s cubic-bezier(.23, 1, .32, 1); z-index: 0; }
  .occ .occ-cards .card .card-txt { position: static; display: grid; gap: 2px; padding: 14px 18px; background: none; color: inherit; }
  .occ .occ-cards .card .card-txt b { display: flex; align-items: center; gap: 10px; font-size: 1.1875rem; font-weight: 600; color: var(--ink); }
  .occ .occ-cards .card .card-txt b::before { width: 22px; height: 22px; }
  .occ .occ-cards .card .card-txt > span:not(.card-more) { font-size: 0.875rem; color: var(--muted); padding-left: 32px; }
  .occ .occ-cards .card .card-txt em { display: none; }
  .occ .occ-cards .card::after { display: none; }  /* the colour wash belongs to the old card layout */
  /* the details of the chosen occasion sit on the picture */
  .occ .occ-cards .card .card-more { position: absolute; left: calc(34% + 28px); right: 0; bottom: 0; z-index: 1; display: grid; gap: 4px; max-height: none; margin: 0; padding: 80px 28px 26px; overflow: visible; border-radius: 0 0 var(--r-lg, 20px) var(--r-lg, 20px); color: #ecebe5; opacity: 0; pointer-events: none;
    background: linear-gradient(transparent, rgb(12 12 11 / .82)); transition: opacity .35s; }
  .occ .occ-cards .card .card-more span { font-size: 0.9375rem; color: #ecebe5; }
  .occ .occ-cards .card .card-more span:nth-child(2) { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; color: #fff; }
  .occ .occ-cards .card.is-active { background: var(--surface-2, rgb(255 255 255 / .06)); }
  .occ .occ-cards .card.is-active img, .occ .occ-cards .card.is-active .card-more { opacity: 1; transform: none; }
  .occ .occ-cards:not(.has-active) .card:first-child img, .occ .occ-cards:not(.has-active) .card:first-child .card-more { opacity: 1; transform: none; }
  .occ .occ-cards .card:not(.is-active) .card-txt b { opacity: .62; }
  .occ .occ-cards.has-active .card.is-active .card-txt b::after { content: "→"; margin-left: auto; font-weight: 400; color: var(--muted); }
  @media (hover: hover) and (pointer: fine) { .occ .occ-cards .card:hover .card-txt b { opacity: 1; } }

  /* ④ artists: one row of portrait cards, quiet until pointed at */
  .artists .artists-row { display: block; }
  .artists .artists-row .artist-list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; max-height: none; overflow: visible; }
  .artists .portrait, .artists .portrait.is-lead { display: grid; gap: 12px; align-content: start; padding: 0; border: 0; }
  .artists .portrait img, .artists-row .portrait:hover img, .artists-row .portrait:focus img, .artists .portrait.is-lead img {
    position: static; width: 100%; height: auto; aspect-ratio: 2 / 3; max-height: 46svh; object-fit: cover; opacity: 1; border-radius: var(--r-md, 14px);
    filter: saturate(.85) brightness(.9); transform: none; transition: filter .4s, transform .5s cubic-bezier(.23, 1, .32, 1); }
  .artists .portrait:hover img, .artists .portrait:focus-visible img { filter: none; transform: translateY(-3px); }
  /* the old list layout hid every other photo while one was pointed at; in the card row all photos stay */
  .artists .artists-row:has(.portrait:hover, .portrait:focus) .portrait img { opacity: 1; }
  .artists .portrait figcaption { display: grid; gap: 2px; margin: 0; grid-template-columns: 1fr; }
  .artists .portrait b { grid-row: auto; font-family: var(--serif); font-size: 1.125rem; font-weight: 600; }
  .artists .portrait figcaption span { margin: 0; font-size: 0.8125rem; color: var(--accent-hi); }
  .artists .portrait figcaption { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
  .artists .portrait:hover b, .artists .portrait:focus b { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .occ .occ-cards .card img, .artists .portrait img { transition: opacity .2s; transform: none !important; }
}

/* ---------- 메인 아티스트: 누를 수 있는 카드, 3D 기울기, 자세한 설명 창 (10/30) ---------- */
.artists .portrait[data-stages] { cursor: pointer; }
.artists .portrait img { transform-origin: 50% 50%; will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .artists .portrait { position: relative; }
  .artists .portrait img { transition: transform .35s cubic-bezier(.23, 1, .32, 1), filter .4s, box-shadow .4s; }
  .artists .portrait:hover img { filter: none; box-shadow: 0 22px 40px -18px rgb(0 0 0 / .75); }
  /* a soft light that follows the pointer over the photo */
  .artists .portrait::after { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 2 / 3; max-height: 46svh; border-radius: var(--r-md, 14px); pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgb(255 255 255 / .22), transparent 55%); }
  .artists .portrait:hover::after { opacity: 1; }
}
.artists .portrait:active img { transform: scale(.98); }

.pf-dialog { width: min(880px, calc(100vw - 32px)); max-height: min(88svh, 720px); padding: 0; border: 0; border-radius: var(--r-lg, 20px); background: var(--surface, #232220); color: var(--ink, #ecebe5); overflow: hidden; box-shadow: 0 40px 90px -30px rgb(0 0 0 / .8); }
.pf-dialog::backdrop { background: rgb(8 8 7 / .66); backdrop-filter: blur(6px); }
.pf-dialog[open] { animation: pf-in .32s cubic-bezier(.23, 1, .32, 1); }
@keyframes pf-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.pf-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-height: inherit; }
.pf-photo { margin: 0; min-height: 0; }
.pf-photo img { width: 100%; height: 100%; max-height: min(88svh, 720px); object-fit: cover; display: block; }
.pf-body { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 4vw, 44px); overflow-y: auto; }
.pf-role { margin: 0; font-size: 0.9375rem; color: var(--accent-hi, #b9cdb7); }
.pf-body h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; }
.pf-text { margin: 4px 0 8px; font-size: 1.0625rem; line-height: 1.7; }
.pf-k { margin: 6px 0 0; font-size: 0.8125rem; color: var(--muted, #a9a69d); }
.pf-stages { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pf-stages li { padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / .08); font-size: 0.875rem; }
.pf-note { margin: auto 0 0; padding-top: 12px; font-size: 0.8125rem; color: var(--muted, #a9a69d); }
.pf-body .btn { align-self: flex-start; }
.pf-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .45); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.pf-x:hover { background: rgb(0 0 0 / .7); }
@media (max-width: 860px) {
  .pf-dialog { max-height: 90svh; overflow-y: auto; }
  .pf-in { grid-template-columns: 1fr; max-height: none; }
  .pf-photo img { height: 34svh; max-height: none; }
  .pf-body { padding: 20px; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .pf-dialog[open] { animation: none; } }
.pf-career { margin: 0 0 4px; padding: 0; list-style: none; display: grid; gap: 6px; }
.pf-career li { position: relative; padding-left: 16px; font-size: 0.9375rem; line-height: 1.5; }
.pf-career li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-hi, #b9cdb7); }

/* ---------- 10/31 페이지 나누기: 위치 표시, 홈 마지막 다음 걸음 카드 ---------- */
.page-crumbs { position: relative; z-index: 2; padding: 88px max(var(--m), calc((100% - 1200px) / 2)) 0; margin-bottom: -64px; }
.page-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--muted); }
.page-crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .6; }
.page-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(127 127 127 / .5); }
.page-crumbs [aria-current] { color: var(--ink); }
.home-next { padding: clamp(56px, 7vw, 96px) max(var(--m), calc((100% - 1200px) / 2)); background: var(--bg, #1b1c1b); }
.next-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.next-cards a { display: grid; gap: 8px; height: 100%; padding: 28px 28px 30px; border-radius: var(--r-lg, 20px); background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .3s cubic-bezier(.23, 1, .32, 1), background-color .3s; }
.next-cards small { font-size: 0.8125rem; letter-spacing: .08em; color: var(--accent-hi, #b9cdb7); }
.next-cards b { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.next-cards span { font-size: 0.9375rem; color: var(--muted); }
.next-cards a::after { content: "→"; justify-self: end; margin-top: 8px; font-size: 1.25rem; color: var(--muted); transition: transform .3s; }
@media (hover: hover) and (pointer: fine) { .next-cards a:hover { transform: translateY(-4px); background: var(--surface-2, #2c2d2b); } .next-cards a:hover::after { transform: translateX(4px); } }
@media (max-width: 860px) { .next-cards { grid-template-columns: 1fr; } .page-crumbs { padding-top: 76px; margin-bottom: -40px; } }
/* 나눈 페이지의 첫 제목(h1)은 홈의 장 제목(h2)과 같은 크기 */
h1#prices-h, h1#quote-h, h1#artists-h { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(2.25rem, 4.4vw, 4rem); }
/* 10/31: 첫 화면 막은 한 번만, 휴대폰 메뉴의 '더 보기' 구분 */
:root[data-intro="seen"] .curtain { display: none; }
.sheet-list .sheet-sep { margin: 10px 10px 2px; padding-top: 10px; border-top: 1px solid rgb(127 127 127 / .25); font-size: 0.75rem; letter-spacing: .08em; color: var(--muted); }
/* 10/31: 곡 고르기 쉽게 — 추천 곡 한 번에 담기, 걸러 보기는 접어 둠 */
.rep-opt { margin-left: 12px; padding: 3px 10px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--sans, inherit); font-size: 0.875rem; font-weight: 500; vertical-align: middle; opacity: .7; }
.rep-auto { width: 100%; margin-bottom: 10px; }
.rep-more { margin: 4px 0 10px; }
.rep-more summary { cursor: pointer; padding: 8px 2px; font-size: 0.9375rem; font-weight: 500; list-style: none; }
.rep-more summary::-webkit-details-marker { display: none; }
.rep-more summary::before { content: "+"; display: inline-block; width: 1.2em; font-weight: 400; }
.rep-more[open] summary::before { content: "−"; }
/* 10/31: 견적 3단계 표시와 곡 고르기 끝 '완료' */
.q-stepno { margin: 0 0 6px; font-size: 0.875rem; letter-spacing: .06em; color: var(--muted); }
.q-stepno b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 4px; border-radius: 50%; background: var(--accent, #8fa68e); color: #111; font-size: 0.8125rem; }
.rep-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(127 127 127 / .3); }
.rep-next-n { margin: 0 auto 0 0; font-size: 0.9375rem; }
.rep-next-n b { font-size: 1.25rem; }
.rep-done { min-height: 52px; padding-inline: 28px; font-size: 1.0625rem; font-weight: 600; background: var(--accent, #8fa68e); color: #111; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .5); }
.rep-done:hover { filter: brightness(1.06); }
@media (max-width: 860px) { .rep-next { justify-content: stretch; } .rep-done { flex: 1 1 100%; } .rep-next-n { flex: 1; } }

/* 10/31: 요금 페이지 '편성별로 자세히 보기' 카드 — 무대 그림 연주자가 서는 작은 무대 */
.ens-pick { display: grid; gap: clamp(18px, 2.6svh, 30px); }
.ens-pick-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 40px; }
.ens-pick-head p { max-width: 34em; margin: 0; }
.ens-pick-head a { color: inherit; text-underline-offset: 3px; }
.ens-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ens-cards a { display: grid; gap: 4px; padding: 0 0 18px; border-radius: var(--r-lg, 20px); background: var(--surface); color: var(--ink); text-decoration: none; overflow: hidden;
  transition: transform .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s; }
.ens-cards b { padding: 14px 18px 0; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.ens-cards small { padding: 0 18px; font-size: 0.875rem; color: var(--muted); }
.ens-fig { display: flex; justify-content: center; align-items: flex-end; gap: 0; height: 132px; padding: 0 12px 10px;
  background: radial-gradient(70% 90% at 50% 100%, rgb(255 226 170 / .28), transparent 70%), linear-gradient(#2a201a, #4a3424 78%, #6a4a30 78%); }
.ens-fig img { height: calc(96px * var(--w, 1) / var(--w, 1)); width: auto; max-width: none; margin: 0 -6px; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .35));
  transform: translateY(0); transition: transform .4s cubic-bezier(.23, 1, .32, 1) calc(var(--i) * 30ms); }
.ens-fig img[src*="pf_m"], .ens-fig img:only-child { height: 92px; }
@media (hover: hover) and (pointer: fine) {
  .ens-cards a:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgb(0 0 0 / .7); }
  .ens-cards a:hover .ens-fig img { transform: translateY(-4px); }
}
@media (max-width: 1100px) { .ens-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ens-fig { height: 104px; } .ens-fig img { height: 74px; } .ens-cards b { font-size: 1.0625rem; padding: 12px 14px 0; } .ens-cards small { padding: 0 14px; font-size: 0.8125rem; } }
.ens-fig:has(img:nth-child(5)) img { height: 86px; margin: 0 -11px; }
.ens-fig:has(img:nth-child(7)) img { height: 80px; margin: 0 -14px; }
@media (max-width: 480px) { .ens-fig:has(img:nth-child(5)) img { height: 64px; margin: 0 -10px; } .ens-fig:has(img:nth-child(7)) img { height: 58px; margin: 0 -12px; } }

/* 11/9 실제 연주자 10명: 아티스트 쪽은 5칸 2줄, 홈은 7명 한 줄 + '연주자 전체 보기' */
.artists-all { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--accent-hi); white-space: nowrap; }
.artists-all::after { content: " →"; }
@media (min-width: 861px) {
  body:not([data-home]) .artists .artists-row .artist-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 18px; height: auto; align-content: start; }
  body:not([data-home]) .artists .portrait img { max-height: none; aspect-ratio: 4 / 5; object-position: 50% 22%; }
}
@media (max-width: 860px) {
  body:not([data-home]) .artists .artists-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 12px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  body:not([data-home]) .artists .portrait, body:not([data-home]) .artists .portrait:first-child { flex: none; grid-column: auto; }
  body:not([data-home]) .artists .portrait img, body:not([data-home]) .artists .portrait:first-child img { aspect-ratio: 4 / 5; height: auto; }
}
.pf-photo img { object-position: 50% 15%; }
/* 11/9 shadcn Dialog 방식: 설명 창이 열려 있는 동안 뒤 화면 스크롤 잠금 */
html:has(.pf-dialog[open]) { overflow: hidden; }
/* 11/9 설명 창: 글이 길면 오른쪽 글만 스크롤, 사진은 창 높이에 맞춤 */
@media (min-width: 861px) { .pf-body { max-height: min(88svh, 720px); } }

/* 11/9 2차 아티스트 쪽: 이끄는 사람(가로 카드) → 현악 → 피아노·관악·타악 묶음 */
.ar-roster { display: grid; gap: clamp(48px, 6vw, 84px); margin-top: clamp(24px, 4vw, 52px); }
.ar-k { display: flex; align-items: baseline; gap: 10px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 2px solid var(--surface-3); font-family: var(--serif); font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 600; letter-spacing: -0.02em; }
.ar-k small { font-family: var(--font); font-size: max(13px, 0.875rem); font-weight: 500; color: var(--muted); }
.ar-lead-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ar-page .ar-lead-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0; align-content: stretch; padding: 0; border: 0; border-radius: var(--r-lg, 20px); background: var(--surface-2); overflow: hidden; transition: background-color .25s; }
.ar-page .ar-lead-card img, .ar-page .ar-lead-card:hover img, .ar-page .ar-lead-card:focus img { position: static; width: 100%; height: 100%; min-height: 100%; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 0; opacity: 1; }
.ar-page .ar-lead-card figcaption { display: flex; flex-direction: column; justify-content: center; gap: 6px; margin: 0; padding: clamp(20px, 2.6vw, 36px); }
.ar-page .ar-lead-card figcaption b { order: 2; font-family: var(--serif); font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.ar-page .ar-lead-card figcaption > span:first-of-type { order: 1; font-size: max(13px, 0.875rem); color: var(--accent-hi); }
.ar-cur { order: 3; display: grid; gap: 6px; margin: 14px 0 0; padding: 14px 0 0; border-top: 2px solid rgb(255 255 255 / .1); list-style: none; }
.ar-cur li { font-size: max(15px, 0.9375rem); line-height: 1.5; color: var(--ink); }
.ar-open { order: 4; margin-top: 14px; font-size: max(13px, 0.875rem); font-weight: 600; color: var(--accent-hi); }
.ar-open::after { content: " →"; }
@media (hover: hover) and (pointer: fine) { .ar-page .ar-lead-card:hover { background: var(--surface-3); } }
.ar-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 18px; }
.ar-page .ar-grid .portrait { display: grid; gap: 12px; align-content: start; padding: 0; border: 0; }
.ar-page .ar-grid .portrait img { position: static; width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-md, 14px); opacity: 1; }
.ar-page .ar-grid .portrait figcaption { display: grid; gap: 2px; margin: 0; grid-template-columns: 1fr; }
.ar-page .ar-grid .portrait b { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; }
.ar-page .ar-grid .portrait figcaption span { margin: 0; font-size: max(13px, 0.875rem); color: var(--accent-hi); }
@media (max-width: 1100px) { .ar-lead-list { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .ar-page .ar-lead-card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .ar-page .ar-lead-card figcaption { padding: 18px 16px; }
  .ar-cur { margin-top: 10px; padding-top: 10px; gap: 4px; }
  .ar-cur li { font-size: max(13px, 0.8125rem); }
  .ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .ar-page .ar-grid .portrait { flex: none; }
}
.artists.ar-page { height: auto; min-height: 0; padding-bottom: clamp(72px, 9vw, 120px); }
/* 11/9 휴대폰 설명 창 = 아래에서 올라오는 시트(끌어내려 닫기). PC 는 손잡이 숨김 */
.pf-grab { display: none; }
@media (max-width: 860px) {
  .pf-dialog { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 90svh; border-radius: var(--r-lg, 20px) var(--r-lg, 20px) 0 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .pf-dialog[open] { animation: pf-sheet-in .34s cubic-bezier(.32, .72, 0, 1); }
  .pf-grab { display: block; position: sticky; top: 0; z-index: 3; height: 44px; margin-bottom: -44px; touch-action: none; cursor: grab; }
  .pf-grab::before { content: ""; position: absolute; left: 50%; top: 10px; width: 44px; height: 5px; margin-left: -22px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .28); }
  .pf-x { top: 14px; z-index: 4; }
}
@keyframes pf-sheet-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .pf-dialog[open] { animation: none; } }


/* 11/9 홈 3장(장소가 달라지면): 제목 뒤에 옅은 오선과 높은음자리표, 덜 심심하게 */
[data-home] .occ.page { isolation: isolate; overflow: hidden; }
[data-home] .occ.page::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: calc(var(--top) + 6px); height: 300px;
  background:
    url("assets/img/clef.svg") no-repeat left max(8px, calc(var(--m) - 112px)) top 0 / auto 300px,
    repeating-linear-gradient(to bottom, rgb(244 244 241 / .08) 0 1px, transparent 1px 36px) left 0 top 66px / 100% 145px no-repeat;
}
.faq-h { margin-top: 32px; font-size: 1.0625rem; font-weight: 600; }
.faq-h + .faq { margin-top: 12px; }
[data-home] .occ.page::before { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 38%, transparent 62%); mask-image: linear-gradient(90deg, #000 0, #000 38%, transparent 62%); }
@media (max-width: 860px) { [data-home] .occ.page::before { display: none; } }