/* =====================================================================
   base.css  —  jQuery Mobile 대체용 최소 스타일 (카카오풍 하단바 적용)
   ===================================================================== */

/* ---------- 기본(전역) ---------- */
html { font-size: 100%; }
body, input, select, textarea, button { font-size: 1em; line-height: 1.3; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
body { margin: 0; overflow-x: hidden; color: #333; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); }
legend { color: inherit; text-shadow: inherit; }
:root label { display: block; margin: 0 0 .4em; font-weight: 400; font-size: 16px; }
:root fieldset { padding: 0; margin: 0; border-width: 0; min-width: 0; }
:root a img { border-width: 0; }
button[disabled] { opacity: .3; cursor: default !important; pointer-events: none; }

/* ---------- 페이지(화면) : ui.js 가 .active 를 옮겨 다니며 전환 ---------- */
.page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; padding: 0; margin: 0; outline: 0;
        background-color: #f9f9f9; border-color: #bbb; color: #333; }
.page.active { display: block; overflow: visible; overflow-x: hidden; }
.page a { color: #38c; font-weight: 700; }
.page a:visited { color: #38c; }
.page a:hover, .page a:active { color: #059; }
.page-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 1em; }

/* ---------- 상단 바 ---------- */
.toolbar { position: relative; display: block; background-color: #f9f9f9; color: #333; font-weight: 700; }
.toolbar-title { display: block; margin: 0 30%; padding: .7em 0; font-size: 1em; min-height: 1.1em; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
.toolbar .btn { font-size: 12.5px; display: inline-block; vertical-align: middle; }
.toolbar .tb-left, .toolbar .tb-right { position: absolute; top: .24em; margin: 0; }
.toolbar .tb-left { left: .4em; }
.toolbar .tb-right { right: .4em; }

/* ---------- 카카오 스타일 하단 툴바 (구형 toolbar-bottom 대체) ---------- */
.toolbar-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 58px !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
    z-index: 1000 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* ---------- 버튼 기본 스타일 ---------- */
.btn { font-size: 16px; line-height: 1.3; font-weight: 700; border-width: 1px; border-style: solid; margin: .5em 0; padding: .7em 1em; display: block; position: relative; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; text-decoration: none !important; }
button.btn { box-sizing: border-box; -webkit-appearance: none; appearance: none; width: 100%; }
.page .btn, .page .btn:visited { background-color: #f6f6f6; border-color: #ddd; color: #333; }
.page .btn:hover { background-color: #ededed; border-color: #ddd; color: #333; }
.page .btn:active { background-color: #e8e8e8; border-color: #ddd; color: #333; }
.btn:focus { outline: 0; }
.btn.btn-corner { border-radius: .3125em; background-clip: padding-box; }
.btn-shadow { box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.btn-mini { font-size: 12.5px; }
.btn-inline { display: inline-block; vertical-align: middle; margin-right: .625em; }
button.btn-inline, .toolbar button.btn { width: auto; }

/* ---------- 카카오 스타일 내비게이션 바 (구형 navbar 대체) ---------- */
.navbar {
    width: 100%;
    height: 100%;
}

.navbar ul {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.navbar li {
    flex: 1 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* 하단 탭 버튼 커스텀 */
.navbar li a.btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 4px 0 2px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #8e8e93 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    transition: color 0.15s ease;
}

/* 카카오풍 SVG 아이콘 (기존 동그라미 배경 제거) */
.navbar li a.btn::after {
    content: "" !important;
    position: static !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 0 2px 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    opacity: 0.45 !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}

/* Active(선택된 상태) 스타일 - 카카오 다크그레이 포인트 */
.navbar li a.btn.ui-btn-active,
.navbar li a.btn.btn-active,
.navbar li a.btn:active,
.navbar li a.btn.active {
    background-color: transparent !important;
    color: #191919 !important;
    font-weight: 700 !important;
}

.navbar li a.btn.ui-btn-active::after,
.navbar li a.btn.btn-active::after,
.navbar li a.btn:active::after,
.navbar li a.btn.active::after {
    opacity: 1 !important;
    transform: scale(1.08) !important;
}

/* ---------- 카카오 스타일 아이콘 SVG 매핑 ---------- */
.i-grid::after {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919'%3E%3Cpath d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z'/%3E%3C/svg%3E") !important;
}

.i-shop::after {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919'%3E%3Cpath d='M19 7h-3V6a4 4 0 0 0-8 0v1H5a1 1 0 0 0-1 1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8a1 1 0 0 0-1-1zm-9-1a2 2 0 0 1 4 0v1h-4V6zm8 13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9h2v1a1 1 0 0 0 2 0V9h4v1a1 1 0 0 0 2 0V9h2v10z'/%3E%3C/svg%3E") !important;
}

.i-heart::after {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") !important;
}

.i-user::after {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") !important;
}

/* ---------- 입력창 ---------- */
.input-text { display: block; margin: .5em 0; border: 1px solid #ddd; border-radius: .3125em; background-color: #fff; color: #333; box-shadow: inset 0 1px 3px rgba(0,0,0,.1); }
.input-text input { display: block; width: 100%; min-height: 2.2em; padding: .4em; margin: 0; border: 0; background: none; box-sizing: border-box; outline: 0; text-align: left; -webkit-appearance: none; appearance: none; border-radius: .3125em; }

/* ---------- 셀렉트(선택 상자) ---------- */
.select { position: relative; margin: .5em 0; }
.select select { display: block; width: 100%; margin: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; cursor: pointer;
    padding: .7em 2.5em .7em 1em; font-size: 16px; line-height: 1.3; font-weight: 700; text-align: center; text-align-last: center;
    border: 1px solid #ddd; border-radius: .3125em; background-color: #f6f6f6; color: #333; box-shadow: 0 1px 3px rgba(0,0,0,.1); }