:root {
    color-scheme: light;
    --bg: #f5f7fb;
    --surface: rgba(255, 255, 255, 0.96);
    --surface-muted: #f0f4f8;
    --text: #111827;
    --subtext: #64748b;
    --line: rgba(15, 23, 42, 0.08);
    --primary: #0878f9;
    --primary-dark: #0562d0;
    --primary-soft: #e8f2ff;
    --hospital: #1185ff;
    --pharmacy: #17a673;
    --emergency: #ed4b55;
    --aed: #7c3aed;
    --shadow-lg: 0 24px 70px rgba(42, 53, 71, 0.16);
    --shadow-md: 0 12px 34px rgba(42, 53, 71, 0.11);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
  }

  body {
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background:
      radial-gradient(circle at 15% 0%, rgba(8, 120, 249, 0.1), transparent 30%),
      var(--bg);
    color: var(--text);
    font-family:
      -apple-system,
      BlinkMacSystemFont,
      "Apple SD Gothic Neo",
      "Pretendard",
      "Noto Sans KR",
      "Segoe UI",
      sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  button,
  input,
  select {
    font: inherit;
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }

  button {
    color: inherit;
  }

  .app-shell {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(100%, 1180px);
    height: 100dvh;
    min-height: 620px;
    margin: 0 auto;
    overflow: hidden;
    background: #edf2f7;
  }

  .app-header {
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
    padding:
      calc(14px + var(--safe-top))
      clamp(18px, 4vw, 34px)
      14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
  }

  .brand-lockup {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .brand-button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  [hidden] {
    display: none !important;
  }

  .home-screen,
  .first-aid-screen {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(circle at 100% 0%, rgba(8, 120, 249, 0.11), transparent 32%),
      #f6f8fb;
  }

  .home-screen {
    grid-row: 2 / -1;
    padding: clamp(26px, 7vw, 54px) clamp(18px, 5vw, 42px) calc(26px + var(--safe-bottom));
  }

  .home-hero {
    max-width: 650px;
    margin: 0 auto 24px;
  }

  .home-hero h1,
  .first-aid-intro h1 {
    margin: 0;
    font-size: clamp(30px, 8vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.06em;
  }

  .home-hero > p:last-child,
  .first-aid-intro > p:last-child {
    margin: 13px 0 0;
    color: var(--subtext);
    font-size: 14px;
    line-height: 1.65;
    word-break: keep-all;
  }

  .home-actions {
    display: grid;
    max-width: 650px;
    margin: 0 auto;
    gap: 13px;
  }

  .home-action-card {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 176px;
    padding: 22px 44px 55px 19px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 13px 36px rgba(44, 57, 76, 0.1);
    text-align: left;
    cursor: pointer;
  }

  .home-action-card:active {
    transform: scale(0.985);
  }

  .home-action-symbol {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: #e9f3ff;
    color: var(--primary);
    font-size: 25px;
    font-weight: 900;
  }

  .first-aid-entry .home-action-symbol {
    background: #fff0f1;
    color: var(--emergency);
  }

  .home-action-copy {
    min-width: 0;
  }

  .home-action-copy small {
    display: block;
    margin-bottom: 4px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
  }

  .first-aid-entry .home-action-copy small {
    color: var(--emergency);
  }

  .home-action-copy strong {
    display: block;
    font-size: clamp(18px, 5vw, 23px);
    line-height: 1.25;
    letter-spacing: -0.045em;
  }

  .home-action-copy > span {
    display: block;
    margin-top: 6px;
    color: var(--subtext);
    font-size: 12px;
    line-height: 1.45;
  }

  .home-action-tags {
    position: absolute;
    right: 18px;
    bottom: 17px;
    left: 19px;
    display: flex;
    gap: 6px;
    overflow: hidden;
  }

  .home-action-tags b {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: #fff1f2;
    color: #c93845;
    font-size: 10px;
  }

  .nearby-tags b {
    background: #eaf3ff;
    color: #086bdc;
  }

  .home-action-arrow {
    color: #9aa7b7;
    font-size: 31px;
  }

  .home-emergency-note {
    max-width: 650px;
    margin: 19px auto 0;
    color: #6b7788;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
  }

  .home-emergency-note a {
    color: var(--emergency);
    font-weight: 900;
  }

  .copyright-line {
    margin: 14px auto 0;
    color: #9aa5b3;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
  }

  .nearby-copyright {
    margin-top: 7px;
  }

  .nearby-screen {
    display: contents;
  }

  .first-aid-screen {
    grid-row: 2 / -1;
    padding-bottom: var(--safe-bottom);
  }

  .screen-toolbar {
    position: sticky;
    z-index: 40;
    top: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 56px;
    padding: 0 17px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
  }

  .screen-toolbar button,
  .screen-toolbar a {
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
  }

  .screen-toolbar button {
    justify-self: start;
    padding: 0;
  }

  .screen-toolbar a {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    color: var(--emergency);
  }

  .first-aid-content,
  .first-aid-detail {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 24px 17px 34px;
  }

  .first-aid-intro {
    margin-bottom: 18px;
  }

  .first-aid-intro h1 {
    font-size: clamp(28px, 7vw, 40px);
  }

  .basic-guide-card,
  .matrix-guide-button {
    width: 100%;
    min-height: 76px;
    margin-bottom: 14px;
    padding: 15px 17px;
    border: 1px solid rgba(8, 120, 249, 0.14);
    border-radius: 18px;
    background: linear-gradient(135deg, #eaf4ff, #f8fbff);
    color: #0c65c5;
    text-align: left;
    cursor: pointer;
  }

  .basic-guide-card span {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 800;
  }

  .basic-guide-card strong {
    display: block;
    color: var(--text);
    font-size: 15px;
  }

  .first-aid-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .first-aid-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 104px;
    padding: 14px 25px 14px 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(44, 57, 76, 0.06);
    text-align: left;
    cursor: pointer;
  }

  .first-aid-card:active {
    transform: scale(0.98);
  }

  .first-aid-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #eef4fa;
    color: #466179;
    font-size: 11px;
    font-weight: 900;
  }

  .first-aid-card.is-urgent .first-aid-icon {
    background: #fff0f1;
    color: #d63e4a;
  }

  .first-aid-card-copy strong,
  .first-aid-card-copy small {
    display: block;
  }

  .first-aid-card-copy strong {
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: -0.03em;
    word-break: keep-all;
  }

  .first-aid-card-copy small {
    margin-top: 4px;
    color: var(--subtext);
    font-size: 10px;
    line-height: 1.35;
  }

  .first-aid-card-arrow {
    position: absolute;
    top: 50%;
    right: 9px;
    color: #a1adba;
    font-size: 20px;
    transform: translateY(-50%);
  }

  .matrix-guide-button {
    min-height: 52px;
    margin: 13px 0 0;
    background: #fff;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
  }

  .medical-disclaimer {
    margin: 18px 2px 0;
    color: #788596;
    font-size: 10px;
    line-height: 1.6;
    word-break: keep-all;
  }

  .detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .detail-title-row button {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-weight: 800;
    cursor: pointer;
  }

  .detail-title-row span {
    color: var(--subtext);
    font-size: 11px;
    font-weight: 700;
  }

  .first-aid-detail h1 {
    margin: 5px 0 15px;
    font-size: clamp(24px, 7vw, 36px);
    letter-spacing: -0.05em;
  }

  .guide-image-frame {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-md);
  }

  .guide-image-frame img {
    display: block;
    width: 100%;
    height: auto;
    cursor: zoom-in;
  }

  .image-help {
    margin: 9px 0 0;
    color: var(--subtext);
    font-size: 10px;
    text-align: center;
  }

  .first-aid-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }

  .first-aid-pager button {
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: #eaf3ff;
    color: var(--primary);
    font-weight: 800;
  }

  .first-aid-pager button:last-child {
    justify-self: stretch;
  }

  .first-aid-pager button:disabled {
    opacity: 0.35;
  }

  .first-aid-pager span {
    color: var(--subtext);
    font-size: 12px;
    font-weight: 800;
  }

  .first-aid-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 17px;
  }

  .first-aid-quick-actions a,
  .first-aid-quick-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 8px;
    border: 0;
    border-radius: 14px;
    background: #e9f3ff;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .first-aid-quick-actions .call-119-action {
    background: var(--emergency);
    color: #fff;
  }

  .image-lightbox {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 58px 10px 18px;
    overflow: auto;
    background: rgba(6, 12, 20, 0.93);
  }

  .image-lightbox button {
    position: fixed;
    z-index: 2;
    top: calc(10px + var(--safe-top));
    right: 13px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
  }

  .image-lightbox img {
    display: block;
    width: min(100%, 1100px);
    max-width: 1100px;
    height: auto;
  }

  .lightbox-brand {
    position: fixed;
    z-index: 2;
    right: 13px;
    bottom: calc(10px + var(--safe-bottom));
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.88);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }

  @media (orientation: portrait) and (max-width: 759px) {
    .image-lightbox {
      padding: 0;
      overflow: hidden;
    }

    .image-lightbox img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(calc(100dvh - 76px), calc((100dvw - 18px) * 1.79));
      max-width: none;
      translate: -50% -50%;
      rotate: 90deg;
      transform-origin: center;
    }
  }

  body.lightbox-open {
    overflow: hidden;
  }

  .brand-logo {
    display: block;
    width: auto;
    max-width: 112px;
    height: 36px;
    object-fit: contain;
    object-position: left center;
  }

  .service-name {
    padding: 4px 0 2px 9px;
    border-left: 1px solid #dbe2e9;
    color: #566273;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
  }

  .eyebrow {
    margin: 0 0 3px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
  }

  .emergency-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(237, 75, 85, 0.16);
    border-radius: 999px;
    background: #fff4f4;
    color: #d9333f;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
  }

  .call-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--emergency);
    box-shadow: 0 0 0 5px rgba(237, 75, 85, 0.1);
  }

  .location-bar {
    z-index: 18;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px clamp(18px, 4vw, 34px);
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(15px);
  }

  .location-icon {
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
  }

  .location-icon::after {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    content: "";
  }

  .location-copy {
    min-width: 0;
  }

  .location-label {
    display: block;
    margin-bottom: 2px;
    color: var(--subtext);
    font-size: 11px;
  }

  .location-copy strong {
    display: block;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text-button {
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 11px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
  }

  .map-stage {
    position: relative;
    min-height: 0;
  }

  .map-canvas {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
      linear-gradient(135deg, rgba(235, 241, 246, 0.8), rgba(216, 227, 237, 0.95));
  }

  .map-action-bar {
    position: absolute;
    z-index: 8;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    left: 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
  }

  .map-center-search-button,
  .my-location-map-button {
    min-height: 44px;
    border: 1px solid rgba(17, 101, 206, 0.16);
    background: rgba(255, 255, 255, 0.96);
    color: #096fd1;
    box-shadow: 0 8px 24px rgba(30, 55, 82, 0.18);
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(14px);
  }

  .map-center-search-button {
    padding: 0 17px;
    border-radius: 999px;
  }

  .my-location-map-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 13px;
    border-radius: 999px;
  }

  .map-center-search-button:active,
  .my-location-map-button:active {
    transform: scale(0.97);
  }

  .map-center-search-button[hidden],
  .my-location-map-button[hidden] {
    display: none;
  }

  .map-grid {
    position: absolute;
    inset: -20%;
    opacity: 0.58;
    background-image:
      linear-gradient(rgba(125, 147, 167, 0.18) 1px, transparent 1px),
      linear-gradient(90deg, rgba(125, 147, 167, 0.18) 1px, transparent 1px);
    background-size: 62px 62px;
    transform: rotate(-8deg);
    mask-image: radial-gradient(circle at center, #000 25%, transparent 75%);
  }

  .map-placeholder {
    position: absolute;
    top: 42%;
    left: 50%;
    width: min(88%, 390px);
    padding: 25px 24px 22px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-lg);
    text-align: center;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(18px);
  }

  .map-pin {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 47px;
    height: 47px;
    margin-bottom: 13px;
    border-radius: 50% 50% 50% 10px;
    background: linear-gradient(145deg, #118cff, #0067e6);
    box-shadow: 0 10px 24px rgba(8, 120, 249, 0.28);
    transform: rotate(-45deg);
  }

  .map-pin span {
    width: 15px;
    height: 15px;
    border: 4px solid #fff;
    border-radius: 50%;
  }

  .map-placeholder h2 {
    margin: 0 0 8px;
    font-size: 22px;
    letter-spacing: -0.04em;
  }

  .map-placeholder p {
    margin: 0 auto 17px;
    color: var(--subtext);
    font-size: 13px;
    line-height: 1.65;
    word-break: keep-all;
  }

  .primary-button {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(145deg, #118cff, #0068e8);
    box-shadow: 0 10px 24px rgba(8, 120, 249, 0.22);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
  }

  .primary-button:disabled,
  .text-button:disabled {
    opacity: 0.58;
    cursor: wait;
  }

  .integration-badge {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    margin-top: 13px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef2f6;
    color: #718096;
    font-size: 11px;
    font-weight: 700;
  }

  .integration-badge.ready {
    background: #e7f8ef;
    color: #148052;
  }

  .toast {
    position: absolute;
    z-index: 12;
    top: 18px;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 34px);
    padding: 11px 14px;
    border-radius: 13px;
    background: rgba(24, 32, 44, 0.9);
    box-shadow: var(--shadow-md);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -10px);
    transition: 180ms ease;
    backdrop-filter: blur(12px);
  }

  .toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .bottom-sheet {
    position: absolute;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: min(52dvh, 430px);
    padding:
      10px
      clamp(17px, 4vw, 30px)
      calc(14px + var(--safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 28px 28px 0 0;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -16px 50px rgba(40, 52, 69, 0.17);
    backdrop-filter: blur(22px);
    transform: translateY(0);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    touch-action: manipulation;
  }

  .bottom-sheet.is-collapsed {
    transform: translateY(calc(100% - 62px - var(--safe-bottom)));
  }

  .sheet-handle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 44px;
    margin: -5px auto 3px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
  }

  .sheet-handle {
    display: none;
  }

  .sheet-toggle-icon {
    font-size: 18px;
    line-height: 1;
    transition: transform 180ms ease;
  }

  .bottom-sheet.is-collapsed .sheet-toggle-icon {
    transform: rotate(180deg);
  }

  .sheet-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
  }

  .sheet-heading h2 {
    margin: 0;
    font-size: clamp(20px, 5vw, 25px);
    letter-spacing: -0.045em;
  }

  .result-summary {
    flex: 0 0 auto;
    margin-bottom: 2px;
    color: var(--subtext);
    font-size: 12px;
    font-weight: 700;
  }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .category-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 123px;
    padding: 15px 13px 13px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 7px 22px rgba(44, 57, 76, 0.07);
    text-align: left;
    cursor: pointer;
    transition:
      transform 150ms ease,
      box-shadow 150ms ease,
      border-color 150ms ease;
  }

  .category-card:active {
    transform: scale(0.98);
  }

  .category-card[aria-pressed="true"] {
    border-color: currentColor;
    box-shadow: 0 10px 25px rgba(44, 57, 76, 0.13);
  }

  .category-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 900;
  }

  .category-hospital {
    color: var(--hospital);
  }

  .category-hospital .category-icon {
    background: #e7f2ff;
  }

  .category-pharmacy {
    color: var(--pharmacy);
  }

  .category-pharmacy .category-icon {
    background: #e7f8f1;
  }

  .category-emergency {
    color: var(--emergency);
  }

  .category-emergency .category-icon {
    background: #fff0f1;
  }

  .category-aed {
    color: var(--aed);
  }

  .category-aed .category-icon {
    background: #f1eafe;
    font-size: 11px;
  }

  .category-copy {
    display: block;
    min-width: 0;
  }

  .category-copy strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 15px;
    letter-spacing: -0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .category-copy small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--subtext);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .category-arrow {
    position: absolute;
    right: 12px;
    bottom: 11px;
    font-size: 21px;
    font-weight: 400;
    opacity: 0.5;
  }

  .safety-notice {
    margin: 13px 2px 0;
    color: #7b8797;
    font-size: 10px;
    line-height: 1.55;
    word-break: keep-all;
  }

  .safety-notice a {
    color: var(--emergency);
    font-weight: 800;
  }

  .results-panel {
    padding-top: 2px;
  }

  .results-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 42px;
    margin-bottom: 8px;
  }

  .back-button {
    justify-self: start;
    padding: 7px 4px;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-weight: 800;
    cursor: pointer;
  }

  .result-state {
    padding: 23px 15px;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--subtext);
    font-size: 13px;
    line-height: 1.65;
    text-align: center;
  }

  .empty-result strong,
  .empty-result span {
    display: block;
  }

  .empty-result strong {
    color: var(--text);
    font-size: 14px;
  }

  .empty-result span {
    margin-top: 5px;
  }

  .radius-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 10px 0 12px;
  }

  .radius-button {
    min-height: 36px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--subtext);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }

  .radius-button.is-active {
    border-color: var(--primary);
    background: #e9f3ff;
    color: var(--primary);
  }

  .facility-list {
    display: grid;
    gap: 9px;
  }

  .facility-card {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
    transition:
      border-color 150ms ease,
      box-shadow 150ms ease,
      transform 150ms ease;
  }

  .facility-card:active {
    transform: scale(0.99);
  }

  .facility-card.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(22, 135, 232, 0.12);
  }

  .facility-card strong {
    display: block;
    font-size: 15px;
    line-height: 1.45;
  }

  .facility-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
  }

  .distance-badge {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e9f3ff;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
  }

  .facility-card p {
    margin: 0;
    color: var(--subtext);
    font-size: 12px;
    line-height: 1.55;
  }

  .facility-hours {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: #657285;
    font-size: 12px;
    font-weight: 700;
  }

  .hours-status {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef2f6;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
  }

  .hours-status.is-open {
    background: #e8f8f1;
    color: #138a5b;
  }

  .hours-status.is-closed {
    background: #fff0f0;
    color: #cf3f47;
  }

  .open-now-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    margin: 0 0 10px;
    padding: 0 12px;
    border: 1px solid #dce3eb;
    border-radius: 11px;
    background: #fff;
    color: #536174;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }

  .open-now-filter span {
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    background: #edf1f5;
    color: transparent;
  }

  .open-now-filter.is-active {
    border-color: rgba(19, 138, 91, 0.28);
    background: #eefaf5;
    color: #117a52;
  }

  .open-now-filter.is-active span {
    background: #16a36d;
    color: #fff;
  }

  .facility-card .facility-placement {
    margin-top: 4px;
    color: #475569;
    font-weight: 700;
  }

  .facility-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }

  .facility-action {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
  }

  .phone-action {
    background: #edf2f7;
    color: #405066;
  }

  .direction-action {
    background: var(--primary);
    color: #fff;
  }

  @media (min-width: 760px) {
    body {
      padding: 18px;
    }

    .app-shell {
      height: calc(100dvh - 36px);
      min-height: 680px;
      border: 1px solid rgba(255, 255, 255, 0.85);
      border-radius: 32px;
      box-shadow: 0 30px 90px rgba(37, 50, 68, 0.18);
    }

    .app-header {
      padding-top: 14px;
    }

    .bottom-sheet {
      right: 22px;
      bottom: 22px;
      left: auto;
      width: min(430px, calc(100% - 44px));
      max-height: calc(100% - 190px);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
    }

    .bottom-sheet.is-collapsed {
      transform: none;
    }

    .sheet-handle-button {
      cursor: default;
      pointer-events: none;
    }

    .category-grid {
      grid-template-columns: 1fr;
    }

    .category-card {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      min-height: 74px;
      padding: 12px 16px;
    }

    .category-icon {
      margin: 0 13px 0 0;
    }

    .category-arrow {
      top: 50%;
      right: 16px;
      bottom: auto;
      transform: translateY(-50%);
    }

    .map-placeholder {
      left: calc(50% - 120px);
    }
  }

  @media (max-width: 380px) {
    .app-header {
      min-height: 72px;
    }

    .brand-logo {
      max-width: 98px;
      height: 32px;
    }

    .category-card {
      min-height: 112px;
      padding: 12px 10px;
    }

    .category-icon {
      margin-bottom: 10px;
    }

    .category-copy strong {
      font-size: 13px;
    }

    .category-copy small {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }

  /* CARE GUIDE v0.4.0 — mobile UX first pass */
  .nearby-intro {
    display: none;
    padding: 18px 20px 10px;
    background: #fff;
  }

  .nearby-intro h1 {
    margin: 3px 0 5px;
    font-size: 26px;
    letter-spacing: -0.045em;
  }

  .nearby-intro > div > p:last-child {
    margin: 0;
    color: var(--subtext);
    font-size: 14px;
  }

  .location-copy {
    min-width: 0;
  }

  .location-copy strong {
    display: block;
    overflow: hidden;
    color: #111827;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .location-copy small {
    display: block;
    margin-top: 3px;
    color: #7b8798;
    font-size: 12px;
  }

  .result-view-switch {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin: 0 0 12px;
    padding: 4px;
    border-radius: 12px;
    background: #eef2f7;
  }

  .result-view-switch button {
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #667085;
    font-weight: 800;
  }

  .result-view-switch button.is-active {
    background: #fff;
    color: #0877ec;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  }

  .facility-list {
    gap: 12px;
  }

  .facility-card {
    padding: 17px;
    border-color: #e4e9f1;
    border-radius: 18px;
    box-shadow: 0 7px 22px rgba(32, 46, 66, 0.06);
  }

  .facility-card-heading {
    align-items: flex-start;
  }

  .facility-card-heading > div {
    min-width: 0;
  }

  .facility-card-heading strong {
    display: block;
    margin-top: 3px;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.025em;
  }

  .facility-type-label {
    color: #0877ec;
    font-size: 11px;
    font-weight: 900;
  }

  .distance-badge {
    flex: 0 0 auto;
    color: #111827;
    font-size: 14px;
  }

  .facility-hours-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }

  .facility-hours-primary strong {
    color: #344054;
    font-size: 14px;
  }

  .hours-status.is-closing {
    background: #fff3d7;
    color: #a45b00;
  }

  .hours-status.is-emergency {
    background: #ffebed;
    color: #d92d46;
  }

  .facility-address {
    display: -webkit-box;
    margin: 10px 0 0 !important;
    overflow: hidden;
    color: #667085 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .facility-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    margin-top: 14px;
  }

  .facility-action {
    min-height: 46px;
    padding: 0 8px;
    border: 1px solid #dce3ec;
    border-radius: 12px;
    background: #fff;
    color: #344054;
    font-size: 14px;
    font-weight: 800;
  }

  .phone-action,
  .direction-action {
    color: #0877ec;
  }

  .detail-action {
    cursor: pointer;
  }

  .facility-detail-backdrop {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: 56px;
    background: rgba(9, 18, 32, 0.48);
    backdrop-filter: blur(4px);
  }

  .facility-detail-backdrop[hidden] {
    display: none;
  }

  .facility-detail-sheet {
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: calc(100dvh - 56px);
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -18px 60px rgba(15, 23, 42, 0.24);
  }

  .facility-detail-header {
    position: relative;
    flex: 0 0 auto;
    min-height: 48px;
  }

  .detail-sheet-handle {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 42px;
    height: 5px;
    border-radius: 99px;
    background: #d8dee8;
    transform: translateX(-50%);
  }

  .facility-detail-header button {
    position: absolute;
    top: 8px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #eef2f6;
    color: #344054;
    font-size: 24px;
  }

  .facility-detail-content {
    overflow-y: auto;
    padding: 2px 20px 24px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .detail-hero small {
    color: #0877ec;
    font-weight: 900;
  }

  .detail-hero h2 {
    margin: 5px 0 10px;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.045em;
  }

  .detail-hero > p {
    margin: 9px 0 0;
    color: #475467;
  }

  .detail-keyfacts {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .detail-section,
  .detail-highlight {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eaecf0;
  }

  .detail-section h3 {
    margin: 0 0 8px;
    font-size: 15px;
  }

  .detail-section p {
    margin: 0;
    color: #475467;
    line-height: 1.65;
  }

  .detail-highlight {
    display: grid;
    gap: 5px;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    background: #edf7ff;
  }

  .detail-highlight small {
    color: #0877ec;
    font-weight: 900;
  }

  .detail-highlight span {
    color: #667085;
    font-size: 13px;
  }

  .weekly-hours {
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
  }

  .weekly-hours-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 13px;
    border-bottom: 1px solid #eef1f4;
    color: #667085;
    font-size: 13px;
  }

  .weekly-hours-row:last-child {
    border-bottom: 0;
  }

  .weekly-hours-row.is-today {
    background: #edf7ff;
    color: #0877ec;
  }

  .detail-disclaimer,
  .detail-empty {
    margin: 20px 0 0;
    color: #7b8798;
    font-size: 12px;
    line-height: 1.6;
  }

  .facility-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #eaecf0;
    background: rgba(255,255,255,.96);
  }

  .facility-detail-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border: 1px solid #cfd8e6;
    border-radius: 14px;
    color: #0877ec;
    font-weight: 900;
    text-decoration: none;
  }

  .facility-detail-actions a.is-primary {
    border-color: #0877ec;
    background: #0877ec;
    color: #fff;
  }

  body.detail-open {
    overflow: hidden;
  }

  @media (max-width: 759px) {
    .app-shell {
      height: 100dvh;
      min-height: 0;
    }

    .nearby-intro {
      display: block;
    }

    .nearby-screen {
      display: block;
      grid-row: 2 / -1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: #f5f7fa;
      -webkit-overflow-scrolling: touch;
    }

    .nearby-screen .location-bar {
      position: sticky;
      z-index: 40;
      top: 0;
      padding: 13px 16px;
    }

    .nearby-screen .map-stage {
      min-height: 250px;
      height: 34dvh;
      max-height: 360px;
    }

    .nearby-screen .bottom-sheet {
      position: relative;
      inset: auto;
      width: 100%;
      max-height: none;
      padding: 16px 15px calc(24px + env(safe-area-inset-bottom));
      border-radius: 24px 24px 0 0;
      transform: none !important;
    }

    .sheet-handle-button {
      display: none;
    }

    .sheet-heading {
      margin-bottom: 14px;
    }

    .category-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .category-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-height: 128px;
      padding: 14px;
    }

    .category-icon {
      margin: 0 0 12px;
    }

    .category-arrow {
      top: 16px;
      right: 13px;
      transform: none;
    }

    .result-map-view .nearby-screen .map-stage {
      height: 58dvh;
      max-height: none;
    }

    .result-map-view .facility-list {
      display: none;
    }
  }

  @media (min-width: 760px) {
    .facility-detail-backdrop {
      align-items: center;
      padding: 30px;
    }

    .facility-detail-sheet {
      max-height: min(820px, calc(100vh - 60px));
      border-radius: 24px;
    }
  }

/* Keep Korean action labels together on narrow phones. */
.home-action-copy strong { word-break: keep-all; overflow-wrap: normal; }
@media (max-width: 380px) {
  .home-action-card { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding-left: 14px; padding-right: 27px; }
  .home-action-symbol { width: 40px; height: 44px; border-radius: 13px; }
  .home-action-arrow { position: absolute; right: 12px; top: 45%; }
  .home-action-copy strong { font-size: 17px; }
}