:root {
      --primary: #173b34;
      --primary-2: #26594d;
      --primary-soft: #dcebe4;
      --accent: #cf6d4b;
      --text-1: #17201e;
      --text-2: #5f6c68;
      --text-3: #99a39f;
      --page: #f3f6f4;
      --card: #ffffff;
      --modal: #ffffff;
      --line: #e3e9e6;
      --success: #4c7f68;
      --warning: #b7783f;
      --error: #b65d5d;
      --info: #527a9d;
      --r-sm: 4px;
      --r-md: 8px;
      --r-lg: 8px;
      --r-full: 999px;
      --s1: 4px;
      --s2: 8px;
      --s3: 12px;
      --s4: 16px;
      --s5: 20px;
      --s6: 24px;
      --s7: 32px;
      --shadow: 0 6px 24px rgba(23, 59, 52, .08);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
      color: var(--text-1);
      background: #dfe6e2;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; background: #dfe6e2; overscroll-behavior: none; }
    body { overflow: hidden; letter-spacing: 0; }
    button, input { font: inherit; letter-spacing: 0; }
    button { color: inherit; }
    button, .pressable { -webkit-tap-highlight-color: transparent; }
    button:active, .pressable:active { transform: scale(.97); opacity: .88; }
    button:focus-visible, input:focus-visible { outline: 2px solid rgba(38, 89, 77, .34); outline-offset: 2px; }
    #app {
      position: relative;
      width: min(100%, 480px);
      height: 100vh;
      height: 100dvh;
      margin: 0 auto;
      overflow: hidden;
      background: var(--page);
      box-shadow: 0 0 36px rgba(20, 39, 34, .12);
    }
    .screen { position: relative; height: 100%; background: var(--page); animation: pageIn .24s cubic-bezier(.2,.7,.2,1); }
    .scroll-screen { overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
    @keyframes pageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
    .icon { width: 19px; height: 19px; stroke-width: 1.8; }
    .icon-sm { width: 16px; height: 16px; }
    .icon-lg { width: 23px; height: 23px; }
    .icon-btn {
      width: 40px; height: 40px; border: 1px solid rgba(227,233,230,.9); border-radius: var(--r-md);
      background: rgba(255,255,255,.92); display: grid; place-items: center; box-shadow: 0 3px 14px rgba(23,59,52,.08);
      cursor: pointer; transition: transform .18s ease, background .18s ease, opacity .18s ease;
    }
    .icon-btn.dark { color: white; background: rgba(23,59,52,.88); border-color: transparent; }
    .topbar {
      position: sticky; top: 0; z-index: 20; height: 60px; display: grid; grid-template-columns: 44px 1fr 44px;
      align-items: center; padding: 0 var(--s3); background: rgba(243,246,244,.92); backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(227,233,230,.86);
    }
    .topbar-title { min-width: 0; text-align: center; }
    .topbar-title strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; }
    .topbar-title small { display: block; margin-top: 2px; color: var(--text-3); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .plain-icon {
      width: 40px; height: 40px; border: 0; background: transparent; display: grid; place-items: center;
      border-radius: var(--r-md); cursor: pointer; transition: transform .18s ease, background .18s ease;
    }
    .plain-icon:active { background: var(--primary-soft); }
    .lang-btn {
      min-width: 40px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm);
      color: var(--primary-2); background: white; font-size: 11px; font-weight: 600; cursor: pointer;
    }
    .home { background: #dcebd7; }
    .home-brand {
      position: absolute; z-index: 12; top: calc(12px + env(safe-area-inset-top)); left: 14px; right: 14px;
      height: 54px; display: flex; align-items: center; justify-content: space-between; pointer-events: none;
    }
    .brand-lockup { pointer-events: auto; padding: 8px 11px; background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-md); backdrop-filter: blur(12px); box-shadow: var(--shadow); }
    .brand-lockup strong { display: block; font-size: 17px; line-height: 1.15; font-weight: 600; }
    .brand-lockup span { display: block; margin-top: 3px; color: var(--text-2); font-size: 10px; font-weight: 500; }
    .home-brand .lang-btn { pointer-events: auto; background: rgba(255,255,255,.9); }
    .map-stage {
      position: absolute; inset: 0 0 128px; overflow: hidden; overflow: clip; touch-action: none; user-select: none; background: #dbeccf;
    }
    .map-stage::after { content: ""; position: absolute; inset: auto 0 0; height: 68px; pointer-events: none; background: linear-gradient(to bottom, rgba(219,236,207,0), rgba(243,246,244,.78)); }
    .map-layer {
      position: absolute; left: 50%; top: 50%; width: 4096px; height: 2951px; transform-origin: center;
      pointer-events: none;
    }
    .map-image {
      position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill;
      pointer-events: none; image-rendering: auto;
    }
    .map-animation-layer { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
    .map-background-repair { position: absolute; transform: translate(-50%,-50%); pointer-events: none; }
    .map-background-repair img { width: 100%; height: 100%; max-width: none; display: block; }
    .map-background-repair-crab { left:50.2%; top:10.1%; width:7.86%; aspect-ratio:516/425; }
    .map-character { position: absolute; transform: translate(-50%,-50%); pointer-events: none; }
    .map-character-viewport { position: absolute; inset: 0; display: block; overflow: hidden; }
    .map-character-viewport img {
      width: 300%; height: 100%; max-width: none; display: block; transform: translate3d(0,0,0);
      animation: mapCharacterFrames var(--motion-duration,3.2s) steps(1,end) var(--motion-delay,0s) infinite;
    }
    .map-character-hiking { --motion-duration:3.2s; --motion-delay:-.4s; left:19%; top:17%; width:6.66%; aspect-ratio:368/484; }
    .map-character-flag { --motion-duration:3s; --motion-delay:-1.1s; left:35%; top:47%; width:7.1%; aspect-ratio:359/516; }
    .map-character-subway { --motion-duration:3.6s; --motion-delay:-1.8s; left:90.4%; top:21.1%; width:7.53%; aspect-ratio:433/508; }
    .map-character-crab { --motion-duration:2.8s; --motion-delay:-.8s; left:50.2%; top:10.1%; width:7.86%; aspect-ratio:516/425; }
    .map-character-coffee-monkey-small { --motion-duration:3.8s; --motion-delay:-2.6s; left:68.57%; top:32.17%; width:5.22%; aspect-ratio:433/508; }
    .map-character-shopping-crab-small { --motion-duration:3.1s; --motion-delay:-1.9s; left:44.385%; top:41.35%; width:5.87%; aspect-ratio:516/425; }
    .map-character-cycling-otter { --motion-duration:4.8s; --motion-delay:-1.6s; left:81.8%; top:29.8%; width:5.2%; aspect-ratio:373/418; }
    .map-character-welcome { --motion-duration:4.6s; --motion-delay:-2.3s; left:84.4%; top:79.8%; width:29.2%; aspect-ratio:900/853; }
    .map-character-skateboarding-heron { --motion-duration:4.4s; --motion-delay:-.7s; left:77.9%; top:53.66%; width:8.6%; aspect-ratio:256/428; }
    .map-birdwatching-scene { position:absolute; left:47.6%; top:85.5%; width:9.375%; aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none; }
    .birdwatching-scene-frame {
      position:absolute; inset:0; width:100%; height:100%; max-width:none; opacity:0;
      animation-duration:5.2s; animation-timing-function:steps(1,end); animation-delay:-3.1s; animation-iteration-count:infinite;
    }
    .birdwatching-scene-frame-1 { animation-name:birdwatchingSceneOne; }
    .birdwatching-scene-frame-2 { animation-name:birdwatchingSceneTwo; }
    .birdwatching-scene-frame-3 { animation-name:birdwatchingSceneThree; }
    @keyframes mapCharacterFrames {
      0%, 19.99%, 80%, 100% { transform: translate3d(0,0,0); }
      20%, 39.99%, 60%, 79.99% { transform: translate3d(-33.333%,0,0); }
      40%, 59.99% { transform: translate3d(-66.666%,0,0); }
    }
    @keyframes birdwatchingSceneOne { 0%,19.99%,80%,100% { opacity:1; } 20%,79.99% { opacity:0; } }
    @keyframes birdwatchingSceneTwo { 0%,19.99%,40%,59.99%,80%,100% { opacity:0; } 20%,39.99%,60%,79.99% { opacity:1; } }
    @keyframes birdwatchingSceneThree { 0%,39.99%,60%,100% { opacity:0; } 40%,59.99% { opacity:1; } }
    .map-category-dock {
      position: absolute; z-index: 11; top: calc(80px + env(safe-area-inset-top)); left: 0; right: 0;
      pointer-events: auto; touch-action: pan-x;
    }
    .map-category-rail {
      display: flex; gap: 7px; overflow-x: auto; padding: 2px 14px 8px; scrollbar-width: none; scroll-snap-type: x proximity;
    }
    .map-category-rail::-webkit-scrollbar { display: none; }
    .map-category-btn {
      --cat: var(--primary); position: relative; flex: 0 0 auto; min-width: 66px; height: 42px; padding: 0 9px; border: 1px solid rgba(255,255,255,.84);
      border-radius: var(--r-md); display: grid; grid-template-columns: 16px auto; grid-template-rows: 1fr 1fr; column-gap: 5px; align-items: center;
      color: var(--text-2); background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(23,59,52,.09); backdrop-filter: blur(12px);
      cursor: pointer; scroll-snap-align: start; transition: background .18s ease, border-color .18s ease, color .18s ease;
    }
    .map-category-btn .icon { grid-row: 1 / 3; color: var(--cat); }
    .map-category-btn span { align-self: end; font-size: 11px; font-weight: 600; white-space: nowrap; }
    .map-category-btn small { align-self: start; color: var(--text-3); font-size: 9px; line-height: 1; }
    .map-category-btn.active { color: white; background: var(--cat); border-color: var(--cat); }
    .map-category-btn.active .icon, .map-category-btn.active small { color: white; }
    .map-marker-layer { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
    .map-marker {
      position: absolute; left: 0; top: 0; z-index: 1; width: 44px; height: 52px; padding: 0; border: 0; background: transparent;
      pointer-events: auto; touch-action: manipulation; cursor: pointer; will-change: transform;
    }
    .map-marker.offscreen { visibility: hidden; pointer-events: none; }
    .map-marker-pin {
      position: absolute; left: 7px; bottom: 2px; width: 30px; height: 30px; border: 2px solid white; border-radius: 50%;
      display: grid; place-items: center; color: white; background: var(--cat); box-shadow: 0 3px 9px rgba(18,42,35,.25);
      transition: transform .16s ease, box-shadow .16s ease;
    }
    .map-marker-pin::after {
      content: ""; position: absolute; z-index: -1; left: 8px; bottom: -5px; width: 10px; height: 10px; border-right: 2px solid white; border-bottom: 2px solid white;
      border-radius: 0 0 3px 0; background: var(--cat); transform: rotate(45deg);
    }
    .map-marker-pin span { position: relative; z-index: 1; font-size: 9px; line-height: 1; font-weight: 700; }
    .map-marker-label {
      position: absolute; left: 50%; bottom: 41px; max-width: 150px; padding: 5px 8px; border-radius: var(--r-sm); opacity: 0; pointer-events: none;
      color: var(--text-1); background: rgba(255,255,255,.96); box-shadow: 0 4px 12px rgba(20,39,34,.14); font-size: 10px; font-weight: 600;
      line-height: 1.25; white-space: nowrap; transform: translate(-50%,4px); transition: opacity .16s ease, transform .16s ease;
    }
    .map-marker.active { z-index: 4; }
    .map-marker.active .map-marker-pin { transform: scale(1.12); box-shadow: 0 5px 14px rgba(18,42,35,.32); }
    .map-marker.active .map-marker-label { opacity: 1; transform: translate(-50%,0); }
    .map-controls {
      position: absolute; z-index: 10; right: 14px; top: 35%; transform: translateY(-50%);
      display: grid; gap: 10px; touch-action: manipulation;
    }
    .map-zoom-group {
      overflow: hidden; border: 1px solid rgba(227,233,230,.94); border-radius: var(--r-md);
      background: rgba(255,255,255,.94); box-shadow: 0 4px 16px rgba(23,59,52,.1); backdrop-filter: blur(12px);
    }
    .map-control {
      width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
      color: var(--primary); touch-action: manipulation;
    }
    .map-control + .map-control { border-top: 1px solid var(--line); }
    .map-recenter {
      border: 1px solid rgba(227,233,230,.94); border-radius: var(--r-md); background: rgba(255,255,255,.94);
      box-shadow: 0 4px 16px rgba(23,59,52,.1); backdrop-filter: blur(12px);
    }
    .map-control:active:not(:disabled) { transform: none; opacity: 1; background: var(--primary-soft); }
    .map-control:disabled { color: var(--text-3); opacity: .42; cursor: default; }
    .home-panel {
      position: absolute; z-index: 10; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); height: 64px;
      padding: 0; background: rgba(248,250,249,.97); border-top: 1px solid rgba(255,255,255,.85); box-shadow: 0 -8px 26px rgba(23,59,52,.08); backdrop-filter: blur(18px);
    }
    .section-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s4); margin-bottom: 9px; }
    .section-heading strong { font-size: 15px; font-weight: 600; }
    .section-heading button { border: 0; background: transparent; color: var(--text-2); font-size: 12px; padding: 4px 0; cursor: pointer; }
    .category-rail, .chip-rail { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--s4); }
    .category-rail::-webkit-scrollbar, .chip-rail::-webkit-scrollbar { display: none; }
    .category-btn {
      flex: 0 0 66px; height: 63px; border: 1px solid var(--line); border-radius: var(--r-md); background: white;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
      box-shadow: 0 2px 10px rgba(23,59,52,.04); transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .category-btn .cat-icon { color: var(--cat); display: grid; place-items: center; }
    .category-btn span:last-child { font-size: 11px; font-weight: 500; white-space: nowrap; }
    .featured-row {
      margin: 0 var(--s4); height: 100%; border-top: 0; display: grid; grid-template-columns: 1fr auto; align-items: center;
      cursor: pointer; transition: transform .18s ease, opacity .18s ease;
    }
    .featured-copy { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
    .featured-copy small { flex: 0 0 auto; color: var(--accent); font-size: 10px; font-weight: 600; }
    .featured-copy strong { min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .map-place-host {
      position: absolute; z-index: 24; left: 12px; right: 12px; bottom: calc(136px + env(safe-area-inset-bottom)); pointer-events: none;
    }
    .map-place-card {
      position: relative; display: grid; grid-template-columns: 82px 1fr; gap: 10px; min-height: 154px; padding: 10px; overflow: hidden;
      border: 1px solid rgba(227,233,230,.94); border-radius: var(--r-md); background: rgba(255,255,255,.98); box-shadow: 0 12px 34px rgba(20,39,34,.18);
      pointer-events: auto; animation: sheetIn .22s cubic-bezier(.2,.7,.2,1);
    }
    .map-place-thumb { width: 82px; height: 82px; border-radius: var(--r-sm); }
    .map-place-main { min-width: 0; padding-right: 28px; }
    .map-place-kicker { margin: 1px 0 4px; color: var(--cat); font-size: 9px; font-weight: 700; }
    .map-place-main > strong { display: block; overflow: hidden; font-size: 14px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
    .map-place-address {
      width: 100%; min-width: 0; margin-top: 7px; padding: 0; border: 0; display: grid; grid-template-columns: 15px 1fr; gap: 4px; text-align: left;
      color: var(--text-2); background: transparent; cursor: pointer;
    }
    .map-place-address span { overflow: hidden; font-size: 10px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
    .map-place-close { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; border: 0; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-3); background: transparent; cursor: pointer; }
    .map-place-actions { grid-column: 1 / 3; display: grid; grid-template-columns: repeat(auto-fit,minmax(82px,1fr)); gap: 7px; }
    .map-place-actions button, .map-place-actions a {
      min-width: 0; height: 38px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; gap: 6px;
      color: var(--text-2); background: white; font: inherit; font-size: 11px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    .map-place-actions .map-call-action { color: var(--primary); border-color: #cbdad4; background: #f4f8f6; }
    .map-place-actions .map-call-action:active { color: white; border-color: var(--primary); background: var(--primary); }
    .map-place-actions button.primary { color: white; border-color: var(--primary); background: var(--primary); }
    .tabbar {
      position: fixed; z-index: 40; left: 50%; right: auto; bottom: 0; width: min(100%, 480px); height: calc(64px + env(safe-area-inset-bottom));
      transform: translateX(-50%);
      padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(255,255,255,.96);
      border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(20,39,34,.05); backdrop-filter: blur(18px);
    }
    .tab-item { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-3); font-size: 10px; cursor: pointer; }
    .tab-item.active { color: var(--primary); font-weight: 600; }
    .tab-item .tab-icon { position: relative; display: grid; place-items: center; }
    .tab-item.active .tab-icon::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); top: -4px; right: -6px; }
    .content { padding: 14px var(--s4) 0; }
    .search-wrap { position: relative; margin-bottom: var(--s3); }
    .search-wrap .icon { position: absolute; left: 13px; top: 12px; color: var(--text-3); pointer-events: none; }
    .search-input { width: 100%; height: 42px; padding: 0 38px; border: 1px solid transparent; border-radius: var(--r-md); background: #e9efec; color: var(--text-1); font-size: 14px; transition: border-color .18s ease, background .18s ease; }
    .search-input::placeholder { color: var(--text-3); }
    .search-input:focus { background: white; border-color: #a8bdb4; outline: none; }
    .search-clear { position: absolute; right: 5px; top: 5px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--text-3); display: grid; place-items: center; cursor: pointer; }
    .chip-rail { padding: 0 0 2px; margin-bottom: var(--s3); }
    .chip { flex: 0 0 auto; height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--r-full); background: white; color: var(--text-2); font-size: 12px; cursor: pointer; }
    .chip.active { color: white; background: var(--primary); border-color: var(--primary); }
    .subchips .chip { height: 30px; background: transparent; }
    .subchips .chip.active { color: var(--primary); background: var(--primary-soft); border-color: transparent; }
    .result-meta { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 10px; color: var(--text-3); font-size: 11px; }
    .result-meta strong { color: var(--text-2); font-weight: 500; }
    .result-list { display: grid; gap: 10px; }
    .load-more { width: 100%; margin-top: 12px; background: white; color: var(--primary); border: 1px solid var(--line); box-shadow: none; }
    .list-card {
      min-height: 112px; display: grid; grid-template-columns: 106px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md);
      background: var(--card); box-shadow: 0 3px 14px rgba(23,59,52,.045); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
      animation: cardIn .24s ease both; content-visibility: auto; contain-intrinsic-size: 112px;
    }
    @keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    .list-card:active { box-shadow: none; }
    .thumb { background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #dce9dd; }
    .card-thumb { position: relative; min-height: 110px; }
    .card-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(18,42,35,.04); }
    .card-body { min-width: 0; padding: 12px 12px 10px; display: flex; flex-direction: column; }
    .card-kicker { display: flex; align-items: center; gap: 5px; color: var(--cat); font-size: 10px; font-weight: 600; }
    .card-title { margin: 6px 0 3px; font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
    .card-en { min-height: 14px; color: var(--text-3); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-intro { display: -webkit-box; margin-top: 7px; overflow: hidden; color: var(--text-2); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .card-foot { margin-top: auto; padding-top: 7px; display: flex; align-items: center; justify-content: space-between; color: var(--text-3); font-size: 10px; }
    .mini-action { width: 28px; height: 28px; border: 0; background: transparent; color: var(--text-2); display: grid; place-items: center; border-radius: var(--r-sm); cursor: pointer; }
    .mini-action.saved { color: var(--accent); }
    .empty-state { padding: 58px 26px; text-align: center; }
    .empty-icon { width: 58px; height: 58px; margin: 0 auto 16px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--text-3); background: white; }
    .empty-state strong { display: block; font-size: 16px; font-weight: 600; }
    .empty-state p { margin: 8px 0 20px; color: var(--text-2); font-size: 13px; line-height: 1.6; }
    .primary-btn { height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-md); background: var(--primary); color: white; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 5px 14px rgba(23,59,52,.16); }
    .detail-screen { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
    .detail-hero { position: relative; height: 254px; }
    .detail-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,31,26,.25), rgba(12,31,26,0) 45%, rgba(12,31,26,.32)); }
    .detail-actions { position: absolute; z-index: 5; top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; }
    .detail-actions-right { display: flex; gap: 8px; }
    .detail-content { padding: 20px var(--s4) 30px; background: var(--page); }
    .detail-kicker { color: var(--cat); font-size: 11px; font-weight: 600; }
    .detail-title { margin: 8px 0 5px; font-size: 22px; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
    .detail-en { color: var(--text-2); font-size: 13px; line-height: 1.5; }
    .detail-divider { height: 1px; margin: 20px 0; background: var(--line); }
    .detail-section { margin-bottom: 22px; }
    .detail-section h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
    .detail-section p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.78; }
    .detail-section p + p { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); color: #71807b; font-size: 12px; }
    .info-row { min-height: 56px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
    .info-row:first-of-type { border-top: 0; }
    .info-row-action { cursor: pointer; }
    .info-row-action:active { background: rgba(220,235,228,.42); }
    .info-row-phone { color: inherit; text-decoration: none; }
    .info-icon { color: var(--primary-2); display: grid; place-items: center; }
    .info-copy { min-width: 0; }
    .info-copy small { display: block; color: var(--text-3); font-size: 10px; }
    .info-copy span { display: block; margin-top: 3px; color: var(--text-2); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
    .info-copy .info-secondary { color: var(--text-3); font-size: 11px; }
    .info-actions { display: flex; align-items: center; gap: 2px; }
    .detail-footer { position: fixed; z-index: 30; left: 50%; bottom: 0; width: min(100%,480px); transform: translateX(-50%); height: calc(72px + env(safe-area-inset-bottom)); padding: 11px var(--s4) calc(11px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 48px 1fr; gap: 10px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(18px); }
    .detail-footer .plain-icon { width: 48px; height: 48px; border: 1px solid var(--line); background: white; }
    .detail-footer .primary-btn { height: 48px; }
    .modal-backdrop { position: absolute; z-index: 100; inset: 0; display: flex; align-items: flex-end; background: rgba(10,24,20,.38); backdrop-filter: blur(2px); animation: fadeIn .18s ease; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .sheet { width: 100%; padding: 10px 18px calc(20px + env(safe-area-inset-bottom)); background: var(--modal); border-radius: 8px 8px 0 0; box-shadow: 0 -12px 40px rgba(16,38,31,.16); animation: sheetIn .24s cubic-bezier(.2,.7,.2,1); }
    @keyframes sheetIn { from { transform: translateY(22px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
    .sheet-handle { width: 38px; height: 4px; margin: 0 auto 16px; border-radius: var(--r-full); background: #dce3df; }
    .sheet h3 { margin: 0; font-size: 17px; font-weight: 600; }
    .sheet p { margin: 7px 0 18px; color: var(--text-2); font-size: 12px; }
    .share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .share-option { height: 74px; border: 1px solid var(--line); border-radius: var(--r-md); background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-2); font-size: 11px; cursor: pointer; }
    .navigation-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .navigation-options button { height: 74px; border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--primary); background: white; font-size: 12px; font-weight: 600; cursor: pointer; }
    .toast-host { position: absolute; z-index: 200; left: 16px; right: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); pointer-events: none; display: flex; justify-content: center; }
    .toast { max-width: 300px; padding: 10px 14px; border-radius: var(--r-md); background: rgba(23,32,30,.92); color: white; box-shadow: 0 8px 24px rgba(20,35,31,.22); font-size: 12px; animation: toastIn .22s ease; }
    @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .favorites-head { padding: 18px var(--s4) 8px; }
    .favorites-head h1 { margin: 0; font-size: 21px; font-weight: 600; }
    .favorites-head p { margin: 6px 0 0; color: var(--text-2); font-size: 12px; }
    @media (max-height: 700px) {
      .map-category-dock { top: calc(74px + env(safe-area-inset-top)); }
      .map-place-card { min-height: 142px; }
      .map-place-thumb { width: 72px; height: 72px; }
      .map-place-card { grid-template-columns: 72px 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }