/* ===== Fonts ===== */
@font-face { font-family: 'Cass'; src: url('/resources/fonts/CassOTF_Regualr.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cass'; src: url('/resources/fonts/CassOTF_SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cass'; src: url('/resources/fonts/CassOTF_Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JASO'; src: url('/resources/fonts/JASOSans-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JASO'; src: url('/resources/fonts/JASOSans-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'JASO'; src: url('/resources/fonts/JASOSans-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

/* ===== Base ===== */
html, body { overflow: hidden; height: 100%; font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; }
a { text-decoration: none; }
#body_container { padding-top: 50px; }

/* ===== Map Header ===== */
.map-header { position: fixed; top: 0; left: 0; width: 100%; height: 90px; background: url('/resources/images/map/pc-top-banner.png') center/cover no-repeat; z-index: 2500; display: flex; align-items: center; justify-content: space-between; padding: 0 102.5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); font-family: 'Cass OTF', 'Pretendard', sans-serif; }
.header-logo { flex-shrink: 0; height: 100%; display: flex; align-items: center; }
.header-logo img { width: auto; }
.header-slogan-wrapper { flex: 1; height: 100%; overflow: hidden; margin-left: 40px; position: relative; display: flex; align-items: center; width: 100%; }
.header-slogan { display: flex; white-space: nowrap; animation: led-scroll 60s linear infinite; gap: 95px; width: max-content; }
.slogan-image { flex-shrink: 0; height: 30px; }
@keyframes led-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Panel Slogan */
.panel-slogan-wrapper { flex: 1; height: 100%; overflow: hidden; position: relative; display: flex; align-items: center; margin: 0 10px; }
.panel-slogan { display: flex; white-space: nowrap; animation: led-scroll 40s linear infinite; gap: 20px; width: max-content; }
.panel-slogan .slogan-image { flex-shrink: 0; height: 20px; }

/* ===== Layout ===== */
#body_container * { letter-spacing: 0 !important; }
#map { position: relative; width: 100%; height: calc(100vh - 50px); margin-top: 0; }
#placePanel { position: absolute; top: 12vh; left: 20px; width: 375px; height: auto; max-height: calc(100vh - 230px); background: #ffffff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 12px; z-index: 100; display: flex; flex-direction: column; transition: all 0.3s ease; overflow: visible; }
#placePanel.collapsed { height: 122px; overflow: hidden; }
#placePanel.nearby-mode { max-height: 45vh; }

/* ===== Station Overlay ===== */
.station-countdown { position: absolute; top: 6vh; left: 50%; transform: translateX(-50%); z-index: 100; background: #ffffff; color: #000000; padding: 10px 20px; border-radius: 25px; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1); font-size: 14px; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 8px; font-family: "Cass"; font-weight: 600;}
.station-countdown .countdown-text strong { color: #1200E8; font-size: 15px; font-weight: 700; font-family: Cass; }
.station-live { position: absolute; top: 6vh; left: 50%; transform: translateX(-50%); z-index: 100; background: #ffffff; color: #000000; padding: 10px 20px; border-radius: 25px; border: 2px solid rgba(0, 0, 0, 0); background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(to right, #1200E8, #0048FF); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1); font-size: 14px; font-weight: 600; display: none; align-items: center; gap: 8px; white-space: nowrap; font-family: "Cass"; font-weight: 600;}
.station-live .live-badge { background: linear-gradient(to right, #1200E8, #00A6FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; font-size: 14px; }
.station-live .live-text { letter-spacing: 0.3px; }
.station-live .cass-text { font-family: 'Cass', 'Pretendard', sans-serif; font-weight: 700; color: #1200E8; }
.station-closed { position: absolute; top: 6vh; left: 50%; transform: translateX(-50%); z-index: 100; background: #ffffff; color: #000000; padding: 10px 20px; border-radius: 25px; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1); font-size: 14px; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 8px; font-family: "Cass"; font-weight: 600; }
.station-closed .closed-text { color: #333333; }
.station-closed .closed-text strong { color: #1200E8; font-weight: 700; }

/* WiFi Animation - 5 stages */
.wifi-anim { width: 18px; height: 18px; }
.wifi-anim .wifi-top { animation: wifiTop 2s infinite; }
.wifi-anim .wifi-mid { animation: wifiMid 2s infinite; }
.wifi-anim .wifi-bot { animation: wifiBot 2s infinite; }
@keyframes wifiBot { 0%, 20% { opacity: 0.3; } 21%, 100% { opacity: 1; } }
@keyframes wifiMid { 0%, 40% { opacity: 0.3; } 41%, 100% { opacity: 1; } }
@keyframes wifiTop { 0%, 60% { opacity: 0.3; } 61%, 100% { opacity: 1; } }

/* ===== Panel ===== */
.panel-header-tab-wrapper { background: url('/resources/images/map/panel-header-tab-wrap-bg.png') center/cover no-repeat; border-radius: 12px 12px 0 0; padding: 17px 25px; }
#panelHeader { display: flex; align-items: center; justify-content: space-between; }
#placePanel .panel-title img {width: 100%;}
#panelHeader .toggle-btn { position: static; background: rgba(0, 0, 0, 0); border: none; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#panelHeader .toggle-btn img{width: 100%;}
.toggle-btn { position: static !important; box-shadow: none !important; left: auto !important; top: auto !important; bottom: auto !important; }
.toggle-btn .chev { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; transition: opacity .25s ease, transform .25s ease; }
.toggle-btn .chev-up { opacity: 0; transform: translateY(4px); }
.toggle-btn .chev-down { opacity: 1; transform: translateY(0); }
#tabContainer { display: flex; align-items: center; padding: 10px 0 5px 0; }
.tab-group { display: flex; width: 330px; margin: auto; border-radius: 30px; background: #ffffff; padding: 4px; }
.tab-button { flex: 1; padding: 4px 6px; font-size: 14px; font-weight: 600; color: #1200E8; background-color: rgba(0, 0, 0, 0); border: none; cursor: pointer; transition: background-color 0.3s, color 0.3s; text-align: center; border-radius: 30px; }
.tab-button.active { background-color: #1200E8; color: #ffffff; border-radius: 30px; }
.tab-button:not(.active):hover { background-color: #1200e83a; }

#searchControls { padding: 8px 15px; background-color: #ffffff; overflow: visible; display: none; }
#searchControls .search-row { margin-bottom: 0; }
#searchControls .input-with-icon { position: relative; width: 100%; }
#searchControls .input-with-icon input { height: 34px; line-height: 34px; padding: 0 38px 0 15px; font-size: 12px; font-weight: 400; color: #333333; border: 1px solid #1200E8; border-radius: 99px; width: 100%; box-sizing: border-box; }
#searchControls .input-with-icon input::placeholder { color: #999999; opacity: 1; }
#searchControls .input-with-icon input:focus { outline: none; border-color: #1200E8; }
#searchControls .input-with-icon #searchMapBtn.search-icon-btn { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 20px; height: 20px; padding: 0; border: 0; background: rgba(0, 0, 0, 0); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#searchControls .input-with-icon #searchMapBtn.search-icon-btn img { width: 18px; height: 18px; }
#autocompleteList { position: absolute; top: 100%; left: 0; right: 0; z-index: 1001; max-height: 180px; overflow-y: auto; background-color: #ffffff; border-top: none; border-radius: 0 0 8px 8px; }

#regionControls { padding: 8px 15px; background-color: #ffffff; overflow: visible; display: none; padding-bottom: 0; border-bottom: 1px solid #e7e7e7;}
#regionControls .common-row { margin-bottom: 0; padding: 0; }
#regionControls select { height: 42px; width: 100%; padding: 0 40px 0 12px; font-size: 12px; font-weight: 500; color: #333333; background-color: #ffffff; border: 0; border-radius: 0; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: var(--chev-svg); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; cursor: pointer; }
#regionControls select:focus { outline: none; border-bottom-color: #1200E8; }
#regionControls select:disabled { opacity: 0.5; cursor: not-allowed; }

#tagControls { padding: 8px 15px; background-color: #ffffff; overflow: visible; display: none; }
#tagControls .search-row.tag-row { margin: 0; }
#tagContainer { display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex-wrap: wrap; }
#tagContainer::-webkit-scrollbar { display: none; }
#tagContainer.tag-strip { display: flex; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
#tagContainer .tag-filter { display: inline-flex; align-items: center; box-sizing: border-box; height: 24px; padding: 5 12px; border-radius: 12px; }
#tagContainer .tag-filter.active { border-color: #0048FF; }
.tag-filter { display: flex; align-items: center; justify-content: center; padding: 4px 10px; font-size: 12px; background-color: rgba(117, 117, 117, 0.10); border-radius: 30px; color: #000000; cursor: pointer; transition: all 0.2s ease; }
.tag-filter.active { background-color: rgba(0, 72, 255, 0.10); color: #0048FF; }
.tag-scroller { position: relative; overflow: visible; }
.tag-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: none; border-radius: 50%; background: #1251c9; color: #ffffff; font-size: 14px; display: none; justify-content: center; align-items: center; cursor: pointer; user-select: none; z-index: 5; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); line-height: 1; padding: 0; }
.nav-prev { left: -6px; }
.nav-next { right: -6px; }
.tag-nav:disabled { opacity: .35; cursor: default; box-shadow: none; }
.tag-scroller:hover .tag-nav { display: flex; }

#placeListCount { background-color: #ffffff !important; color: #1200E8 !important; padding: 75px 0px; }
#placeList { padding: 0; overflow-y: auto; max-height: calc(100vh - 220px); }
#placeList div { cursor: pointer; color: #333333; }
#placeList div:hover { cursor: pointer; }
#placeList::-webkit-scrollbar { width: 6px; }
#placeList::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); border-radius: 3px; }
#placeList::-webkit-scrollbar-thumb { background: #0048FF; border-radius: 3px; }
#placeList::-webkit-scrollbar-thumb:hover { background: #0048FF; }

.tag { display: flex; align-items: center; justify-content: space-between; padding: 4px 14px; background-color: rgba(0, 72, 255, 0.10); color: #0048FF; border-radius: 30px; font-size: 11px; font-weight: 400; white-space: nowrap; }
.curation-tag { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background-color: #1251c9; color: #ffffff; border-radius: 99px; font-size: 11px; line-height: 1.2; }
.tag span { display: inline-block; transform: translateY(1px); }

.custom-popup { padding: 16px 20px; font-size: 16px; line-height: 1.5; min-width: 237px; max-width: 237px; background: #ffffff; z-index: 1000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); border-radius: 10px; }
.custom-popup b { font-size: 18px; font-weight: 600; color: #000000; font-family: "Cass"; }
.custom-popup .address,
.custom-popup .distance,
.custom-popup .category { color: #000000; font-size: 13px; display: block; }

#currentLocationBtn { position: absolute; bottom: 10px; right: 10px; z-index: 1000; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 8px; padding: 8px 12px; font-size: 14px; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); display: flex; align-items: center; }

.naver-maps-zoom-control { top: 5vh !important; }

/* ===== Loading ===== */
#loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 2000; }
#loading-icon { width: 40px; height: 40px; border: 4px solid #1251c9; border-top: 4px solid rgba(0, 0, 0, 0); border-radius: 50%; animation: spin 1s linear infinite; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.mobile-only-footer { display: none; }

.custom-cluster { width: 42px; height: 42px; border-radius: 50%; background-color: #0048FF; color: #ffffff; font-size: 14px; font-weight: bold; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; }

.custom-cluster:hover { transform: scale(1.1); }

.marker-blink { position: relative; width: 43px; height: 62px; }
.marker-blink img { position: absolute; top: 0; left: 0; width: 43px; height: 62px; }
.marker-blink-event { opacity: 1; animation: marker-blink-event 1s steps(1, end) infinite; animation-play-state: paused; }
.marker-blink-default { opacity: 0; animation: marker-blink-default 1s steps(1, end) infinite; animation-play-state: paused; }
body.marker-blink-enabled .marker-blink-event,
body.marker-blink-enabled .marker-blink-default { animation-play-state: running; }
body.marker-blink-enabled .marker-blink.marker-blink-paused .marker-blink-event,
body.marker-blink-enabled .marker-blink.marker-blink-paused .marker-blink-default { animation-play-state: paused; }
@keyframes marker-blink-event { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes marker-blink-default { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

.autocomplete-items { position: absolute; top: 100%; left: 0; right: 0; z-index: 999; max-height: 180px; overflow-y: auto; background-color: #ffffff; border-top: none; font-size: 13px; color: #000000; }

.autocomplete-items div { padding: 8px; cursor: pointer; border-bottom: 1px solid #eeeeee; font-size: 13px; }

.autocomplete-items div:hover { background-color: #f0f0f0; }

.report-tag { display: inline-flex; align-items: center; justify-content: center; padding: 3px 3px; font-size: 9px; line-height: 1; font-weight: 400; color: #595959; background-color: #f5f5f5; border: 1.1px solid #d9d9d9; border-radius: 4px; }

:root { --safe-bot: env(safe-area-inset-bottom, 0px); --chev-svg: url("/resources/images/map/function-icon.png"); }
@supports (height: 100dvh) {
  :root { --vb: 66dvh; }
}


#curationSelect, #curationSelect:hover, #curationSelect:focus, #curationSelect:active, #curationSelect:focus-visible, .dropdown.show #curationSelect { background-color: #ffffff !important; color: #333333 !important; }

#curationSelect.dropdown-toggle::after { display: none; }

#curationSelect { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 48px; padding: 0 calc(10px + var(--chev-size) + 8px) 0 12px; border: 0; border-bottom: 1px solid #e7e7e7; font-size: 12px; line-height: 34px; text-align: left; background-image: var(--chev-svg) !important; background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; }

#curationSelect:hover, #curationSelect:focus { background-color: #1200E810; }
#curationSelect .label { font-size: 12px; font-weight: 300; color: #000000; }

#curationDropdownMenu[data-bs-popper] { margin-top: 0 !important; }

#curationDropdownMenu { --bs-dropdown-spacer: 0; display: flex; transform: translate(0, 65%) !important; opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s cubic-bezier(.2,.8,.2,1); will-change: transform, opacity; padding: 20px 10px !important; border-radius: 0 !important; overflow: auto; box-shadow: 0px 0px 10px 2px #0000004f; border: 0; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; }
#curationDropdownMenu.show { transform: translateY(0); opacity: 1; pointer-events: auto; transition-delay: .15s; }
#curationDropdownMenu.animating-out { transform: translateY(-8px); opacity: 0; pointer-events: none; transition-delay: .15s; }

#curationDropdownMenu .cur-tag { font-size: 12px !important; line-height: 1 !important; display: inline-flex; padding: 4px 8px !important; background: #f0f0f0 !important; color: #4c4c4c !important; border-radius: 30px !important; border-color: #f0f0f0 !important; }

#curationDropdownMenu .cur-tag.btn-success { background: #1200E8 !important; border-color: #1200E8 !important; color: #ffffff !important; border-radius: 30px !important; }


#placeList .tag, #placeList .curation-tag, .custom-popup .tag, .custom-popup .curation-tag { margin: 0; }

@media (max-width: 768px){
  .map-header { padding: 0 20px; height: 54px; }
  .header-logo img { height: 36px; }
  .header-slogan-wrapper { margin-left: 15px; }
  .slogan-image { height: 22px; }
  .header-slogan { gap: 40px; }

  #body_container { height: 100vh; overflow: hidden; box-sizing: border-box; position: relative; padding-top: 0; }
  #map { width: 100%; height: calc(100vh - 53px); position: absolute; top: 53px; left: 0; z-index: 1; }

  .station-countdown { top: 10px; padding: 8px 14px; font-size: 12px; max-width: 90%; }
  .station-countdown .clock-icon { width: 16px; height: 16px; }
  .station-countdown .countdown-text strong { font-size: 13px; }
  .station-live { top: 10px; padding: 8px 14px; font-size: 12px; max-width: 90%; }
  .station-closed { top: 10px; padding: 8px 14px; font-size: 12px; max-width: 90%; }
  .station-closed .clock-icon { width: 16px; height: 16px; }

  .tag-nav { display: none !important; }

  #placePanel { position: fixed !important; left: 0; top: auto !important; bottom: 0 !important; width: 100%; height: clamp(96px, 50vh, calc(100vh - 53px - var(--safe-bot))); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); z-index: 1000; justify-content: flex-end; border-radius: 0; padding-top: 18px; border-radius: 12px;}
  #placePanel.expanded { height: calc(var(--vb) - 53px - var(--safe-bot)); max-height: calc(var(--vb) - 53px - var(--safe-bot)); }
  #placePanel.collapsed { top: auto !important; height: 100px !important; min-height: 110px !important; bottom: 0 !important; }
  #placePanel.nearby-mode { height: 43vh; max-height: 45vh; }
  #placePanel.collapsed #searchControls, #placePanel.collapsed #tagControls, #placePanel.collapsed #regionControls, #placePanel.collapsed #placeList, #placePanel.collapsed #placeListCount { display: none !important; }

  .panel-header-tab-wrapper { position: fixed; width: 100vw; padding: 20px 25px 13px; z-index: 1; display: flex; flex-direction: column; }
  #panelHeader { position: fixed; top: 0; left: 0; width: 100%; box-sizing: border-box; z-index: 2000; }
  #placePanel #panelHeader { order: 3; position: relative; justify-content: center; border-bottom: none; z-index: 1002; border-radius: 0; padding: 0; }
  #placePanel #panelHeader .toggle-btn { position: absolute; top: 8px; right: 8px; z-index: 1003; }
  .panel-title { color: #ffffff; font-size: 18px; font-weight: bold; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #placePanel .panel-title { width: auto; padding: 0; flex-shrink: 0; }
  .panel-slogan-wrapper { flex: 1; margin: 0 8px; }
  .panel-slogan { gap: 15px; }
  .panel-slogan .slogan-image { height: 16px; }

  #tabContainer { order: 2; position: relative; width: 100%; box-sizing: border-box; z-index: 1001; border-radius: 0; padding: 0; padding-bottom: 10px; }
  .tab-group { width: 100%; height: 100%; }
  .tab-button { padding: 2px 0; line-height: 24px; }

  #searchControls, #tagControls, #regionControls { order: 0; flex-shrink: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 10px 15px; padding-top: 0px; }
  #regionControls .common-row { padding-bottom: 0; }
  #placeList { order: 1; flex: 1 1 auto; padding: 0 12px; }
  #placeList > div:last-child { border-bottom: none; padding-bottom: 15vh; }
  #placeListCount { order: 1; flex: 0 0 70px; text-align: center; padding: 50px 10px; }
  #searchControls, #tagControls .search-row { margin-bottom: 3px; }
  #searchControls, #tagControls .common-row { margin-bottom: 0px; }

  #currentLocationBtn { position: fixed; top: 22%; right: 8px; padding: 5px; width: 35px; height: 35px; z-index: 900; transform: translateY(40%); }
  #currentLocationBtn img { width: 24px; height: 24px; }

  .mobile-only-footer { display: block; position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; padding-bottom: var(--safe-bot); box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); z-index: 999; }

  .custom-popup { z-index: 1010; }
  /* Cookie */
  #ot-sdk-btn-floating .ot-floating-button__front, #ot-sdk-btn-floating .ot-floating-button__back { bottom: 20vh; left: 43vh; }
}
select:focus { outline: none !important; }
.form-select:focus { box-shadow: unset !important; }
#placeListDetail { padding:10px 15px; margin:0; border-bottom:1px solid #dfdfdf }
.pla-tit { display: flex; justify-content: space-between; align-items: center; padding: 0; margin:0; }
.pla-shop-nm { font-size: 16px; font-weight: 600; margin: 0; padding: 0; overflow-wrap: break-word; width: 220px; word-break: keep-all; font-family: 'Cass'; text-decoration: underline dotted 1px; text-underline-offset: 3px; color: #333333; }
.pla-gomap { display: flex; align-items: center; margin: 0; padding: 0; height: 15px; }
.pla-gomap img { width:18px; vertical-align:middle; }
.pla-tags { font-size: 11px; color: #ffffff; margin: 8px 0; padding: 0; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:4px; }
.pla-dis { font-size: 12px; margin: 6px 0; padding:0; }
.pla-dis span { margin-right: 10px; color: #0576F8;}
.pla-cate { font-weight:500; color: #0576F8; letter-spacing:-.8px !important }
.pla-adr { font-size: 12px; margin: 0; padding:0; font-weight:500; letter-spacing:-.8px !important; width:260px; word-break:keep-all; word-wrap:break-word; }
.tag, .curation-tag { font-size: 11px; display: flex; justify-content: center; align-items: center; border-radius: 30px; font-weight: 400; padding: 5px 12px; height: 24px; }