/* ==========================================================================
   Haru Live Transit
   Mobile Responsive Stylesheet

   File:
   public/css/transit/transit-mobile.css

   Target:
   Transit index page
   ========================================================================== */


/* ==========================================================================
   1. 기본 변수
   ========================================================================== */

.transit-page {
    --transit-mobile-space-xs: 4px;
    --transit-mobile-space-sm: 8px;
    --transit-mobile-space-md: 12px;
    --transit-mobile-space-lg: 16px;
    --transit-mobile-space-xl: 20px;

    --transit-mobile-radius-sm: 8px;
    --transit-mobile-radius-md: 12px;
    --transit-mobile-radius-lg: 16px;

    --transit-mobile-border: #e5e7eb;
    --transit-mobile-bg: #f5f6f8;
    --transit-mobile-card: #ffffff;

    --transit-mobile-text: #111827;
    --transit-mobile-subtext: #6b7280;
    --transit-mobile-muted: #9ca3af;

    --transit-mobile-blue: #2563eb;
    --transit-mobile-blue-light: #eff6ff;
}


/* ==========================================================================
   2. 모바일 전용
   ========================================================================== */

@media screen and (max-width: 640px) {

    /* ======================================================================
       전체 페이지
       ====================================================================== */

    .transit-page {
        width: 100%;
        max-width: none !important;

        padding-top: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 28px !important;
        padding-left: 10px !important;

        overflow-x: hidden;
    }

    .transit-page *,
    .transit-page *::before,
    .transit-page *::after {
        box-sizing: border-box;
    }


    /* ======================================================================
       메인 검색 박스
       ====================================================================== */

    .transit-page > .overflow-hidden.rounded-2xl.border {
        border-radius: 14px !important;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 2px 8px rgba(15, 23, 42, 0.03) !important;
    }


    /* ======================================================================
       상단 탭
       내 위치 / 경로 검색 / 지역 검색 / 버스 검색
       ====================================================================== */

    .transit-page .transit-tab {
        position: relative;

        min-width: 0;
        min-height: 48px;

        padding: 0 3px !important;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2;

        letter-spacing: -0.045em;
        white-space: nowrap;

        border-bottom-width: 2px !important;

        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .transit-page .transit-tab:active {
        background: #f8fafc;
    }


    /* ======================================================================
       각 탭 패널
       ====================================================================== */

    .transit-page .transit-panel {
        padding: 16px !important;
    }

    #tab-route.transit-panel {
        padding: 16px !important;
    }


    /* ======================================================================
       내 위치 상단
       ====================================================================== */

    #tab-nearby > .flex:first-child {
        display: block !important;
    }

    #tab-nearby > .flex:first-child > div:first-child {
        width: 100%;
    }

    #tab-nearby h2 {
        margin: 0;

        font-size: 19px !important;
        font-weight: 800 !important;
        line-height: 1.35;

        letter-spacing: -0.035em;
    }

    #tab-nearby h2 + p {
        margin-top: 4px !important;

        max-width: 100%;

        font-size: 12px !important;
        line-height: 1.5;

        letter-spacing: -0.02em;
    }


    /* ======================================================================
       현재 위치 찾기 버튼
       ====================================================================== */

    #currentLocationButton {
        width: 100%;

        min-height: 44px;

        margin-top: 13px;

        padding: 10px 14px !important;

        border-radius: 10px !important;

        font-size: 13px !important;
        font-weight: 700;

        line-height: 1;

        box-shadow: none;

        transition:
            background-color 0.15s ease,
            transform 0.1s ease;
    }

    #currentLocationButton > span:first-child {
        font-size: 16px;
    }

    #currentLocationButton:active {
        transform: scale(0.985);
    }


    /* ======================================================================
       현재 위치 정보 카드
       ====================================================================== */

    #currentLocationInfo {
        margin-top: 14px !important;

        padding: 13px !important;

        border-radius: 13px !important;
    }

    #currentLocationInfo > .flex {
        gap: 10px !important;
    }

    #currentLocationInfo .h-10.w-10 {
        width: 36px !important;
        height: 36px !important;

        font-size: 14px;
    }

    #currentLocationInfo .text-xs.text-blue-500 {
        font-size: 10px !important;
        line-height: 1.3;
    }

    #currentLocationName {
        margin-top: 2px !important;

        font-size: 14px !important;
        line-height: 1.45;

        letter-spacing: -0.02em;

        word-break: keep-all;
    }

    #currentLocationAddress {
        margin-top: 3px !important;

        font-size: 11px !important;
        line-height: 1.45;

        word-break: keep-all;
    }

    #currentLocationCoordinate {
        margin-top: 3px !important;

        font-size: 9px !important;
        line-height: 1.35;
    }


    /* ======================================================================
       위치 없음
       ====================================================================== */

    #nearbyLocationEmpty {
        margin-top: 14px !important;

        padding: 18px 12px !important;

        border-radius: 12px !important;
    }

    #nearbyLocationEmpty .text-3xl {
        font-size: 23px !important;
    }

    #nearbyLocationEmpty .font-bold {
        margin-top: 5px !important;

        font-size: 13px !important;
    }

    #nearbyLocationEmpty .text-sm {
        margin-top: 4px !important;

        padding: 0 4px;

        font-size: 11px !important;
        line-height: 1.55;
    }


    /* ======================================================================
       주변 검색 거리
       ====================================================================== */

    #nearbyRadiusBox,
    #areaRadiusBox {
        margin-top: 15px !important;
    }

    #nearbyRadiusBox > .flex,
    #areaRadiusBox > .flex {
        margin-bottom: 5px !important;
    }

    #nearbyRadiusBox label,
    #areaRadiusBox label {
        font-size: 11px !important;
        font-weight: 700;
    }

    #nearbyRadiusValue,
    #areaRadiusValue {
        padding: 4px 9px !important;

        border-radius: 9999px !important;

        font-size: 10px !important;
    }

    #nearbyRadius,
    #areaRadius {
        width: 100%;
        height: 26px;

        margin: 0;

        touch-action: pan-y;
    }

    #nearbyRadiusBox > .flex:last-child,
    #areaRadiusBox > .flex:last-child {
        margin-top: -1px !important;

        font-size: 9px !important;
    }


    /* Chrome / Safari slider */
    #nearbyRadius::-webkit-slider-thumb,
    #areaRadius::-webkit-slider-thumb {
        width: 18px;
        height: 18px;

        cursor: pointer;
    }


    /* ======================================================================
       에러 박스
       ====================================================================== */

    #searchError {
        margin-top: 10px !important;

        padding: 12px !important;

        border-radius: 10px !important;

        font-size: 11px !important;
        line-height: 1.55;
    }


    /* ======================================================================
       결과 전체
       ====================================================================== */

    #nearbyResult,
    #areaResult,
    #busResult {
        margin-top: 14px !important;
    }


    /* ======================================================================
       요약 통계 카드

       데스크톱:
       정류장 / 버스
       검색반경

       모바일:
       정류장 | 버스 | 검색반경
       ====================================================================== */

    #nearbyResult > .grid,
    #areaResult > .grid {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 7px !important;

        margin-bottom: 12px !important;
    }

    #nearbyResult > .grid > div,
    #areaResult > .grid > div {
        grid-column: auto !important;

        min-width: 0;
        min-height: 68px;

        padding: 10px 8px !important;

        border-radius: 11px !important;

        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.025) !important;
    }

    #nearbyResult > .grid > div .text-xs,
    #areaResult > .grid > div .text-xs {
        overflow: hidden;

        font-size: 9px !important;
        font-weight: 700;

        line-height: 1.25;

        text-overflow: ellipsis;
        white-space: nowrap;

        letter-spacing: -0.025em;
    }

    #nearbySummaryStopCount,
    #nearbySummaryRouteCount,
    #nearbySummaryRadius,
    #areaStopCount,
    #areaRouteCount,
    #areaSummaryRadius {
        margin-top: 6px !important;

        overflow: hidden;

        font-size: 18px !important;
        font-weight: 800 !important;

        line-height: 1.15;

        text-overflow: ellipsis;
        white-space: nowrap;

        letter-spacing: -0.04em;
    }


    /* ======================================================================
       지도 카드
       ====================================================================== */

    #nearbyResult > .overflow-hidden.rounded-2xl,
    #areaResult > .overflow-hidden.rounded-2xl {
        border-radius: 13px !important;
    }


    /* ======================================================================
       지도 상단 제목 영역
       ====================================================================== */

    #nearbyResult > .overflow-hidden > .border-b:first-child,
    #areaResult > .overflow-hidden > .border-b:first-child {
        padding: 11px 12px !important;
    }

    #nearbyResult > .overflow-hidden > .border-b:first-child .flex {
        gap: 8px !important;
    }

    #nearbyResult > .overflow-hidden > .border-b:first-child h2,
    #areaResult > .overflow-hidden > .border-b:first-child h2 {
        font-size: 13px !important;
        font-weight: 700;

        line-height: 1.35;
    }

    #nearbyResult > .overflow-hidden > .border-b:first-child p,
    #areaResult > .overflow-hidden > .border-b:first-child p {
        margin-top: 2px !important;

        font-size: 9px !important;
        line-height: 1.4;

        word-break: keep-all;
    }


    /* ======================================================================
       전체 보기 버튼
       ====================================================================== */

    #nearbyMapFitButton {
        flex: none;

        min-height: 30px;

        padding: 6px 9px !important;

        border-radius: 7px !important;

        font-size: 9px !important;
        line-height: 1;

        white-space: nowrap;
    }


    /* ======================================================================
       지도 범례

       모바일에서는 여러 줄 X
       한 줄 + 좌우 스크롤
       ====================================================================== */

    #nearbyResult > .overflow-hidden > .flex.flex-wrap,
    #areaResult > .overflow-hidden > .flex.flex-wrap {
        display: flex !important;
        flex-wrap: nowrap !important;

        width: 100%;

        gap: 5px !important;

        padding: 7px 8px !important;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;

        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;

        -webkit-overflow-scrolling: touch;
    }

    #nearbyResult > .overflow-hidden > .flex.flex-wrap::-webkit-scrollbar,
    #areaResult > .overflow-hidden > .flex.flex-wrap::-webkit-scrollbar {
        display: none;
    }

    #nearbyResult > .overflow-hidden > .flex.flex-wrap > span,
    #areaResult > .overflow-hidden > .flex.flex-wrap > span {
        flex: 0 0 auto;

        gap: 4px !important;

        padding: 4px 7px !important;

        border-radius: 9999px;

        font-size: 9px !important;
        line-height: 1.2;

        white-space: nowrap;

        scroll-snap-align: start;
    }

    #nearbyResult > .overflow-hidden > .flex.flex-wrap > span > span,
    #areaResult > .overflow-hidden > .flex.flex-wrap > span > span {
        width: 7px !important;
        height: 7px !important;

        flex: none;
    }


    /* ======================================================================
       지도 높이
       ====================================================================== */

    #nearbyMap {
        width: 100% !important;
        height: 390px !important;

        min-height: 390px;
    }

    #areaMap {
        width: 100% !important;
        height: 360px !important;

        min-height: 360px;
    }


    /* ======================================================================
       Leaflet
       ====================================================================== */

    .transit-page .leaflet-container {
        font-family:
            Pretendard,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

        -webkit-tap-highlight-color: transparent;
    }


    /* 지도 확대 축소 */
    .transit-page .leaflet-control-zoom {
        margin-top: 4px !important;
        margin-left: 8px !important;

        border: 0 !important;

        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.14) !important;
    }

    .transit-page .leaflet-control-zoom a {
        width: 30px !important;
        height: 30px !important;

        font-size: 17px !important;
        line-height: 30px !important;
    }


    /* Leaflet bar */
    .transit-page .leaflet-bar {
        border: 0 !important;

        border-radius: 7px !important;

        overflow: hidden;
        margin-left: 8px;
        margin-top: 4px;
        box-shadow:
            0 2px 7px rgba(15, 23, 42, 0.15);
    }

    .transit-page .leaflet-bar a {
        width: 30px;
        height: 30px;

        line-height: 30px;
    }


    /* 레이어 */
    .transit-page .leaflet-control-layers {
        border: 0 !important;

        border-radius: 8px !important;

        font-size: 10px;

        box-shadow:
            0 2px 8px rgba(15, 23, 42, 0.14) !important;
    }


    /* 지도 우측 컨트롤 */
    .transit-page .leaflet-top.leaflet-right {
        top: 4px;
        right: 4px;
    }

    .transit-page .leaflet-bottom.leaflet-right {
        right: 4px;
        bottom: 4px;
        display:none;
    }


    /* 지도 왼쪽 컨트롤 */
    .transit-page .leaflet-top.leaflet-left {
        top: 4px;
        left: 4px;
    }


    /* Attribution */
    .transit-page .leaflet-control-attribution {
        max-width: 75vw;

        padding: 1px 4px !important;

        font-size: 7px !important;
        line-height: 1.25 !important;

        white-space: normal;
    }


    /* Scale */
    .transit-page .leaflet-control-scale-line {
        padding: 1px 4px !important;

        font-size: 8px !important;
        line-height: 1.2;
    }


    /* 팝업 */
    .transit-page .leaflet-popup-content-wrapper {
        border-radius: 10px;
    }

    .transit-page .leaflet-popup-content {
        max-width: 220px;

        margin: 10px 12px;

        font-size: 11px;
        line-height: 1.45;
    }

    .transit-page .leaflet-popup-close-button {
        width: 28px !important;
        height: 28px !important;

        font-size: 18px !important;
    }


    /* ======================================================================
       결과 섹션 공통
       ====================================================================== */

    #nearbyResult > .mt-6,
    #areaResult > .mt-6 {
        margin-top: 17px !important;
    }

    #nearbyResult > .mt-6 > .mb-3,
    #areaResult > .mt-6 > .mb-3 {
        margin-bottom: 8px !important;
    }

    #nearbyResult h2.text-lg,
    #areaResult h2.text-lg,
    #busResult h2.text-lg {
        font-size: 15px !important;
        font-weight: 800 !important;

        line-height: 1.35;

        letter-spacing: -0.035em;
    }

    #nearbyResult h2.text-lg + p,
    #areaResult h2.text-lg + p {
        margin-top: 2px !important;

        max-width: 250px;

        font-size: 9px !important;
        line-height: 1.45;
    }

    #nearbyUniqueRouteCount,
    #nearbyResultStopCount,
    #uniqueRouteCount,
    #nearbyStopCount,
    #busResultCount {
        flex: none;

        margin-left: 8px;

        font-size: 10px !important;

        white-space: nowrap;
    }


    /* ======================================================================
       주변 버스 리스트
       ====================================================================== */

    #nearbyRouteList,
    #areaRouteList {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;

        gap: 8px !important;
    }

    #nearbyRouteList > *,
    #areaRouteList > * {
        min-width: 0;

        border-radius: 12px !important;
    }


    /* ======================================================================
       주변 정류장 리스트
       ====================================================================== */

    #nearbyStopList,
    #areaStopList,
    #busResultList {
        display: flex;

        flex-direction: column;

        gap: 8px !important;
    }

    #nearbyStopList > *,
    #areaStopList > *,
    #busResultList > * {
        margin-top: 0 !important;

        border-radius: 12px !important;
    }


    /* ======================================================================
       지역 검색
       ====================================================================== */

    #tab-area .mb-4 {
        margin-bottom: 12px !important;
    }

    #tab-area h2 {
        font-size: 18px !important;
        line-height: 1.35;
    }

    #tab-area h2 + p {
        margin-top: 4px !important;

        font-size: 11px !important;
        line-height: 1.45;
    }


    /* 검색 입력 + 버튼 */
    #tab-area > .flex.gap-2 {
        gap: 6px !important;
    }

    #areaKeyword {
        min-width: 0;
        height: 43px;

        padding: 9px 34px 9px 12px !important;

        border-radius: 10px !important;

        font-size: 12px !important;
    }

    #areaKeyword::placeholder {
        font-size: 11px;

        color: #9ca3af;
    }

    #areaClearButton {
        right: 10px !important;

        width: 24px;
        height: 24px;

        font-size: 18px;

        line-height: 22px;
    }

    #areaSearchButton {
        min-width: 57px;
        height: 43px;

        padding: 8px 12px !important;

        border-radius: 10px !important;

        font-size: 11px !important;
    }


    /* 지역 자동완성 */
    #areaSuggestions {
        margin-top: 5px !important;

        max-height: 260px;

        overflow-y: auto;

        border-radius: 10px !important;

        font-size: 11px;

        -webkit-overflow-scrolling: touch;
    }


    /* 선택 지역 */
    #areaSelected {
        margin-top: 10px !important;

        padding: 12px !important;

        border-radius: 10px !important;
    }

    #areaSelected .text-xs {
        font-size: 9px !important;
    }

    #areaSelectedName {
        margin-top: 2px !important;

        font-size: 13px !important;
    }

    #areaSelectedAddress {
        margin-top: 2px !important;

        font-size: 10px !important;
        line-height: 1.45;
    }


    /* ======================================================================
       버스 검색
       ====================================================================== */

    #tab-bus .mb-4 {
        margin-bottom: 12px !important;
    }

    #tab-bus h2 {
        font-size: 18px !important;
        line-height: 1.35;
    }

    #tab-bus h2 + p {
        margin-top: 4px !important;

        font-size: 11px !important;
        line-height: 1.45;
    }

    #tab-bus > .flex {
        gap: 6px !important;
    }

    #busKeyword {
        min-width: 0;
        height: 43px;

        padding: 9px 12px !important;

        border-radius: 10px !important;

        font-size: 12px !important;
    }

    #busKeyword::placeholder {
        font-size: 11px;

        color: #9ca3af;
    }

    #busSearchButton {
        min-width: 57px;
        height: 43px;

        padding: 8px 12px !important;

        border-radius: 10px !important;

        font-size: 11px !important;
    }


    /* ======================================================================
       경로 검색 탭
       ====================================================================== */

    #tab-route > div {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    #tab-route .text-4xl {
        font-size: 30px !important;
    }

    #tab-route h2 {
        margin-top: 10px !important;

        font-size: 19px !important;
        line-height: 1.35;

        letter-spacing: -0.035em;
    }

    #tab-route p {
        margin-top: 5px !important;

        padding: 0 5px;

        font-size: 11px !important;
        line-height: 1.5;

        word-break: keep-all;
    }

    #tab-route a {
        width: 100%;

        min-height: 44px;

        margin-top: 15px !important;

        padding: 10px 14px !important;

        border-radius: 10px !important;

        font-size: 12px !important;
    }


    /* ======================================================================
       버스 검색 결과
       ====================================================================== */

    #busResult > .mb-3 {
        margin-bottom: 8px !important;
    }


    /* ======================================================================
       하단 SEO / 설명 카드
       ====================================================================== */

    .transit-page section[aria-labelledby="transitGuideTitle"] {
        margin-top: 20px !important;

        padding: 16px !important;

        border-radius: 13px !important;
    }

    #transitGuideTitle {
        font-size: 16px !important;
        font-weight: 800 !important;

        line-height: 1.35;

        letter-spacing: -0.035em;
    }

    .transit-page section[aria-labelledby="transitGuideTitle"] > div {
        margin-top: 8px !important;

        font-size: 11px !important;
        line-height: 1.75 !important;

        letter-spacing: -0.012em;
    }

    .transit-page section[aria-labelledby="transitGuideTitle"] p {
        margin: 0 !important;
    }

    .transit-page section[aria-labelledby="transitGuideTitle"] p + p {
        margin-top: 9px !important;
    }


    /* ======================================================================
       터치 모바일 UX
       ====================================================================== */

    .transit-page button,
    .transit-page a,
    .transit-page input,
    .transit-page select {
        -webkit-tap-highlight-color: transparent;
    }

    .transit-page button {
        touch-action: manipulation;
    }

    .transit-page input[type="text"] {
        /*
         * iPhone Safari에서 input 글자가 16px 미만이면
         * 포커스 시 자동 확대될 수 있음.
         *
         * 아래에서 iOS만 별도로 16px 처리.
         */
    }


    /* ======================================================================
       가로 넘침 방지
       ====================================================================== */

    .transit-page .min-w-0 {
        min-width: 0 !important;
    }

    .transit-page img,
    .transit-page svg,
    .transit-page canvas {
        max-width: 100%;
    }


    /* ======================================================================
       긴 주소 / 정류장 이름 대응
       ====================================================================== */

    #currentLocationName,
    #currentLocationAddress,
    #areaSelectedName,
    #areaSelectedAddress {
        overflow-wrap: anywhere;
        word-break: keep-all;
    }


    /* ======================================================================
       스크롤 UX
       ====================================================================== */

    html {
        scroll-behavior: smooth;
    }

}


/* ==========================================================================
   3. 작은 모바일
   iPhone SE / Galaxy 작은 화면 등
   ========================================================================== */

@media screen and (max-width: 390px) {

    .transit-page {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .transit-page .transit-panel {
        padding: 14px !important;
    }

    .transit-page .transit-tab {
        font-size: 11px !important;
        letter-spacing: -0.055em;
    }

    #nearbyResult > .grid,
    #areaResult > .grid {
        gap: 5px !important;
    }

    #nearbyResult > .grid > div,
    #areaResult > .grid > div {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    #nearbyResult > .grid > div .text-xs,
    #areaResult > .grid > div .text-xs {
        font-size: 8px !important;
    }

    #nearbySummaryStopCount,
    #nearbySummaryRouteCount,
    #nearbySummaryRadius,
    #areaStopCount,
    #areaRouteCount,
    #areaSummaryRadius {
        font-size: 16px !important;
    }

    #nearbyMap {
        height: 370px !important;
        min-height: 370px;
    }

    #areaMap {
        height: 340px !important;
        min-height: 340px;
    }

}


/* ==========================================================================
   4. 아주 작은 모바일
   ========================================================================== */

@media screen and (max-width: 350px) {

    .transit-page .transit-tab {
        font-size: 10px !important;
    }

    #tab-nearby h2,
    #tab-area h2,
    #tab-bus h2 {
        font-size: 17px !important;
    }

    #nearbySummaryStopCount,
    #nearbySummaryRouteCount,
    #nearbySummaryRadius,
    #areaStopCount,
    #areaRouteCount,
    #areaSummaryRadius {
        font-size: 15px !important;
    }

}


/* ==========================================================================
   5. iOS Safari
   입력창 자동 줌 방지

   hover:none + coarse pointer는 대부분 스마트폰
   ========================================================================== */

@media screen and (max-width: 640px) and (hover: none) and (pointer: coarse) {

    #areaKeyword,
    #busKeyword {
        font-size: 16px !important;
    }

    #areaKeyword::placeholder,
    #busKeyword::placeholder {
        font-size: 13px !important;
    }

}


/* ==========================================================================
   6. 가로모드 스마트폰
   ========================================================================== */

@media screen and (max-height: 500px) and (orientation: landscape) {

    #nearbyMap {
        height: 310px !important;
        min-height: 310px;
    }

    #areaMap {
        height: 300px !important;
        min-height: 300px;
    }

}


/* ==========================================================================
   7. 접근성
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .transit-page *,
    .transit-page *::before,
    .transit-page *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}


/* ==========================================================================
   8. 다크모드 자동 적용 방지
   지도가 포함되어 있어 우선 Light 기반 유지
   ========================================================================== */

@media screen and (max-width: 640px) {

    .transit-page input,
    .transit-page button {
        color-scheme: light;
    }

}