/* 전세버스 — 참석 회신의 둘째 단계(`_rsvpshuttle.jspf`). 전 템플릿 공통.
   근거: design_handoff_heart_note/UPDATE-rsvp-bus.md
   ⚠ **줄·버튼 모양은 이 파일이 정하지 않는다** — 각 회신 폼의 클래스(.rs__r · .rs__v · .rs__cnt · .rs__again / .rc__row · .rc__pick · .rc__step · .rc__again)가 그린다.
     기본형과 카드형의 어휘가 명확히 달라서, 여기서 박스형 버튼을 따로 만들면 폼 안에서 혼자 튄다. 여기에는 단계 전환에 필요한 것만 둔다. */
.lsh-step{ box-sizing:border-box; width:100%; }
.lsh-step[hidden]{ display:none; }
/* 인원 줄 — 폼의 줄(.rs__r grid · .rc__row flex)은 display 를 주므로 hidden 속성만으로는 안 감춰진다 */
.lsh-step [data-lsh-cntrow][hidden], .lsh-step [data-lsh-extra][hidden]{ display:none !important; }
/* 추가 항목(운영자가 연 한 줄 · 예: 출발지) — 보기는 글자 칩, 입력형은 밑줄 한 줄. 색은 그 지면 글자색을 따른다. */
.lsh-x{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.lsh-opt{ padding:6px 11px; border:1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius:0;
  background:none; color:inherit; font:inherit; font-size:calc(12.5px * var(--fs,1)); line-height:1.3; cursor:pointer; }
.lsh-opt.on{ border-color:currentColor; background:color-mix(in srgb, currentColor 9%, transparent); font-weight:600; }
.lsh-xin{ flex:1; min-width:0; padding:6px 0; border:0; border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius:0; background:none; color:inherit; font:inherit; font-size:calc(12.5px * var(--fs,1)); }
.lsh-xin:focus{ outline:none; border-bottom-color:currentColor; font-size:calc(16px * var(--fs,1)); }
/* 셀렉트박스 — 입력형과 같은 밑줄 한 줄, 오른쪽에 글자색을 따르는 작은 화살표(그라디언트 두 장 · 외부 그림 없음).
   글자 12.5px · 포커스 16px 는 입력 칸 규칙(포커스에서 폰 브라우저가 확대하지 않게). */
.lsh-xsel{ flex:1; min-width:0; box-sizing:border-box; padding:6px 20px 6px 0; margin:0;
  border:0; border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius:0;
  background-color:transparent; color:inherit; font:inherit; font-size:calc(12.5px * var(--fs,1)); line-height:1.3; cursor:pointer;
  -webkit-appearance:none; appearance:none; text-overflow:ellipsis;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 7px) 55%, calc(100% - 2px) 55%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.lsh-xsel:focus{ outline:none; border-bottom-color:currentColor; font-size:calc(16px * var(--fs,1)); }
/* 카드형은 줄이 「이름 … 값」 두 끝 정렬이다 — 값 쪽 셀렉트는 오른쪽에 붙이고, 긴 보기가 잘리지 않게 폭을 넉넉히 준다(최소 124px). */
.rc__row .lsh-x{ flex:1 1 auto; justify-content:flex-end; }
.rc__row .lsh-xsel{ flex:0 1 auto; min-width:124px; max-width:100%; }
/* 펼친 목록은 그 지면 글자색이 아니라 기본 흰 판이다 — 어두운 지면(10 · 11)에서 밝은 글자가 흰 판에 묻히지 않게 */
.lsh-xsel option{ color:#222; background:#fff; }
/* 첫 단계 줄을 감춘다 — display 를 준 요소라 hidden 속성만으로는 안 감춰진다(그래서 !important 클래스) */
.lsh-away{ display:none !important; }
/* 불참을 고르면 인원 줄은 **감추지 않고 흐린다**(줄이 사라지면 폼이 출렁인다 — md §2) */
.lsh-off{ opacity:.35; pointer-events:none; }
/* 「/ 총 N명」 — 탑승 인원은 참석 인원을 넘지 못한다는 것을 그 자리에서 보인다 */
.lsh-total{ margin-left:6px; font-size:calc(12px * var(--fs,1)); opacity:.6; white-space:nowrap; }
/* 안내문 — 헤더를 바꾸지 못하는 템플릿에서만 패널 안에 선다(모듈이 헤더 전환이 되면 감춘다) */
.lsh-info{
  margin:2px 0 14px; font-size:calc(13px * var(--fs,1)); line-height:1.9; letter-spacing:-.01em; text-align:center;
  white-space:pre-line; word-break:keep-all; overflow-wrap:anywhere; text-wrap:pretty;
}
.lsh-info[hidden]{ display:none; }
/* `[[ ]]` 로 집은 대목 — 안내사항과 **같은 어휘**다: 바탕 없이 그 지면의 강조색 글자(`invitation-info-variants.css`).
   ⚠ 형광펜 노랑을 쓰지 않는다(2026-10-11 지시). 헤더로 올라간 안내문도 같이 걸어 둔다 —
     안 걸면 브라우저 기본 `mark`(진한 노랑)가 그대로 뜬다(11 에서 겪음). */
.lsh-info mark,
[data-lsh-note] mark, [data-lsh-sub] mark, [data-lsh-title] mark{
  background:none; color:var(--lsh-mark, var(--info-dot, var(--st-accent, currentColor))); font-weight:500; padding:0;
}
/* 보내기 줄 — 1단계는 보내기 하나, 2단계는 `이전 | 회신 보내기`(md §4).
   ⚠ 보내기 버튼의 제 여백은 건드리지 않는다(템플릿마다 다르다) — 아래끝을 맞춰 나란히 세운다. */
.lsh-foot{ display:grid; grid-template-columns:1fr; align-items:end; }
.lsh-foot.is-step2{ grid-template-columns:auto 1fr; gap:12px; }
/* [이전] — 그 지면의 **보내기 버튼과 같은 꼴**로 서되(어휘를 맞춘다) 한 단계 약하다: 주 동작은 오른쪽 하나다.
   왼쪽 끝에 붙인다(md §4). 채움·그림자는 걷고 글자와 테두리만 남긴다 — 템플릿이 무엇으로 그리든 같은 결과다. */
.lsh-foot [data-lsh-prev]:not(.rs__again):not(.rc__again){
  margin:0 !important; justify-self:start; width:auto !important; min-width:0 !important;
  background:none !important; box-shadow:none !important; color:inherit; opacity:.55;
}
.lsh-foot [data-lsh-prev]:not(.rs__again):not(.rc__again):hover{ opacity:.85; }
/* 제 꼴을 지키는 [이전](11 의 되돌리기 어휘)도 자리는 같다 — 줄 왼쪽 끝. */
.lsh-foot [data-lsh-prev]{ margin:0 !important; justify-self:start; }
.lsh-foot [data-lsh-prev][hidden]{ display:none; }
/* 보내기 쪽 칸은 폼이 쓰던 그 줄째로 들어온다 — 늘여 두면 그 안의 정렬(대개 오른쪽)이 그대로 산다. */
.lsh-foot.is-step2 > :not([data-lsh-prev]){ justify-self:stretch; min-width:0; }