@import url('design.css');
html{scroll-behavior:smooth}
body{font-size:1rem}
section{scroll-margin-top:96px;min-width:0}
svg{display:block;max-width:100%}
[hidden]{display:none}
nav{position:sticky;top:0;z-index:100;background:#fffafd;border-bottom:1px solid var(--border)}
.nav-inner{max-width:1080px;margin:auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-size:1.25rem;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:8px;color:#9c4d72}
.logo svg{width:32px;height:32px}
nav ul{display:flex;gap:8px;list-style:none;margin:0;padding:0}
nav a{font-size:0.875rem;text-decoration:none;color:var(--sub);display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:12px}
nav a:hover,nav a:focus-visible,nav a[aria-current=location]{background:var(--brand-soft);color:var(--primary)}
body>section{max-width:1080px;margin:auto;padding:48px 24px}
h2{font-size:1.625rem}
h3{font-size:1.125rem}
.section-sub{font-size:0.875rem;color:var(--sub);margin:8px 0 24px}
#home{padding:64px 24px 48px}
.hero{max-width:760px;position:relative;z-index:1}
.hero h1{font-size:clamp(1.875rem,4vw,3rem);line-height:1.3;margin-bottom:16px}
.hero>p{font-size:1rem;color:var(--sub);margin-bottom:24px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero .site-notice{max-width:760px;margin-bottom:32px}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
a.service-card{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;border:1px solid var(--border);border-radius:20px;background:var(--surface);padding:24px;text-decoration:none;transition:transform .15s,border-color .15s}
a.service-card:hover{transform:translateY(-3px);border-color:#e7adc6;box-shadow:0 8px 24px #c46c9410}
.service-icon{border-radius:16px;background:var(--brand-soft);color:var(--primary);width:44px;height:44px;padding:10px}
.service-icon svg{width:24px;height:24px}
.service-card h3{font-size:1.125rem;min-height:48px;overflow-wrap:anywhere}
.price{font-size:1.625rem;font-weight:600;line-height:1.3;min-height:34px;overflow-wrap:anywhere}
.service-card:nth-child(2) .price,.service-card:nth-child(5) .price{font-size:1.375rem}
.service-hint{font-size:0.875rem;color:var(--sub);min-height:46px}
.intake-badge{font-size:0.8125rem;line-height:1.5;padding:4px 8px;border-radius:6px;margin-top:auto;background:#fff0f6;color:var(--sub)}
.intake-badge[data-state=open]{background:var(--success-bg);color:var(--success)}
.ktv-card .service-icon{border:1px solid #ecd0dc}
.availability-contact{max-width:1080px;padding:48px 24px 64px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.availability-contact section{min-width:0}
.calendar-wrap{padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.cal-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}
#cal-title{font-weight:500}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;text-align:center}
.cal-day-name{font-size:0.8125rem;color:var(--sub);padding:8px 0}
.cal-day{padding:8px 0;min-height:40px;border-radius:8px;font-size:0.875rem;background:var(--success-bg);color:var(--success)}
.cal-day.busy{background:var(--warning-bg);color:var(--warning)}
.cal-day.full{background:var(--error-bg);color:var(--error)}
.cal-day.today{outline:2px solid var(--primary);outline-offset:1px}
.cal-day.empty{visibility:hidden}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.dot.green{background:#68a686}
.dot.yellow{background:#bc9650}
.dot.red{background:#bd7575}
.contact-list{display:grid;gap:24px}
.contact-box{padding:24px;border:1px solid var(--border);border-radius:20px;background:#fff;min-width:0}
.contact-main{display:flex;gap:8px;align-items:center;flex-wrap:wrap;overflow-wrap:anywhere}
.contact-main a{min-width:0;overflow-wrap:anywhere;font-size:1rem}
.contact-icon{width:24px;color:var(--sub)}
.tip{font-size:0.8125rem;color:var(--sub);margin-top:16px}
.form-page{max-width:800px;margin:auto;padding:40px 24px 64px}
.form-page h1{padding-bottom:16px;border-bottom:2px solid var(--border);font-size:1.75rem;margin-bottom:8px;color:#824d69}
.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:0.875rem;color:var(--sub);text-decoration:none;margin-bottom:16px;padding:0 16px;border-radius:100px;background:#fff;border:1px solid var(--border)}
.form-page .sub{font-size:0.9375rem;color:var(--sub);margin-bottom:24px}
.notice-box{margin-bottom:24px;padding:24px;font-size:0.9375rem;border:1px dashed #e5bfd0;border-radius:20px;background:#fffafd}
.notice-box h2,.notice-box h3{font-size:1.25rem;margin-bottom:16px}
.notice-box ul{margin:0;padding-left:20px;display:grid;gap:8px}
.notice-box .extra{color:var(--sub);font-size:0.875rem;margin-top:16px}
.notice-box a{overflow-wrap:anywhere}
.price-notice{margin-top:24px}
.price-notice h4{font-size:0.9375rem;margin-bottom:8px}
.price-notice ul{list-style:none;padding:0}
.price-notice li{display:flex;justify-content:space-between;gap:16px}
.price-notice strong{font-weight:500}
.single-song-notice{padding:16px;background:var(--brand-soft);font-size:0.875rem;margin-bottom:24px;border:1px solid #f0d4e1;border-radius:16px}
#form{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;background:var(--surface);border:1px solid var(--border);border-top:4px solid #edbad0;border-radius:20px;padding:32px 24px;box-shadow:var(--shadow)}
.form-group{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;min-width:0}
.form-group.field-short{grid-column:auto}
.form-group label{font-size:0.9375rem;font-weight:500}
.form-group input,.form-group select,.form-group textarea{width:100%;min-height:48px;font-size:1rem;background-color:var(--surface);border-color:#ecd9e2}
.form-group textarea{min-height:144px}
.field-required{color:var(--primary);font-size:0.8125rem}
.optional{font-size:0.8125rem;color:var(--sub);font-weight:400}
#ex-fields,#blindbox-fields{grid-column:1/-1}
#ex-fields .form-group,#blindbox-fields .form-group{margin-bottom:24px}
#ex-fields .form-group:last-child,#blindbox-fields .form-group:last-child{margin-bottom:0}
.submit-btn,#form-feedback{grid-column:1/-1}
.form-feedback{font-size:0.875rem;color:var(--error);overflow-wrap:anywhere}
.form-feedback:empty{display:none}
#form.was-validated :invalid{border-color:var(--error);box-shadow:0 0 0 2px #a23b3b12}
.success-msg{display:none;padding:32px 24px;background:var(--success-bg);border-radius:12px}
.success-msg h2{font-size:1.375rem;margin-bottom:16px}
.success-msg p{font-size:0.9375rem;overflow-wrap:anywhere}
.site-notice{position:relative;text-align:left;padding:20px 24px;border:1px solid var(--border);border-radius:16px;background:var(--brand-soft);white-space:pre-wrap;overflow-wrap:anywhere;font-size:0.875rem;margin-bottom:24px}
.site-notice p{margin-top:8px;color:var(--sub)}
.site-notice strong{font-weight:500}
.ktv-sign{font-size:0.8125rem;color:var(--sub);margin-bottom:8px}
.ktv-stage{display:flex;align-items:center;gap:24px;padding:16px 24px;margin-bottom:24px;background:#ffebf4;border:1px dashed #e3adc7;border-radius:20px}
.stage-mic{width:32px;color:var(--primary)}
.ktv-meter{height:32px;display:flex;gap:8px;align-items:center}
.ktv-meter i{width:3px;height:12px;border-radius:4px;background:#c787a0}
.ktv-meter i:nth-child(2n){height:20px}
.ktv-meter i:nth-child(3n){height:28px}
footer{padding:32px 24px;border-top:1px solid var(--border);text-align:center;font-size:0.8125rem;color:var(--sub)}
.beian-link{text-decoration:none}
.hero-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:24px;padding:40px;border:1px solid #f1d5e2;border-radius:22px;background:var(--brand-soft);box-shadow:0 8px 32px #cf83a90a}
.hero-illustration{width:100%;max-width:300px;justify-self:center}
.hero-panel .hero h1{font-size:clamp(1.875rem,3.3vw,2.75rem)}
.hero-panel .site-notice{background:var(--surface);border-radius:16px}
.notice-caption{display:block;margin-bottom:8px;font-size:.75rem;color:var(--primary);font-weight:500}
.site-notice::before{content:"";position:absolute;top:-5px;right:20px;width:42px;height:10px;background:#efbfd1;border-radius:2px;transform:rotate(6deg)}
.hero-actions .btn{border-radius:100px;padding:12px 24px}
.hero-actions .btn-sm{border-radius:12px;padding:12px 24px}
body>section>h2,.availability-contact h2{display:flex;align-items:center;gap:12px}
body>section>h2::before,.availability-contact h2::before{content:"";width:12px;height:12px;flex-shrink:0;border-radius:4px;background:#efb9cf;transform:rotate(45deg)}
.service-card:nth-child(2) .service-icon{background:#f9e6ef;color:#a66c88}
.service-card:nth-child(3) .service-icon{background:#fff0f3;color:#a67189}
.service-card:nth-child(4) .service-icon{background:#f9e9f0;color:#a26d87}
.service-card:nth-child(5) .service-icon{background:#fde6ef;color:#b16d8e}
.service-card:nth-child(6){background:#fff7fb}
.submit-btn{border-radius:12px}
@media(max-width:960px){
.hero-panel{grid-template-columns:minmax(0,1fr) 200px;padding:32px}
.hero-illustration{max-width:200px}
.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.availability-contact{gap:24px}
.calendar-wrap{padding:16px}
.cal-grid{gap:4px}
}
@media(max-width:640px){
.hero-panel{grid-template-columns:1fr;padding:24px;gap:8px;border-radius:24px}
.hero-illustration{max-width:144px;grid-row:1}
.hero-panel .hero h1{font-size:1.875rem}
.hero-panel .site-notice{padding:12px 16px;margin-bottom:24px}
.hero-actions .btn,.hero-actions .btn-sm{padding:10px 16px}
.hero-panel .hero>p{font-size:.9375rem}
body{font-size:0.9375rem}
.nav-inner{padding:8px 16px;display:block}
nav ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
nav a{justify-content:center;font-size:0.8125rem;padding:8px 4px}
.logo{font-size:1.125rem}
section{scroll-margin-top:128px}
body>section{padding:32px 16px}
#home{padding:32px 16px}
.hero h1{font-size:clamp(1.875rem,8vw,2.375rem)}
.hero-actions{gap:8px}
.hero-actions a{font-size:0.875rem}
h2{font-size:1.5rem}
.services-grid{grid-template-columns:1fr;gap:16px}
.service-card h3{min-height:0}
.service-hint{min-height:0}
a.service-card{padding:20px}
.availability-contact{padding:32px 16px;grid-template-columns:1fr;gap:32px}
.contact-box{padding:20px}
.form-page{padding:24px 16px 48px}
.form-page h1{font-size:1.625rem}
#form{grid-template-columns:1fr;padding:20px;gap:24px}
.form-group.field-short{grid-column:1/-1}
.notice-box{padding:20px}
.cal-day{font-size:0.8125rem}
}