.booking-availability-note{margin-top:14px;padding:16px;border:1px solid #DDDCD8;background:#F5F4F0;color:#252421;border-radius:4px;text-align:left;overflow-wrap:anywhere}
.booking-availability-note strong{display:block;margin-bottom:8px;font-size:15px;font-weight:600}
.booking-availability-note p{margin:0;font-size:14px;line-height:1.7;color:#66645F}
.booking-availability-note [data-state="closed"]{color:#252421;font-weight:600}
.booking-availability-note [data-booking-open-times]{display:block;margin-top:10px;font-size:13px;line-height:1.8;color:#66645F}
.booking-availability-note [hidden]{display:none!important}
.booking-availability-note button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:10px;padding:8px 14px;border:1px solid #DDDCD8;background:#fff;color:#252421;border-radius:4px;font:inherit;font-size:14px;cursor:pointer}
.booking-availability-note button:focus-visible{outline:2px solid #252421;outline-offset:3px}
/* Date and time controls share the form's cream paper and charcoal ink. */
#app .contact-calendar{box-sizing:border-box;width:100%;min-width:0;padding:14px 10px;background:#F5F4F0;color:#252421;border:1px solid #56534d;border-radius:6px;font:inherit;text-align:left}
#app .contact-calendar[hidden],#app .calendar-time-grid[hidden],#app .contact-time-selects label[hidden],#app input[data-calendar-value]{display:none!important}
#app .calendar-popup{position:fixed;z-index:1000;max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 14px 40px #25242126}
#app .calendar-caption{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-bottom:16px}
#app .calendar-caption strong{font-size:16px;font-weight:650}
#app .calendar-caption [data-calendar-selection]{flex:1;min-width:180px;font-size:14px;line-height:1.7}
#app .contact-calendar button,#app .calendar-trigger,#app .calendar-time-grid button{box-sizing:border-box;min-height:44px;margin:0;padding:0;border:1px solid #b9b5ab;border-radius:4px;background:#fffcf5;color:#252421;font:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:none;touch-action:manipulation}
#app .contact-calendar button:focus-visible,#app .calendar-trigger:focus-visible,#app .calendar-time-grid button:focus-visible{outline:2px solid #252421;outline-offset:2px}
#app .contact-calendar button:disabled,#app .calendar-time-grid button:disabled{background:#e9e6df;color:#79756b;border-color:#e0dcd2;cursor:default}
#app .calendar-navigation{display:flex;align-items:center;gap:8px;margin-bottom:12px}
#app .calendar-navigation>button,#app .calendar-close{flex:0 0 44px;width:44px;display:grid;place-items:center}
#app .calendar-caption .calendar-close{margin-left:auto}
#app .contact-calendar svg,#app .calendar-trigger svg{width:20px;height:20px}
#app .calendar-month-selects{display:flex;justify-content:center;gap:6px;flex:1;min-width:0}
#app .calendar-month-selects label{min-width:0}
#app#app#app .contact-calendar select{width:auto;max-width:100%;min-width:0;height:44px;min-height:44px;padding:0 22px 0 8px;background-color:#fffcf5!important;color:#252421!important;border:1px solid #56534d!important;font:inherit;font-size:15px;font-weight:600}
#app .calendar-operating{margin:0 0 14px;padding:12px;background:#e8e2d7;border-left:3px solid #56534d;font-size:15px;font-weight:600;line-height:1.65;color:#252421}
#app .calendar-operating span{font-weight:500}
#app .calendar-weekdays,#app .calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
#app .calendar-weekdays{margin-bottom:6px;text-align:center;font-size:13px;font-weight:600;line-height:28px}
#app .contact-calendar .calendar-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:40px;min-height:48px;padding:4px 0;line-height:1.2}
#app .calendar-day small,#app .calendar-time-grid small{font-size:10px;line-height:1.25;font-weight:500;letter-spacing:0}
#app .contact-calendar .calendar-day.is-today{border:2px solid #56534d}
#app .contact-calendar .calendar-day.is-today>span{text-decoration:underline;text-underline-offset:3px}
#app .contact-calendar .calendar-day.is-selected:not(:disabled),#app .calendar-time-grid button[aria-checked="true"]:not(:disabled){background:#302d27;color:#fffcf5;border-color:#302d27}
#app .contact-calendar .calendar-day:not(:disabled):hover,#app .calendar-time-grid button:not(:disabled):hover{box-shadow:inset 0 0 0 1px #56534d}
#app .calendar-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:16px;padding-top:12px;border-top:1px solid #c5bfb2;font-size:12px;line-height:1.6}
#app .calendar-legend span{display:inline-flex;align-items:center;gap:6px}
#app .calendar-legend i{width:12px;height:12px;box-sizing:border-box;border-radius:2px}
#app .legend-unavailable{background:#e9e6df;border:1px solid #c5bfb2}
#app .legend-today{background:#fffcf5;border:2px solid #56534d}
#app .legend-selected{background:#302d27;border:1px solid #302d27}
#app .calendar-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px;text-align:left}
#app .calendar-time-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;clear:both}
#app .calendar-time-grid button{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px;min-height:48px;padding:8px}
@media(min-width:700px){#app .calendar-inline{max-width:520px}#app .calendar-time-grid{max-width:520px;grid-template-columns:repeat(4,minmax(0,1fr))}#app .contact-calendar .calendar-day{min-height:56px}}
@media(max-width:450px){#app .contact-calendar{padding:12px 4px}#app .calendar-weekdays,#app .calendar-grid{gap:1px}#app .calendar-caption{padding-inline:6px}#app .calendar-navigation{gap:4px}#app .calendar-month-selects{gap:3px}#app .calendar-legend{gap:8px;padding-inline:4px}#app .calendar-operating{padding:10px 8px}}
/* Keep seven 40px date targets inside narrow inquiry cards. */
@media(max-width:450px){
 #app#app#app .consultation-flow .contact-date-field .contact-date-picker{margin-inline:-12px}
 #app#app#app .contact-calendar .calendar-caption [data-calendar-selection]{flex-basis:100%;min-width:0}
 #app .calendar-caption .calendar-close{position:absolute;right:10px;top:10px}
}
@media(max-width:360px){#app#app#app .consultation-flow .contact-date-field .contact-date-picker{margin-inline:-42px}}
/* Legacy form label rules also match nested spans; restore control inheritance. */
#app#app#app .contact-calendar .calendar-day>span,#app#app#app .calendar-time-grid button>small{color:inherit!important}
html #app#app#app#app .contact-calendar .calendar-day.is-selected:not(:disabled),
html #app#app#app#app .contact-calendar .calendar-day.is-selected:not(:disabled)>span,
html #app#app#app#app .calendar-time-grid button[aria-checked="true"]:not(:disabled),
html #app#app#app#app .calendar-time-grid button[aria-checked="true"]:not(:disabled)>small{color:#fffcf5!important}
html #app#app#app#app .contact-calendar .calendar-day:disabled,
html #app#app#app#app .contact-calendar .calendar-day:disabled>span,
html #app#app#app#app .calendar-time-grid button:disabled,
html #app#app#app#app .calendar-time-grid button:disabled>small{color:#79756b!important}
/* Explain the two separate dates without changing calendar or input behavior. */
html #app#app#app#app .contact-date-field>legend{max-width:100%;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
html #app#app#app#app .contact-date-description{margin:0;font-size:13px;line-height:1.75;color:#66645f;text-align:left;word-break:keep-all;overflow-wrap:anywhere}
html #app#app#app#app .contact-date-bookingDate{margin-top:20px!important;background:#F5F4F0!important;border-left:3px solid #56534d!important}

/* Third pass: the action names the destination; the header has a single brand line. */
html #app#app#app#app .contact-submit [data-submit-label]{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;white-space:nowrap!important}
html #app#app#app#app .entrance-option-image{aspect-ratio:16/9!important;height:auto!important;max-height:none!important;overflow:hidden!important;background:#F5F4F0!important}
html #app#app#app#app .entrance-option-image img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:contain!important;object-position:center center!important}
html #siteHeader .wordmark{align-items:center!important}
html #siteHeader .wordmark>span{display:flex!important;align-items:center!important;line-height:1!important}
@media(max-width:430px){
 html #app#app#app#app :is(.contact-date-field,.contact-date-picker,.contact-date-toggle,.contact-time-field){min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
 html #app#app#app#app .contact-date-picker{width:100%!important;margin-inline:0!important}
 html #app#app#app#app .contact-date-field{padding-inline:12px!important}
 html #app#app#app#app .contact-date-field :is(input[type="text"],.calendar-trigger){width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
 html #app#app#app#app .contact-date-field :is(legend,.contact-date-description,em){min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important;word-break:keep-all!important}
 html #app#app#app#app .contact-calendar{box-sizing:border-box!important;max-width:100%!important;padding:8px 4px!important}
 html #app#app#app#app .calendar-inline{width:100%!important}
 html #app#app#app#app .calendar-caption{gap:3px 6px!important;margin-bottom:8px!important;padding-inline:2px!important}
 html #app#app#app#app .calendar-caption strong{font-size:13px!important}
 html #app#app#app#app .calendar-caption [data-calendar-selection]{min-width:0!important;font-size:11px!important;line-height:1.5!important}
 html #app#app#app#app .calendar-navigation{gap:4px!important;margin-bottom:6px!important}
 html #app#app#app#app .contact-calendar button{min-height:32px!important;font-size:12px!important;padding:0!important}
 html #app#app#app#app .contact-calendar .calendar-day{height:34px!important;min-height:34px!important;gap:1px!important}
 html #app#app#app#app .calendar-day small{font-size:9px!important;line-height:1.1!important}
 html #app#app#app#app .calendar-navigation>button,html #app#app#app#app .calendar-close{flex-basis:32px!important;width:32px!important;height:32px!important}
 html #app#app#app#app .contact-calendar select{height:32px!important;min-height:32px!important;font-size:12px!important;padding:0 17px 0 5px!important}
 html #app#app#app#app .calendar-weekdays{margin-bottom:4px!important;font-size:10px!important}
 html #app#app#app#app :is(.calendar-grid,.calendar-weekdays){gap:2px!important}
 html #app#app#app#app .calendar-legend{margin-top:6px!important;gap:8px!important;font-size:9px!important;line-height:1.5!important}
 html #app#app#app#app .calendar-time-grid{gap:5px!important}
 html #app#app#app#app .calendar-time-grid button{min-height:34px!important;padding:5px!important;font-size:12px!important}
 html #app#app#app#app .contact-submit{font-size:13px!important;padding-inline:8px!important;min-width:0!important;max-width:100%!important}
}
html #app#app#app#app .contact-submit [data-submit-label]{flex-wrap:nowrap!important}
@media(max-width:430px){
 html #app#app#app#app .inquiry-actions{grid-template-columns:1fr!important;gap:0!important;padding-block:0 calc(12px + env(safe-area-inset-bottom))!important}
 html #app#app#app#app .inquiry-actions .contact-submit{min-height:48px!important;width:100%!important}
 body[data-page="event"] #app{padding-bottom:0!important}
}
@media(max-width:430px){
 html #app#app#app#app :is(.calendar-grid,.calendar-weekdays){grid-template-columns:repeat(7,minmax(0,1fr))!important}
 html #app#app#app#app .contact-calendar .calendar-day{min-width:0!important;width:100%!important}
}

/* Keep the booking controls on the card axis, with room to scroll above the CTA. */
html #app#app#app#app :is(.calendar-inline,.calendar-time-grid){width:100%!important;max-width:520px!important;margin-inline:auto!important}
html #app#app#app#app [data-calendar-range-status]{font-size:12px;line-height:1.7;color:#66645f;text-align:center}
html{scroll-padding-bottom:24px}
body[data-page="event"] #app{padding-bottom:0!important}
html #app#app#app#app .consultation-flow :is(.calendar-day,.calendar-time-grid button,.option-photo){scroll-margin-block:24px 160px}
@media(max-width:430px){
 html #app#app#app#app .calendar-popup{position:relative!important;left:auto!important;top:auto!important;width:100%!important;margin-top:12px!important;max-height:none!important;overflow:visible!important;box-shadow:none!important;z-index:auto!important}
}
html #app#app#app#app [data-calendar-range-status][hidden]{display:none!important}

/* Desktop actions share the inquiry container axis, including its summary column. */
@media(min-width:901px){
 html #app#app#app#app .consultation-flow #contactInquiryForm{padding-bottom:0!important}
}

/* Both dates use the same in-card disclosure and legible native month controls. */
html #app#app#app#app .contact-calendar{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:520px!important;margin:12px auto 0!important;max-height:none!important;overflow:visible!important;box-shadow:none!important;z-index:auto!important;scroll-margin-block:80px 160px}
html #app#app#app#app .calendar-month-selects{flex:1!important;gap:4px!important;min-width:0!important}
html #app#app#app#app .calendar-month-selects label{display:block!important;flex:none!important;min-width:0!important}
html #app#app#app#app .contact-calendar select[data-calendar-year]{width:112px!important;min-width:112px!important}
html #app#app#app#app .contact-calendar select[data-calendar-month]{width:80px!important;min-width:80px!important}
html #app#app#app#app .contact-calendar select{box-sizing:border-box!important;appearance:auto!important;background-image:none!important;padding-inline:8px!important;text-overflow:clip!important}
html #app#app#app#app .calendar-close{width:auto!important;min-width:52px!important;flex-basis:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;padding-inline:6px!important}
html #app#app#app#app .calendar-close svg{width:14px!important;height:14px!important}
html #app#app#app#app .calendar-caption strong{padding-right:60px}
html #app#app#app#app .calendar-trigger [data-calendar-action]{flex:none;font-size:12px;color:#66645f}
html #app#app#app#app .calendar-trigger [data-calendar-display]{flex:1;min-width:0;white-space:normal!important;overflow-wrap:anywhere}
html #app#app#app#app .calendar-trigger{gap:8px!important;scroll-margin-block:80px 160px}
html #app#app#app#app .contact-time-field{scroll-margin-block:80px 160px}
@media(max-width:430px){
 html #app#app#app#app .contact-calendar select[data-calendar-year]{width:96px!important;min-width:96px!important}
 html #app#app#app#app .contact-calendar select[data-calendar-month]{width:72px!important;min-width:72px!important}
 html #app#app#app#app .contact-calendar select{font-size:12px!important}
 html #app#app#app#app .contact-date-picker{padding-bottom:16px!important}
}
/* Phone wish-time choices, including undecided and closed times, share two columns. */
@media(max-width:430px){
 html #app#app#app#app .calendar-time-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html #app#app#app#app .calendar-time-grid button{min-width:0!important;white-space:nowrap!important;overflow-wrap:normal!important}
}

@media(max-width:350px){
 html #app#app#app#app .contact-calendar select[data-calendar-year]{width:80px!important;min-width:80px!important}
 html #app#app#app#app .contact-calendar select[data-calendar-month]{width:56px!important;min-width:56px!important}
 html #app#app#app#app .contact-calendar select{font-size:11px!important;padding-inline:4px!important}
}

/* Expanding dates never moves the browser's scroll anchor. */
html #app#app#app#app #contactInquiryForm{overflow-anchor:none!important}
html #app#app#app#app .single-song-note{width:100%!important;max-width:800px!important;min-width:0;box-sizing:border-box!important;margin:16px auto!important;text-align:center!important;font-size:13px;line-height:1.75;color:#66645f}

/* iOS label clicks must remain native touch activations. */
#app .contact-date-toggle label{touch-action:manipulation}
html #app#app#app#app .single-song-note span{display:block;white-space:nowrap}
html #app#app#app#app .contact-notes-field textarea{box-sizing:border-box;width:100%;min-height:112px;resize:vertical;border:1px solid #d8d5cd;border-radius:8px;background:#FFFCF5;color:#252421;padding:12px;font:inherit;line-height:1.6}
html #app#app#app#app [data-time-date-hint]{display:block;clear:both;margin:0 0 12px;padding:16px;border:1px solid #e6dfd0;border-radius:8px;background:#faf5e9;color:#514b40;font-size:16px;line-height:1.65;text-align:center}
html #app#app#app#app :is([data-time-date-hint],[data-time-help],.calendar-time-grid)[hidden]{display:none!important}
html #app#app#app#app .calendar-time-grid button:disabled{cursor:default}
html #app#app#app#app .contact-date-summary{margin:10px 0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:13px!important;line-height:1.6!important;color:#252421!important;cursor:default}

/* Every booking choice represents one complete recording interval. */
html #app#app#app#app .calendar-time-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

/* Sunday/public-holiday colour never changes booking eligibility or selected contrast. */
html #app#app#app#app .contact-calendar .calendar-weekdays>.calendar-sunday,
html #app#app#app#app .contact-calendar .calendar-day.calendar-red-day:not(.is-selected):not(:disabled)>span{color:#9c5a54!important}
html #app#app#app#app .contact-calendar .calendar-day.calendar-red-day:disabled>span{color:#b9a09a!important}

/* A valid interval includes later hours that cannot themselves start a session. */
html #app#app#app#app .calendar-time-grid button.is-covered[aria-checked="true"]{background:#302d27!important;color:#fffcf5!important;border-color:#302d27!important}
html #app#app#app#app .calendar-time-grid button.is-covered[aria-checked="false"]{background:#ebe8e0!important;color:#302d27!important;border-color:#c9c3b6!important}

/* Undecided occupies the full row; each following row pairs :00 and :30. */
html #app#app#app#app .calendar-time-grid button[data-calendar-time=""]{grid-column:1/-1}
html #app#app#app#app .calendar-time-grid button{white-space:nowrap!important;min-width:0!important;padding-inline:4px!important;font-size:clamp(12px,3.4vw,15px)!important}
html #app#app#app#app .calendar-time-grid button[aria-disabled="true"]:not(.is-covered){opacity:.42;cursor:pointer;background:#f5f4f0!important;color:#66645f!important;border-color:#dddcd8!important}

html #app#app#app#app .calendar-time-grid button.is-covered{opacity:1!important}

/* One recording start per row; five rows plus the next choice invite scrolling. */
html #app#app#app#app .calendar-time-grid{
 grid-template-columns:minmax(0,1fr)!important;
 width:100%!important;max-width:none!important;max-height:304px;
 gap:8px!important;overflow-y:auto;overflow-x:hidden;
 -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
 touch-action:pan-y;overflow-anchor:none;scrollbar-gutter:stable;
}
html #app#app#app#app .calendar-time-grid button{
 width:100%!important;height:48px;min-height:48px!important;
 flex-wrap:nowrap;touch-action:pan-y;
}

/* A sibling overlay leaves native wheel and touch hit-testing on the list. */
html #app#app#app#app .contact-time-scroll-wrap{position:relative;isolation:isolate}
html #app#app#app#app .contact-time-scroll-wrap[hidden]{display:none!important}
html #app#app#app#app .contact-time-scroll-wrap::after{
 content:"";position:absolute;z-index:1;inset:auto 0 0;height:28px;
 background:linear-gradient(to bottom,rgba(245,244,240,0),#F5F4F0);
 pointer-events:none;opacity:0;transition:opacity .15s ease;
}
html #app#app#app#app .contact-time-scroll-wrap.has-more-times::after{opacity:1}

html #app#app#app#app .contact-time-field [data-time-help]{white-space:nowrap;font-size:clamp(10px,2.9vw,13px)}

html #app#app#app#app .contact-time-field [data-time-help].has-time-selection{font-size:16px!important;font-weight:600!important;color:#191919!important;font-style:normal!important;line-height:1.5!important}

/* Wedding date: × 닫기 until a day is chosen, then the same control becomes the filled 확인 button. */
html #app#app#app#app #calendar-eventDate .calendar-caption{position:relative}
html #app#app#app#app #calendar-eventDate .calendar-caption strong{padding-right:88px!important}
html #app#app#app#app #calendar-eventDate .calendar-close{
 position:absolute!important;top:0!important;right:0!important;z-index:2;
 width:auto!important;min-width:0!important;height:auto!important;min-height:36px!important;
 flex:0 0 auto!important;flex-basis:auto!important;
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 margin:0!important;padding:6px 12px!important;gap:0!important;
 border:1px solid #b9b5ab!important;border-radius:4px!important;
 background:#fffcf5!important;color:#252421!important;
 font-size:14px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important;
}
html #app#app#app#app #calendar-eventDate .calendar-close span{color:inherit!important}
html #app#app#app#app #calendar-eventDate .calendar-close.is-confirm{
 background:#252421!important;color:#FFFFFF!important;border-color:#252421!important;
}
html #app#app#app#app #calendar-eventDate .calendar-close.is-confirm span{color:#FFFFFF!important}

/* Past dates keep the cell outline but fade until the form is barely visible. Closed days stay solid, with 마감. */
html #app#app#app#app .contact-calendar .calendar-day.is-past{opacity:.15!important}

/* Exactly one remaining team. Charcoal point ink, never the benefit red or the grey 마감. */
html #app#app#app#app .contact-calendar .calendar-day.has-one-team:not(.is-selected)>small.one-team,
html #app#app#app#app .calendar-time-grid button:not(:disabled):not([aria-checked="true"])>small.one-team{
 color:#252421!important;font-weight:650!important;letter-spacing:-.04em;white-space:nowrap
}
html #app#app#app#app .contact-calendar .calendar-day>small.one-team{
 display:block;max-width:100%;font-size:8px!important;line-height:1!important
}
@media(max-width:430px){
 html #app#app#app#app .contact-calendar .calendar-day.has-one-team{height:auto!important;min-height:34px!important}
}