* { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Inter', sans-serif;
      padding: 20px 10px 30px 10px;
      background: 
        radial-gradient(ellipse at 15% 20%, rgba(200, 230, 255, 0.7) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 75%, rgba(220, 210, 255, 0.6) 0%, transparent 55%),
        radial-gradient(ellipse at 40% 60%, rgba(255, 240, 245, 0.5) 0%, transparent 50%),
        linear-gradient(165deg, #f0f4fa 0%, #e8eef8 30%, #f5f7fc 60%, #eef2f9 100%);
      background-attachment: fixed;
    }

    .glass-card {
      max-width: 720px;
      width: 100%;
      background: rgba(255, 255, 255, 0.35);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border-radius: 40px;
      box-shadow:
        0 30px 60px rgba(30, 50, 90, 0.10),
        0 8px 20px rgba(30, 50, 90, 0.06),
        0 2px 6px rgba(30, 50, 90, 0.03),
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        inset 0 1px 3px rgba(255, 255, 255, 0.6);
      padding: 38px 32px 60px 32px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      color: #1e293b;
      position: relative;
    }
    .glass-card::before {
      content: '';
      position: absolute;
      top: 20px;
      left: 28px;
      right: 28px;
      height: 60px;
      border-radius: 30px;
      background: rgba(255, 255, 255, 0.15);
      filter: blur(20px);
      pointer-events: none;
      z-index: 0;
    }

    h1 {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 650;
      font-size: 28px;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
      position: relative;
      z-index: 1;
      background: linear-gradient(135deg, #1e3a5f, #2563eb);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    h1 i {
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      color: #2563eb;
      padding: 14px;
      border-radius: 20px;
      font-size: 26px;
      box-shadow: 0 8px 18px rgba(30, 50, 90, 0.07), inset 0 1px 2px rgba(255, 255, 255, 0.8);
      -webkit-text-fill-color: #2563eb;
    }
    .sub {
      font-size: 15px;
      color: #475569;
      margin-bottom: 30px;
      padding-left: 14px;
      font-weight: 430;
      padding: 7px 14px;
      position: relative;
      z-index: 1;
    }

    .section { margin-bottom: 35px; position: relative; z-index: 1; }
    .section-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      font-size: 17px;
      color: #0f172a;
      margin-bottom: 8px;
      padding: 9px 18px;
      border-radius: 32px;
      width: fit-content;
    }
    .section-title i { color: #2563eb; width: 24px; font-size: 18px; }

    .piano-row { display: flex; gap: 14px; }
    .piano-card { flex: 1; }
    .piano-card input { display: none; }
    .piano-card label {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 60px;
      background: rgba(255, 255, 255, 0.35);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-radius: 26px;
      padding: 22px 14px;
      border: 1.5px solid rgba(200, 210, 230, 0.55);
      box-shadow:
        0 6px 18px rgba(30, 50, 90, 0.04),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
      cursor: pointer;
      transition: all 0.25s ease;
      font-weight: 600;
      font-size: 17px;
      color: #64748b;
      letter-spacing: 0.3px;
    }
    .piano-card label small {
      font-weight: 400;
      font-size: 12px;
      opacity: 0.65;
      margin-top: 4px;
    }
    .piano-card input:checked + label {
      background: rgba(37, 99, 235, 0.12);
      border-color: rgba(37, 99, 235, 0.55);
      box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.10),
        0 10px 28px rgba(37, 99, 235, 0.10),
        0 4px 8px rgba(30, 50, 90, 0.05),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
      transform: translateY(-3px);
      color: #1e40af;
      font-weight: 700;
    }
    .piano-card input:checked + label small {
      color: #3b82f6;
      opacity: 0.85;
    }

    .move-indicator {
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(18px);
      border-radius: 42px;
      padding: 14px 26px;
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid rgba(200, 215, 245, 0.55);
      font-weight: 600;
      color: #0f172a;
      box-shadow: 0 4px 16px rgba(30, 50, 90, 0.04), inset 0 1px 2px rgba(255,255,255,0.5);
    }
    .move-indicator i { color: #2563eb; font-size: 18px; }

    .adjacent-box {
      margin-top: 18px;
      background: rgba(255, 255, 255, 0.38);
      backdrop-filter: blur(18px);
      border-radius: 32px;
      padding: 14px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid rgba(200, 215, 245, 0.5);
      box-shadow: 0 4px 16px rgba(30, 50, 90, 0.03), inset 0 1px 2px rgba(255,255,255,0.45);
    }
    .toggle-switch { position: relative; display: inline-block; width: 54px; height: 30px; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .slider {
      position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
      background-color: rgba(180, 200, 220, 0.75); transition: .25s; border-radius: 34px;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    }
    .slider:before {
      position: absolute; content: ""; height: 24px; width: 24px; left: 3px; bottom: 3px;
      background: white; border-radius: 50%;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0,0,0,0.06);
      transition: .25s;
    }
    input:checked + .slider { background: #22c55e; }
    input:checked + .slider:before { transform: translateX(24px); }

    .distance-area {
      background: rgba(255, 255, 255, 0.35);
      backdrop-filter: blur(18px);
      border-radius: 32px;
      padding: 18px 22px;
      border: 1px solid rgba(200, 215, 245, 0.5);
      box-shadow: 0 4px 16px rgba(30, 50, 90, 0.03), inset 0 1px 2px rgba(255,255,255,0.45);
    }
    .dist-header { display: flex; justify-content: space-between; margin-bottom: 14px; }
    .dist-value {
      background: rgba(255, 255, 255, 0.65);
      backdrop-filter: blur(12px);
      padding: 7px 20px;
      border-radius: 42px;
      font-weight: 700;
      color: #58BD38;
      border: 1px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 2px 8px rgba(30,50,90,0.04);
    }
    input[type=range] { width: 100%; accent-color: #2563eb; }

    .distance-hint {
      margin-top: 15px;
      font-size: 15px;
      color: #475569;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px 10px;
    }
	.distance-hint span#feeDesc {
		font-size: 16px;
		color: #FF6600;
		line-height: 32px;
		font-weight: bold;
    }
	.fee-note {
		margin-top: 0px;
		padding: 5px 10px;
		font-size: 15px;
		color: #666666;
		line-height: 28px;
    }

    .elevator-block {
      background: rgba(255, 255, 255, 0.38);
      backdrop-filter: blur(18px);
      border-radius: 30px;
      padding: 20px;
      border: 1px solid rgba(200, 215, 245, 0.5);
      box-shadow: 0 4px 16px rgba(30, 50, 90, 0.03), inset 0 1px 2px rgba(255,255,255,0.45);
    }
    .elevator-item { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .elevator-item:last-child { margin-bottom: 0; }
    .floor-select { margin-left: auto; display: flex; align-items: center; gap: 8px; }
    .floor-select select {
      padding: 7px 14px; border-radius: 30px;
      border: 1px solid rgba(180, 200, 240, 0.7);
      background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(10px);
      font-weight: 500;
    }

    .pack-row {
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(18px);
      border-radius: 36px;
      padding: 16px 26px;
      margin: 22px 0 10px;
      border: 1px solid rgba(200, 215, 245, 0.5);
      box-shadow: 0 4px 16px rgba(30, 50, 90, 0.03), inset 0 1px 2px rgba(255,255,255,0.5);
    }
    .pack-price {
      font-weight: 700; color: #15803d;
      background: rgba(255, 255, 255, 0.75);
      padding: 6px 16px;
      border-radius: 42px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }

    .btn-group { display: flex; gap: 14px; margin-bottom: 22px; }
    .calc-btn, .reset-btn {
      flex: 1;
      border: none;
      font-weight: 600;
      font-size: 16px;
      padding: 17px 14px;
      border-radius: 60px;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
      color: white;
      text-shadow: 0 1px 2px rgba(0,0,0,0.15);
      letter-spacing: 0.3px;
    }
    .calc-btn {
      background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
      box-shadow: 0 10px 0 #15803d, 0 12px 28px rgba(0, 0, 0, 0.10), inset 0 1px 3px rgba(255,255,255,0.5);
      border: 1px solid rgba(255,255,255,0.25);
    }
    .calc-btn:active {
      transform: translateY(5px);
      box-shadow: 0 5px 0 #15803d, 0 8px 16px rgba(0,0,0,0.08), inset 0 1px 3px rgba(255,255,255,0.5);
    }
    .reset-btn {
      background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%);
      color: #1e293b;
      text-shadow: none;
      box-shadow: 0 8px 0 #94a3b8, 0 8px 18px rgba(0,0,0,0.06), inset 0 1px 2px rgba(255,255,255,0.6);
      border: 1px solid rgba(255,255,255,0.35);
    }
    .reset-btn:active {
      transform: translateY(4px);
      box-shadow: 0 4px 0 #94a3b8, 0 5px 10px rgba(0,0,0,0.05), inset 0 1px 2px rgba(255,255,255,0.6);
    }

    .fee-panel {
      background: rgba(255, 255, 255, 0.45);
      backdrop-filter: blur(22px);
      border-radius: 36px;
      padding: 24px;
      margin-bottom: 22px;
      border: 1px solid rgba(200, 215, 245, 0.5);
      box-shadow: 0 8px 28px rgba(30, 50, 90, 0.05), inset 0 1px 2px rgba(255,255,255,0.55);
    }
    .fee-row { display: flex; justify-content: space-between; padding: 7px 6px; }
    .fee-row.total {
      margin-top: 14px; padding-top: 18px;
      border-top: 2px dashed rgba(37, 99, 235, 0.25);
      font-weight: 800; font-size: 23px;
    }

    .booking-form {
      background: rgba(255, 255, 255, 0.42);
      backdrop-filter: blur(22px);
      border-radius: 38px;
      padding: 50px 24px 60px 24px;
      margin: 18px 0 12px;
      border: 1px solid rgba(200, 215, 245, 0.5);
      box-shadow: 0 8px 28px rgba(30, 50, 90, 0.04), inset 0 1px 2px rgba(255,255,255,0.5);
    }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-field { margin-bottom: 15px; }
    .form-field label { display: block; margin-bottom: 6px; font-weight: 500; color: #1e293b; }
    .form-field input {
      width: 100%; padding: 15px 20px; border-radius: 44px;
      border: 1px solid rgba(180, 200, 240, 0.7);
      background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(12px);
      font-size: 15px;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
    }

    .booking-btn {
      width: 100%;
      background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
      border: none;
      color: white;
      font-weight: 700;
      font-size: 20px;
      padding: 19px;
      border-radius: 62px;
      display: flex; align-items: center; justify-content: center;
      gap: 14px;
      cursor: pointer;
      box-shadow: 0 10px 0 #15803d, 0 12px 28px rgba(0, 0, 0, 0.10), inset 0 1px 3px rgba(255,255,255,0.5);
      transition: 0.2s;
      text-shadow: 0 1px 2px rgba(0,0,0,0.15);
      letter-spacing: 0.5px;
      border: 1px solid rgba(255,255,255,0.25);
    }
    .booking-btn:active {
      transform: translateY(5px);
      box-shadow: 0 5px 0 #15803d, 0 8px 16px rgba(0,0,0,0.08), inset 0 1px 3px rgba(255,255,255,0.5);
    }

    .footnote { text-align: center; margin-top: 20px; color: #64748b; font-size: 14px; }

    @media (max-width:550px) {
       body {
		  padding: 10px 10px 30px 10px;
		}
		h1 {
		  font-size: 22px;
		  letter-spacing: -0.02em;
		  margin-bottom: 6px;
		}
	  .glass-card { padding: 26px 18px 40px 18px; border-radius: 20px; }
      .form-grid { grid-template-columns: 1fr; }
	  
    }
	
    @media (max-width:350px) {
       body {
		  padding: 5px 5px 30px 5px;
		}
	  .glass-card { padding: 20px 15px 40px 15px; border-radius: 20px; }
      .form-grid { grid-template-columns: 1fr; }
	  
    }