/* TWO TIDES(주수진×황예은 12/27) — 짜임은 티모시 상세 그대로, 색만 대표 지정 참고 사이트의 키비주얼 팔레트(대표 10-28 18:5x).
   먹 #191a18 · 미색 #eeeee7 · 회녹 #a3a49a · 라임 #d7e78b · 어두운 선 #41423b. 밝은 면 위 강조 글자는 라임이 안 읽혀서 같은 계열의 짙은 올리브(#5d6935). */
:root{--ink:#191a18;--mute:#62655a;--line:#d3d4c8;--wine:#5d6935;--wine2:#5d6935;--accent:#191a18;--cream:#e4e4da;--cream2:#e4e4da;
  --tt-paper:#eeeee7;--tt-card:#f7f7f2;--tt-dark:#191a18;--tt-dark-line:#41423b;--tt-lime:#d7e78b;--tt-on-dark:#eeeee7;--tt-on-dark-mute:#b9baae}
html,body{background:var(--tt-paper)}
body{color:var(--ink)}
.detail-site-header,.strip,.art,.notice,.alert,footer,.detail-open #alert,.detail-open .strip,.detail-open #art,section.s{background:var(--tt-paper)}
.dots,.dots a span{background:var(--tt-card)}

/* 상단 띠·버튼·하단 고정 바: 먹 바탕 + 라임 */
.bar{background:var(--tt-dark);color:var(--tt-on-dark);border-bottom:1px solid var(--tt-dark-line)}
.bar .bar-cd b{color:var(--tt-lime)}.bar .bar-cd small{color:var(--tt-on-dark-mute);opacity:1}
.btn,.btn:hover,.sticky .btn,.sticky .btn:hover,.detail-open .sticky .btn{background:var(--tt-dark);color:var(--tt-lime);border:1px solid var(--tt-dark)}
.btn:hover{background:#000}
a.btn:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--wine);outline-offset:3px}
.sticky,.detail-open .sticky{background:var(--tt-dark);color:var(--tt-on-dark);border-top:0}
.detail-open .sticky .sticky-date{color:var(--tt-on-dark-mute)}
.detail-open .sticky-copy b:last-child{color:var(--tt-lime)}
.sticky .btn,.sticky .btn:hover,.detail-open .sticky .btn{background:var(--tt-lime);color:var(--tt-dark);border-color:var(--tt-lime)}
footer{color:var(--mute)}

/* 히어로: 포스터를 16:9로 재조합한 사진(두 얼굴 전부, 가운데 검은 띠를 넓힘 — 대표 10-29) + 키비주얼 글자는 그 띠 안에(얼굴을 가리지 않게).
   띠 = 사진 가로 36.1%~79.8%. 휴대폰은 사진을 자르지 않고 글자를 사진 아래로. */
.tt-hero,.tt-hero .performance-media{background:var(--tt-dark)}
.tt-hero .performance-cover{transform:none;object-fit:cover;object-position:50% 50%}
.tt-hero .performance-caption{inset:auto 20.2% 0 36.1%;padding:0 clamp(16px,2vw,32px) clamp(24px,4vw,56px);background:none}
.tt-caption .tt-kv{margin:0;font:800 clamp(40px,6.2vw,92px)/.92 'DM Sans',Pretendard,sans-serif;letter-spacing:-.045em;color:var(--tt-on-dark)}
.tt-caption .tt-kv span{display:inline-block;margin-left:.08em;font-size:.42em;vertical-align:.95em;color:var(--tt-lime)}
.tt-caption>span{display:block;margin-top:14px;font-size:clamp(17px,1.8vw,24px);font-weight:700;opacity:1;color:var(--tt-on-dark)}
@media(max-width:820px){.tt-hero .performance-media{aspect-ratio:auto}
  .tt-hero .performance-cover{position:static;display:block;height:auto;aspect-ratio:16/9}
  .tt-hero .performance-caption{position:static;padding:20px 20px 28px;background:var(--tt-dark)}
  .tt-caption .tt-kv{font-size:clamp(40px,12vw,64px)}}

/* 공연 정보 포스터: 티모시 틀(4:5)이 이 포스터(1080x1527)보다 낮아 PC 는 아래가 잘리고, 휴대폰은 사진만 300px 로 줄어 틀 아래가 비었다(대표 10-29)
   → 틀을 포스터 비율 그대로, 휴대폰은 폭 가득 */
.detail-open #concert-info .summary-poster{aspect-ratio:auto;background:none}
@media(max-width:820px){.detail-open #concert-info .summary-poster>img{max-width:100%;margin:0}}

/* 연주자 소개: 이름 윗선 = 사진 윗선(공통 소개 칸 위 여백 26px 때문에 이름이 사진보다 아래서 시작했다 — 대표 10-29), 이름·직함·소개·이력 간격을 두 프로필 같게 */
.detail-open #art .artist-copy{padding-top:0}
.detail-open #art .artist-copy h3{margin:0 0 8px;line-height:1.1}
.detail-open #art .artist-copy .role{margin:0}
.detail-open #art .artist-copy .artist-intro{margin:16px 0 0}
.detail-open #art .artist-copy ul{margin:20px 0 0}
/* 연주자 사진: 휴대폰도 세로 4:5(4:3 가로 틀은 얼굴 위아래가 잘렸다 — 대표 10-29), 너무 커지지 않게 폭 360 까지 */
@media(max-width:820px){.detail-open #art .ph{aspect-ratio:4/5;width:min(100%,360px)}}

/* 공연 정보·가격 */
.detail-open #alert .ptab{background:var(--tt-card)}
.detail-open #alert .ptab table.single-price #tt-reg-h{display:none}
.detail-open #alert .ptab td.now{color:var(--ink)}
.detail-open #alert .opening-promo{background:var(--tt-dark);border:0;border-left:4px solid var(--tt-lime);color:var(--tt-on-dark)}
.opening-promo .promo-label{color:var(--tt-lime);margin:0 0 6px}
.opening-promo .promo-time{display:inline-block;margin-bottom:8px;background:var(--tt-lime);color:var(--tt-dark)}
.opening-promo .promo-benefit,.opening-promo .promo-deadline{color:var(--tt-on-dark)}
.opening-promo .promo-benefit strong{color:var(--tt-lime)}
.opening-promo .promo-terms{color:var(--tt-on-dark-mute)}
.detail-open #alert .opening-promo .promo-link{color:var(--tt-lime)}
.tt-countdown{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 16px;margin:24px 0 0;padding:20px 24px;background:var(--tt-dark);color:var(--tt-on-dark)}
.tt-countdown span{font-size:15px;font-weight:700;color:var(--tt-on-dark-mute)}
.tt-countdown b{font:800 clamp(28px,4vw,40px)/1.15 'DM Sans',Pretendard,sans-serif;letter-spacing:-.02em;color:var(--tt-lime);font-variant-numeric:tabular-nums}
.tt-countdown small{grid-column:1/-1;font-size:14px;color:var(--tt-on-dark-mute)}
#prog>.wrap{background:var(--tt-card)}
.tt-part{margin:36px 0 8px}.tt-part:first-of-type{margin-top:0}

/* 두 사람의 이야기: 참고 사이트 서사 문구, 어두운 면 */
.tt-story,.detail-open section.s.tt-story{background:var(--tt-dark);color:var(--tt-on-dark)}
.detail-open section.s.tt-story .eye{color:var(--tt-lime)}
.tt-story .message-heading{font:800 clamp(30px,4.6vw,54px)/1.25 Pretendard,'Noto Sans KR',sans-serif;letter-spacing:-.035em;margin:0 0 32px;color:var(--tt-on-dark);text-wrap:balance}
.tt-story-copy{max-width:640px}
.tt-story-copy p{font-size:18px;line-height:1.9;margin:0 0 16px;color:var(--tt-on-dark-mute)}
.tt-story-copy .tt-lead{font-size:22px;font-weight:700;color:var(--tt-on-dark)}
/* 사진이 이끄는 서사: 도전/연습은 큰 비대칭 짝, 두 사람의 관계는 넓은 사진으로. 원본 파생본 전체를 표시한다. */
.story-pair{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:48px;align-items:start;margin-top:40px}
.story-frame{margin:0;min-width:0}
.story-frame picture,.story-frame img{display:block;width:100%}
.story-frame img{height:auto;max-width:100%}
.story-frame figcaption{margin-top:22px;max-width:640px}
.story-practice{margin-top:96px}
.story-wide{margin-top:80px}
.story-conversation{max-width:960px;margin:80px 0 0 auto}
.story-frame .tt-hwang{margin-top:0}
@media(max-width:820px){
  .story-pair{display:block;margin-top:32px}
  .story-practice,.story-wide,.story-conversation{margin-top:48px}
  .story-frame figcaption{margin-top:18px}
  .tt-story-copy p{font-size:16px}
  .tt-story-copy .tt-lead{font-size:19px}
}

/* Special Talk(대표 10-29 수정 문서 2번 참고 이미지 짜임): 양옆 선 라벨 · 명조 제목 2줄(둘째 줄 굵게+밑선) · 1부 종료 후 안내 · 핵심 3개. 색은 페이지 올리브·회녹만 */
.detail-open #talk .wrap{text-align:center}
.tt-talk-eye{display:flex;align-items:center;gap:20px;max-width:720px;margin:0 auto 28px;font:500 14px/1 'Noto Serif KR',Georgia,serif;letter-spacing:.42em;color:var(--mute)}
.tt-talk-eye::before,.tt-talk-eye::after{content:"";flex:1;height:1px;background:var(--line)}
.tt-talk-eye span{margin-right:-.42em}
.tt-talk-h{margin:0;font:500 clamp(26px,3.6vw,42px)/1.45 'Noto Serif KR',Georgia,serif;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.tt-talk-h b{font-weight:800;font-size:1.18em}
.tt-swash{position:relative;display:inline-block}  /* 밑선은 '너무 많습니다.'에만 — 휴대폰에서 줄이 바뀌어도 그 낱말 밑에 */
.tt-swash::after{content:"";position:absolute;left:-6%;right:-4%;bottom:-.12em;height:.3em;border-bottom:3px solid #a3a49a;border-radius:0 0 50% 50%/0 0 100% 100%}
.tt-talk-when{margin:28px auto 0;max-width:560px;font-size:17px;line-height:1.7;color:var(--mute)}
.tt-talk-points{list-style:none;margin:48px auto 0;padding:0;max-width:960px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.tt-talk-points li{display:flex;flex-direction:column;align-items:center;padding:4px 16px 8px}
.tt-talk-points li+li{border-left:1px solid var(--line)}
.tt-talk-points span{display:grid;place-items:center;width:58px;height:36px;margin-bottom:18px;border-radius:50%;background:#a3a49a;color:var(--tt-card);font:italic 500 17px/1 'Noto Serif KR',Georgia,serif}
.tt-talk-points small{font-size:17px;line-height:1.5;color:var(--ink)}
.tt-talk-points b{margin-top:6px;padding:0 4px 6px;font-size:clamp(22px,2.4vw,28px);line-height:1.3;font-weight:800;letter-spacing:-.02em;color:var(--ink);background:linear-gradient(#a3a49a,#a3a49a) bottom/100% 2px no-repeat}
@media(max-width:720px){.tt-talk-eye{gap:14px;font-size:12px;margin-bottom:22px}.tt-talk-when{font-size:15px;margin-top:20px}
  .tt-talk-points{grid-template-columns:1fr;margin-top:32px}.tt-talk-points li{padding:22px 0}.tt-talk-points li+li{border-left:0;border-top:1px solid var(--line)}
  .tt-talk-points span{margin-bottom:12px}}
.detail-open #talk{border-top:1px solid var(--wine)}

/* 영상: 2개라 PC 2열(티모시 운영본과 같음), 휴대폰은 detail-layout 대로 1열 */
@media(min-width:821px){.detail-open #videos .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 스토리 강조(대표 10-29 수정 문서 1번): 제목 = '100번 연습해서 프로 피아니스트의 초견 이기기', 황예은 문장은 따로 띄워 '기획자가 아닌 피아니스트로 첫 도전'에 라임 */
.tt-story .message-heading em{font-style:normal;color:var(--tt-lime)}
.tt-story-copy .tt-hwang{margin:28px 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--tt-lime);font-size:20px;line-height:1.75;color:var(--tt-on-dark)}
.tt-story-copy .tt-hwang strong{color:var(--tt-lime);font-weight:800}
@media(max-width:820px){.tt-story-copy .tt-hwang{font-size:17px;padding-left:16px}}

/* 얼리버드(대표 10-29 수정 문서 3번): 타이틀 → 할인 문구 → 마감 순, 표는 할인율 배지·정가 작게 취소선·얼리버드가 가장 크게.
   포인트 색은 샴페인 골드 하나(어두운 면 #d9c08b, 밝은 면 글자는 같은 계열 짙은 금 #7d5f22 — 밝은 금은 미색 위에서 안 읽힘). 글씨체는 기존 그대로 */
.detail-open #alert .opening-promo.tt-eb{border-left-color:#d9c08b}
.tt-eb .eb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--tt-dark-line)}
.tt-eb .eb-title{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.tt-eb .eb-en{font:800 clamp(30px,4vw,44px)/1 'DM Sans',Pretendard,sans-serif;letter-spacing:-.03em;color:#d9c08b}
.tt-eb .eb-ko{font-size:16px;font-weight:700;color:var(--tt-on-dark)}
.tt-eb .promo-time{margin:0;background:#d9c08b;color:var(--tt-dark)}
.tt-eb .promo-benefit{font-size:clamp(22px,3vw,30px)}
.tt-eb .promo-benefit strong{color:#d9c08b;white-space:nowrap}
.tt-eb .promo-link{color:#d9c08b!important}
.detail-open #alert .ptab td.rate{width:1%;padding-left:16px}
.detail-open #alert .ptab td.rate em{display:inline-block;padding:3px 10px;border-radius:999px;background:#efe4c8;color:#7d5f22;font-style:normal;font-size:13px;font-weight:800;white-space:nowrap}
.detail-open #alert .ptab td.reg{font-size:14px}
.detail-open #alert .ptab td.now{color:#7d5f22;font-size:26px;letter-spacing:-.02em;width:1%}
.detail-open #alert .ptab table.single-price #tt-rate-h,.detail-open #alert .ptab table.single-price td.rate{display:none}
.detail-open #alert .ptab table.single-price td.now{color:var(--ink);font-size:19px}
@media(max-width:560px){
  .tt-eb .eb-head{align-items:flex-start}
  #tt-ptab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #tt-ptab tbody tr{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"seat rate reg" "seat now now";align-items:center;gap:4px 10px;padding:14px 0;border-bottom:1px solid var(--line)}
  #tt-ptab tbody tr:last-child{border-bottom:0}
  .detail-open #alert #tt-ptab tbody th,.detail-open #alert #tt-ptab tbody td{padding:0;border:0;width:auto}
  #tt-ptab tbody th{grid-area:seat}#tt-ptab td.rate{grid-area:rate}#tt-ptab td.reg{grid-area:reg}#tt-ptab td.now{grid-area:now;font-size:24px}
  #tt-ptab.single-price tbody tr{grid-template-areas:"seat now now"}}