:root {
      --green: #03c75a;
      --green-dark: #019747;
      --ink: #17202a;
      --muted: #667085;
      --line: #e4e8ee;
      --card: #ffffff;
      --shadow: 0 10px 28px rgba(23, 32, 42, 0.12);
    }

    * { box-sizing: border-box; }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      color: var(--ink);
      font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
      letter-spacing: 0;
      overflow: hidden;
    }

    a,
    button {
      color: inherit;
      font: inherit;
      text-decoration: none;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .map-page {
      position: fixed;
      inset: 0;
      background: #eef7f1;
    }

    #full-map {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: min(430px, 100%);
      transform: translateX(-50%);
    }

    .map-error {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: min(430px, 100%);
      z-index: 5;
      place-items: center;
      padding: 28px;
      background: #eef7f1;
      text-align: center;
      transform: translateX(-50%);
    }

    .map-error.is-visible { display: grid; }
    .map-error strong { display: block; margin-bottom: 8px; font-size: 18px; }
    .map-error p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

    .app-header {
      position: fixed;
      top: 0;
      left: 50%;
      z-index: 20;
      width: min(430px, 100%);
      padding: 14px 18px 12px;
      border-bottom: 1px solid rgba(228, 232, 238, 0.9);
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(14px);
      transform: translateX(-50%);
    }

    .header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 9px;
      font-weight: 900;
      color: var(--green-dark);
      font-size: 20px;
    }

    .brand-mark {
      width: 50px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      overflow: hidden;
      flex: 0 0 auto;
    }

    .brand-mark img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .status-pill {
      padding: 7px 10px;
      border-radius: 999px;
      color: var(--green-dark);
      background: #e7f8ee;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .search-area {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      margin-top: 12px;
    }

    .search-input {
      width: 100%;
      min-width: 0;
      height: 42px;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #f8faf9;
      color: var(--ink);
      font-size: 16px;
      outline: none;
    }

    .search-input:focus {
      border-color: var(--green);
      background: #fff;
    }

    .location-button {
      min-width: 76px;
      height: 42px;
      padding: 0 12px;
      border-radius: 12px;
      background: #e7f8ee;
      color: var(--green-dark);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .suggestions {
      display: none;
      position: absolute;
      top: 48px;
      left: 0;
      right: 84px;
      z-index: 30;
      max-height: 246px;
      overflow-y: auto;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }

    .suggestions.is-visible {
      display: grid;
      gap: 4px;
    }

    .suggestion-item {
      display: block;
      width: 100%;
      padding: 10px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .suggestion-item:focus,
    .suggestion-item:hover {
      background: #effbf4;
    }

    .suggestion-item strong,
    .suggestion-item span {
      display: block;
    }

    .suggestion-item strong {
      font-size: 13px;
      font-weight: 900;
    }

    .suggestion-item span {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .center-sheet {
      position: absolute;
      left: 50%;
      width: min(406px, calc(100% - 24px));
      bottom: calc(86px + env(safe-area-inset-bottom));
      z-index: 10;
      display: grid;
      gap: 10px;
      max-height: 42vh;
      padding: 13px;
      border: 1px solid rgba(228, 232, 238, 0.9);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
      transform: translateX(-50%) translateY(var(--drag-offset, 0));
      transition: max-height 0.22s ease, padding 0.22s ease, transform 0.22s ease;
    }

    .center-sheet.is-collapsed {
      gap: 0;
      padding: 10px 12px;
      border-radius: 16px;
    }

    .center-sheet.is-dragging {
      transition: none;
    }

    .sheet-handle {
      width: 42px;
      height: 4px;
      margin: 0 auto 2px;
      border-radius: 999px;
      background: #cfd8d3;
      cursor: grab;
      touch-action: none;
    }

    .sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    .sheet-head h1 {
      margin: 0;
      font-size: 18px;
      font-weight: 900;
    }

    .sheet-head span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .sheet-toggle {
      min-height: 34px;
      padding: 0 10px;
      border-radius: 10px;
      background: #effbf4;
      color: var(--green-dark);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .center-list {
      display: grid;
      gap: 8px;
      max-height: calc(42vh - 48px);
      overflow-y: auto;
      scrollbar-width: none;
    }

    .center-sheet.is-collapsed .center-list {
      display: none;
    }

    .center-list::-webkit-scrollbar { display: none; }

    .center-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 58px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #fff;
      text-align: left;
    }

    .center-item.is-active {
      border-color: var(--green);
      background: #effbf4;
    }

    .center-item strong,
    .center-item em,
    .center-item span {
      display: block;
    }

    .center-item strong {
      font-size: 14px;
      font-style: normal;
      font-weight: 900;
    }

    .center-item em {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-style: normal;
      line-height: 1.35;
    }

    .center-item span {
      color: var(--green-dark);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .bottom-nav {
      position: fixed;
      left: 50%;
      bottom: 0;
      z-index: 20;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: min(430px, 100%);
      padding: 9px 12px calc(10px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 -8px 22px rgba(23, 32, 42, 0.06);
      backdrop-filter: blur(16px);
      transform: translateX(-50%);
    }

    .nav-item {
      display: grid;
      place-items: center;
      gap: 4px;
      min-height: 62px;
      border-radius: 16px;
      color: #6f7b8d;
      font-size: 13px;
      font-weight: 900;
      transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .nav-item:active {
      transform: translateY(1px);
    }

    .nav-item svg {
      width: 24px;
      height: 24px;
      stroke-width: 2.2;
    }

    .nav-item.active {
      color: var(--green-dark);
      background: #eafaf1;
    }

    .route-loading-dialog {
      width: min(280px, calc(100% - 40px));
      padding: 26px 22px 22px;
      border: 0;
      border-radius: 18px;
      background: #fff;
      color: #17202a;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
      text-align: center;
    }

    .route-loading-dialog::backdrop {
      background: rgba(23, 32, 42, 0.42);
      backdrop-filter: blur(2px);
    }

    .route-loading-dialog strong {
      display: block;
      margin-top: 14px;
      font-size: 16px;
    }

    .route-loading-dialog p {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .route-loading-spinner {
      width: 34px;
      height: 34px;
      margin: 0 auto;
      border: 4px solid #dff6e9;
      border-top-color: var(--green);
      border-radius: 50%;
      animation: route-loading-spin 0.8s linear infinite;
    }

    @keyframes route-loading-spin {
      to { transform: rotate(360deg); }
    }

    @media (min-width: 720px) {
      .center-sheet {
        width: 406px;
        max-height: calc(100vh - 160px);
      }

    }