/* /order v2: layout only. Submission and validation stay in the existing scripts. */
@font-face { font-family:Pretendard; src:url('/PretendardVariable.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
:root { --red:#D21F1D; --bg:#F5F6F8; --line:#DFE3E8; --line-soft:#EEF0F3; --text:#20252C; --muted:#626872; --rail-width:104px; --bottom-height:144px; }
body { font-family:Pretendard,Site,sans-serif; font-size:14px; letter-spacing:-.025em; }
header { height:64px; padding:8px 24px; gap:12px; }
.page-title { font-size:18px; }.phone { font-size:15px; }
h1.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; margin:0; padding:0; }
main { margin:0; padding:20px 24px 0; }
.order-layout { max-width:1624px; margin-inline:auto; }
#order-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) minmax(300px,.85fr); align-items:start; gap:16px; background:transparent; }
.panel,.panel.active { display:flex; padding:16px; gap:10px; border:1px solid var(--line); border-radius:12px; background:#fff; scroll-margin-top:20px; }
h2 { gap:8px; padding-bottom:10px; font-size:18px; line-height:26px; }
.step-number { flex:0 0 24px; width:24px; height:24px; font-size:13px; border-radius:7px; }
#route { grid-column:1; grid-row:1; }
#vehicle { grid-column:2; grid-row:1; }
#cargo { grid-column:1; grid-row:2; }
#contact { grid-column:2; grid-row:2; }
#fare { grid-column:3; grid-row:1 / 3; position:sticky; top:20px; border-top:3px solid var(--red); }
.locations-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.location,.requester { padding-top:0; border-top:0; gap:6px; }
.section-label,.map-heading { font-size:14px; }
.field,.cargo-text,.upload { gap:4px; font-size:14px; font-weight:500; }
input,select,textarea { border-radius:7px; padding:8px 10px; font-size:16px; font-weight:400; }
input,select { height:44px; min-height:44px; }
input[type=checkbox],input[type=radio] { accent-color:var(--red); }
textarea { min-height:88px; }
button { font-size:14px; border-radius:7px; }
.address-search { height:44px; min-height:44px; font-size:14px; }
.location .address { gap:8px; }
.text-btn { min-height:44px; padding:2px 4px; font-size:14px; color:var(--muted); }
.route-options { display:grid; grid-template-columns:1fr .7fr 1.8fr; gap:12px; }
.optional > summary { min-height:44px; padding:6px 0; font-size:14px; }
.optional > summary::after { font-size:18px; }
.details-content { padding-bottom:8px; }
details.optional:not([open]) > .details-content { display:none; }
.note,#distance-status,#address-status,.notice,.vehicle-info,.handling small,#char-count,.privacy-note,.fare-compact p { font-size:14px; line-height:1.5; }
.note a,.privacy-note a { display:inline; min-height:0; min-width:0; }
.vehicle-cards { gap:6px; }.vehicle-cards label { height:76px; font-size:14px; }
.vehicle-symbol { flex-basis:44px; width:60px; height:44px; }
:is(.vehicle-cards,.handling,.service,.flags) label:has(:checked) { border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red); background:#FFF8F7; }
:is(.vehicle-cards,.handling,.service) label:has(:checked)::after { color:var(--red); }
.flags { gap:6px; }.flags label,.service label { font-size:14px; }
.schedule { grid-template-columns:minmax(0,1fr); }
.inline { font-size:14px; }
.handling { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.handling label { grid-template-columns:40px minmax(0,1fr); min-height:76px; padding:6px 4px; gap:0 4px; }
.handling-photo { width:40px; height:40px; }
.handling strong { font-size:13px; line-height:1.4; padding-right:5px; }
.handling small { grid-column:2; font-size:12px; line-height:1.4; }
.handling small + small { grid-column:2; font-size:12px; white-space:normal; }
.handling label:first-child strong,.handling label:first-child small { grid-column:1 / -1; padding-inline:6px; }
.handling-help-note { margin-top:-4px; }
.cargo-details { gap:4px; }
#contact { gap:8px; }
.contact-group { display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--line-soft); padding-top:6px; }
.fare-body,.fare-estimate,.fare-checkout { gap:10px; }
.distance-row { grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:end; }
.distance-row > .field { min-width:0; }
#calculate-route { align-self:start; margin-top:25px; height:44px; min-height:44px; padding:6px; font-size:14px; white-space:nowrap; }
#distance { font-size:16px; }
.price-row { padding-top:8px; }
.price-row > span,.total > span { font-size:14px; }
#base-fare { font-size:17px; color:#9AA0A6; }#base-fare.has-amount { color:var(--text); }
#total-fare { font-size:24px; }
#fare .total { padding:12px; background:var(--bg); border:0; border-radius:8px; }
#total-fare-note { flex-basis:100%; text-align:right; color:var(--muted); font-size:13px; font-weight:400; }
.fare-compact { display:flex; flex-direction:column; gap:8px; }
.consent { min-height:40px; font-size:14px; }.submit { min-height:48px; font-size:16px; }
#vehicle-info { display:none; }#vehicle-selection-summary { margin:0; }
.tabs,.next { display:none !important; }
.order-legal { max-width:1624px; margin:0 auto; padding:16px 24px; border:0; font-size:12px; }
.order-legal span,.order-legal .legal-registration span { display:inline; }
.order-legal .legal-policies { display:block; }.order-legal a { display:inline; min-height:0; }
.phone,a[href^="tel:"],.order-legal .legal-brand { letter-spacing:0; word-spacing:.15em; }
#mobile-fare,#total-fare { letter-spacing:0; word-spacing:0; }
.rail { display:none; }
@media (min-width:1024px) {
 main { margin-left:var(--rail-width); }
 .order-legal { margin-left:var(--rail-width); }
 .rail { position:fixed; top:64px; bottom:0; left:0; z-index:2; display:flex; width:var(--rail-width); padding:8px 6px; overflow-y:auto; overscroll-behavior:contain; }
 .rail a { flex-shrink:0; gap:3px; min-height:44px; padding:6px 2px; border-radius:6px; }
 .rail a:hover { background:var(--bg); }
 .rail span { font-size:14px; line-height:1.45; }
 .rail img { width:24px; height:24px; }
 .rail .on { background:#FFF4F3; }.rail .on::before { top:8px; bottom:8px; }
 .rail .rail-section { font-size:14px; }
 .rail .rail-policy { flex-direction:row; gap:4px; min-height:44px; }
 .rail .rail-policy img { width:18px; height:18px; }.rail .rail-policy span { font-size:14px; }
 .rail .rail-call { margin-top:auto; padding-top:12px; }
 .location .address { grid-template-columns:minmax(0,1fr); }
}
@media (min-width:1200px) {
 .schedule { grid-template-columns:minmax(0,1fr) 108px; }
 .location .address { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .field:has(> .address-search) { grid-template-columns:minmax(0,1fr); position:relative; }
 .field:has(> .address-search) > input { padding-right:74px; }
 .address-search { position:absolute; right:1px; bottom:1px; grid-column:auto; grid-row:auto; width:68px; min-width:68px; height:42px; min-height:42px; border:0; border-left:1px solid var(--line); border-radius:0 6px 6px 0; padding:4px; font-size:12px; }
 .location input { font-size:16px; }
 .locations-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
 .location + .location { border-top:1px solid var(--line-soft); padding-top:12px; }
 .route-options { grid-template-columns:minmax(0,1fr); gap:0; }
 .panel,.panel.active { gap:12px; }
 #route,#vehicle { min-height:350px; }
 #route,#vehicle,#cargo,#contact { align-self:stretch; }
 #cargo,#contact { min-height:390px; }
 #fare .note,#distance-status,#fare .fare-compact p { font-size:14px; }
 .fare-body,.fare-estimate,.fare-checkout { gap:10px; }
}
@media (min-width:1001px) and (max-width:1199px) {
 #order-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #route { grid-column:1 / -1; }
 #vehicle { grid-column:1; grid-row:2; }#cargo { grid-column:2; grid-row:2; }
 #contact { grid-column:1; grid-row:3; }#fare { grid-column:2; grid-row:3; position:static; }
 .route-options { grid-template-columns:1fr 1fr 1.8fr; }
}
@media (max-width:1000px) {
 main { padding:16px 12px 0; }
 #order-form { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .panel,.panel.active { padding:14px; }
 #route { grid-column:1 / -1; grid-row:1; }
 #vehicle { grid-column:1; grid-row:2; }#cargo { grid-column:2; grid-row:2; }
 #contact { grid-column:1; grid-row:3; }#fare { grid-column:2; grid-row:3; position:static; }
 .route-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
 .vehicle-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .handling { grid-template-columns:minmax(0,1fr); }
 #cargo .schedule { grid-template-columns:minmax(0,1fr); }
 .order-legal { padding:16px 12px; }
}
@media (max-width:800px) {
 body { padding-bottom:calc(152px + env(safe-area-inset-bottom)); }
 header { height:56px; padding:4px 12px; gap:8px; }
 .brand { flex-basis:36px; }.brand img { width:36px; height:36px; }.page-title { flex:1; font-size:16px; }
 .panel,.panel.active { scroll-margin-top:16px; }
 input,select,textarea { font-size:16px; min-height:44px; }
 button,.optional > summary,.consent,.flags label,.service label,.inline,header a { min-height:44px; }
 button,header a { min-width:44px; }.address-search { height:44px; min-height:44px; font-size:14px; }
 .text-btn { min-height:36px; font-size:12px; }
 .consent,.flags label,.service label,.inline { display:flex; align-items:center; }
 .note a,.privacy-note a,.order-legal a { display:inline-flex; align-items:center; min-height:44px; }
 #calculate-route { min-height:44px; height:44px; margin-top:25px; }
 .mobile-bottom { height:auto; min-height:144px; padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -4px 16px #20252C0A; }
 .mobile-bottom > div { grid-template-columns:minmax(0,1fr) minmax(0,150px); min-height:96px; padding:8px 12px; gap:0 8px; }
 .mobile-bottom span { font-size:12px; }
 #mobile-fare { font-size:15px; white-space:normal; overflow-wrap:anywhere; grid-row:2; }
 #jump-fare { grid-column:1; grid-row:3; min-height:44px; padding:0; justify-content:flex-start; border:0; background:transparent; color:var(--muted); font-size:14px; text-decoration:underline; }
 .mobile-submit { grid-column:2; grid-row:1 / 4; min-height:48px; background:var(--red); color:#fff; border-color:var(--red); font-size:15px; font-weight:700; }
 .mobile-bottom > a { min-height:44px; font-size:14px; }
}
@media (min-width:673px) and (max-width:800px) {
 #order-form { display:grid; padding:0; }
 .locations-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .location + .location { border-top:0; padding-top:0; }
}
@media (max-width:672px) {
 main { padding:12px 10px 0; }
 #order-form { display:flex; flex-direction:column; gap:12px; padding:0; }
 .panel,.panel.active { width:100%; padding:14px; }
 .locations-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
 .location + .location { border-top:1px solid var(--line-soft); padding-top:14px; }
 .route-options { grid-template-columns:minmax(0,1fr); gap:0; }
 .vehicle-cards { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .vehicle-cards label { flex-direction:column; gap:0; height:76px; }
 .vehicle-symbol { flex:0 0 44px; width:60px; height:44px; }
 .handling { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .handling label { min-height:90px; }
 #contact .row { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
 .order-legal { padding-inline:12px; }
}
/* fold-responsive 2026-10-31: intrinsic sizing, keyboard and short landscape. */
html { scroll-padding-top:16px; scroll-padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
body { min-height:100vh; min-height:100dvh; }
:is(header,main,.panel,.panel > *,.route-options > *,.locations-grid > *,.row > *,.fare-body > *,.fare-estimate > *,.fare-checkout > *) { min-width:0; }
:is(input,textarea,select,button,label,output,.upload,#files,#file-list,[class^="file"],[class*=" file"]) { min-width:0; max-width:100%; overflow-wrap:anywhere; }
input,textarea,select { scroll-margin-block:16px; }
.upload,#file-list,label[for="files"] { width:100%; }
#file-list { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-name,.filename { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
dialog { max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); overflow:auto; scroll-padding-block:8px; }
#address-results { max-height:min(320px,35dvh); }
@media (max-width:800px) {
 html { scroll-padding-bottom:calc(164px + env(safe-area-inset-bottom)); }
 body:has(:is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select):focus) { padding-bottom:16px; }
 body:has(:is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select):focus) .mobile-bottom { display:none; }
 html:has(:is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select):focus) { scroll-padding-bottom:16px; }
}
@media (max-height:480px) {
 html { scroll-padding-block:8px; }
 header { position:static; height:auto; min-height:48px; padding-block:2px; }
 .mobile-bottom { display:none; }body { padding-bottom:8px; }
 #fare { position:static; }
 input,textarea,select { scroll-margin-block:8px; }
 dialog { margin-block:8px; padding:10px; }.dialog-head { padding-bottom:8px; }
 #address-status { margin-block:8px; }#address-results { max-height:30dvh; }
}
@media (max-width:475px) { .schedule { grid-template-columns:minmax(0,1fr); } }
@media (max-width:400px) {
 #contact .field:has(> #originPhone),#contact .field:has(> #destinationPhone) { grid-column:1 / -1; }
}
.sensitive-note { margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--muted); overflow-wrap:anywhere; }
#via-fields .sensitive-note { grid-column:1 / -1; }

/* The compact grid keeps required fields visible; native details hold options. */
.handling-disclosure > summary { justify-content:flex-start; gap:8px; flex-wrap:wrap; }
.handling-disclosure > summary::after { margin-left:auto; }
.handling-disclosure .section-label { display:inline; font-weight:600; }
.handling-disclosure .section-label > span { display:inline; margin-left:6px; }
.handling-selection { color:var(--muted); font-size:13px; }
.handling-disclosure .handling { padding-top:6px; }
.destination-contact .contact-group { border-top:0; padding-top:0; }
.destination-contact .section-label { justify-content:flex-end; }
.privacy-details .privacy-note { margin:0; }
@media (min-width:1200px) {
 #fare .total { flex-direction:column; align-items:flex-start; gap:6px; }
 #total-fare-note { flex-basis:auto; text-align:left; }
}

.route-more > .details-content { padding-bottom:0; }