/* =========================================================
   GridX Pretendard local font
   ========================================================= */
@font-face {
  font-family: "Pretendard";
  src: url("/css/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("/css/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("/css/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html,
body,
button,
input,
textarea,
select {
  font-family: "Pretendard", sans-serif !important;
}

/* =========================================================
   GridX App CSS - Conservative Cleanup v1
   - HTML/JS 변경 없음
   - 주석/공백 정리
   - 동일 블록 내부 중복 선언 제거
   - 완전히 동일한 중복 규칙 제거
   - 선택자 순서와 cascade는 최대한 보존
   ========================================================= */

:root {
  --app-main: #10c98b;
  --app-main-dark: #008c83;
  --app-text: #111111;
  --app-sub: #777777;
  --app-muted: #999999;
  --app-line: #eeeeee;
  --app-input-line: #e6e6e6;
  --app-danger: #ff4d4f;
  --app-disabled: #d1d1d6;
  --app-bg: #ffffff;
  --app-mint-bg: #eafff7;
  --app-header-height: 52px;
  --app-bottom-nav-height: 64px;
  --app-side-padding: 30px;
  --app-form-width: 320px;
  --app-radius: 12px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", "Segoe UI", sans-serif;
}

body {
  min-height: 100dvh;
}

button,
input,
textarea,
select {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", "Segoe UI", sans-serif;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
}

.app-screen {
  width: 100%;
  min-height: 100dvh;
  background: #ffffff;
}

.app-page {
  width: 100%;
  min-height: 100dvh;
  background: #ffffff;
  position: relative;
}

.app-page.with-bottom-nav {
  padding-bottom: var(--app-bottom-nav-height);
}

.app-content {
  width: 100%;
  padding: 0 var(--app-side-padding);
}

.app-scroll {
  min-height: 100dvh;
  overflow-y: auto;
}

.app-header {
  height: var(--app-header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #ffffff;
  border-bottom: 1px solid var(--app-line);
}

.app-header.no-border {
  border-bottom: 0;
}

.app-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--app-text);
}

.app-header-left,
.app-header-right {
  position: absolute;
  top: 0;
  height: var(--app-header-height);
  display: flex;
  align-items: center;
}

.app-header-left {
  left: 10px;
}

.app-header-right {
  right: 14px;
}

.app-icon-btn {
  width: 36px;
  height: 36px;
  font-size: 22px;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-logo {
  display: block;
  width: 210px;
  height: auto;
  margin: 0 auto;
}

.app-logo.small {
  width: 78px;
  margin: 0;
}

.app-logo.footer {
  width: 66px;
}

.app-form {
  width: 100%;
  max-width: var(--app-form-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-field {
  width: 100%;
}

.app-input-wrap {
  position: relative;
  width: 100%;
}

.app-input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--app-input-line);
  border-radius: var(--app-radius);
  background: #ffffff;
  padding: 0 18px;
  font-size: 15px;
  color: #111111;
  outline: none;
}

.app-input::placeholder {
  color: #b8b8b8;
}

.app-input:focus {
  border-color: #222222;
}

.app-input.error,
.app-input.is-error {
  border-color: var(--app-danger) !important;
}

.app-input.with-icon {
  padding-right: 42px;
}

.app-input-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #b4b4b4;
}

.app-form-message,
#idMsg,
#pwMsg,
#pwConfirmMsg,
#phoneMsg {
  margin-top: 4px;
  padding-left: 4px;
  font-size: 11px;
  min-height: 14px;
  color: var(--app-danger) !important;
  line-height: 1.3;
}

.app-form-message.ok {
  color: var(--app-main) !important;
}

.app-helper {
  display: none;
  margin-top: 5px;
  font-size: 11px;
  color: var(--app-danger);
}

.app-helper.show {
  display: block;
}

.app-error-box {
  display: none;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--app-danger);
}

.app-error-box.show {
  display: block;
}

.app-server-error {
  border: 1px solid #ffd1d1;
  background: #fff5f5;
  color: var(--app-danger);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
}

.app-btn {
  width: 100%;
  height: 40px;
  border-radius: var(--app-radius);
  font-size: 15px;
  font-weight: 700;
}

.app-btn:active {
  transform: scale(0.985);
}

.app-btn-primary {
  background: var(--app-main);
  color: #ffffff;
}

.app-btn-gray {
  background: var(--app-disabled);
  color: #ffffff;
}

.app-btn-outline {
  border: 1px solid var(--app-line);
  background: #ffffff;
  color: #111111;
}

.app-btn-dark {
  background: #3f3f3f;
  color: #ffffff;
}

.app-btn:disabled,
.app-btn.disabled {
  background: var(--app-disabled);
  color: #ffffff;
  transform: none;
  cursor: default;
}

.login-page {
  min-height: 100dvh;
  background: #ffffff;
  padding: 12px var(--app-side-padding) 0;
}

.login-logo {
  margin-bottom: 14px;
}

.login-form {
  width: 100%;
  max-width: var(--app-form-width);
  margin: 0 auto;
}

.login-btn {
  margin-top: 18px;
}

.login-links {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #999999;
}

.login-links a {
  color: #999999;
}

.login-home-link {
  display: block;
  margin: 28px 0 18px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--app-main-dark);
}

.kakao-login-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-decoration: none;
}

.kakao-login-btn img {
  width: 100%;
  height: auto;
  border: none;
  display: block;
}

.app-sub-link {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: #999999;
}

.phone-row,
.input-with-button {
  display: flex;
  gap: 8px;
}

.phone-row .app-input-wrap,
.input-with-button .app-input-wrap {
  flex: 1;
}

.side-btn,
.phone-cert-btn {
  width: 84px;
  height: 38px;
  border-radius: 12px;
  background: var(--app-disabled);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.company-footer {
  margin: 0 calc(var(--app-side-padding) * -1);
  padding: 26px var(--app-side-padding) 34px;
  border-top: 1px solid var(--app-line);
  background: #ffffff;
  text-align: center;
  color: #888888;
}

.company-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #777777;
}

.company-logo {
  display: block;
  width: 70px;
  margin: 0 auto 12px;
}

.company-text {
  font-size: 10px;
  line-height: 1.6;
  color: #888888;
  word-break: keep-all;
  padding: 0 10px;
}

.company-text p {
  margin: 2px 0;
}

.app-top-bar {
  height: 58px;
  padding: 18px 16px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.app-cs-link {
  font-size: 11px;
  color: #555555;
}

.app-bottom-nav {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--app-bottom-nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #ffffff;
  border-top: 1px solid var(--app-line);
  display: flex;
  z-index: 50;
}

.app-bottom-nav a,
.app-bottom-nav button {
  flex: 1;
  height: var(--app-bottom-nav-height);
  color: #111111;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.app-bottom-nav .icon {
  font-size: 18px;
  line-height: 1;
}

.app-bottom-nav .active {
  color: var(--app-main-dark);
  font-weight: 700;
}

.charger-input-page {
  min-height: 100dvh;
  padding-bottom: var(--app-bottom-nav-height);
  background: linear-gradient(160deg, #f0fff9 0%, #f7fbff 52%, #ffffff 100%);
}

.charger-center {
  padding: 86px 24px 0;
  text-align: center;
}

.app-title {
  font-size: 16px;
  font-weight: 800;
  color: #111111;
}

.charger-code-box {
  margin-top: 22px;
  height: 58px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #bdeee0;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 10px;
  padding-left: 10px;
  font-size: 28px;
  font-weight: 800;
  color: var(--app-main);
}

.charger-code-box.placeholder {
  color: #d6d6dc;
}

.charger-code-box.error {
  color: var(--app-danger);
}

.charger-helper {
  margin-top: 14px;
  font-size: 11px;
  color: var(--app-danger);
}

.charging-page {
  min-height: 100dvh;
  padding-bottom: var(--app-bottom-nav-height);
  background: #effff9;
}

.charging-status {
  height: 34px;
  padding: 0 10px;
  background: rgba(16, 201, 139, 0.16);
  color: var(--app-main-dark);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.charging-main {
  padding: 104px 24px 0;
  text-align: center;
}

.charging-label {
  font-size: 12px;
  color: #333333;
  margin-bottom: 7px;
}

.charging-time {
  font-size: 30px;
  font-weight: 900;
  color: #111111;
  letter-spacing: 1px;
}

.charging-metric {
  margin-top: 30px;
}

.charging-value {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 900;
  color: var(--app-main);
}

.charging-unit {
  font-size: 16px;
}

.history-summary-area {
  background: var(--app-mint-bg);
  padding: 18px 16px 12px;
}

.history-month-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.history-summary-card {
  background: #ffffff;
  border: 1px solid #5fdcb9;
  border-radius: 10px;
  padding: 14px 16px;
}

.history-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.8;
}

.history-summary-line strong {
  font-weight: 800;
}

.history-list {
  background: #ffffff;
}

.history-item {
  padding: 17px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.history-date {
  font-size: 11px;
  color: #555555;
  margin-bottom: 10px;
}

.history-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.7;
}

.history-price {
  color: var(--app-main-dark);
  font-weight: 800;
}

.app-list {
  background: #ffffff;
}

.app-list-item {
  min-height: 54px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--app-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-list-main {
  min-width: 0;
}

.app-list-title {
  font-size: 13px;
  font-weight: 700;
  color: #111111;
}

.app-list-sub {
  margin-top: 5px;
  font-size: 11px;
  color: #999999;
}

.app-chevron {
  font-size: 18px;
  color: #aaaaaa;
}

.info-table {
  padding: 12px 20px;
}

.info-row {
  min-height: 42px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
  font-size: 12px;
}

.info-label {
  width: 90px;
  color: #777777;
}

.info-value {
  flex: 1;
  color: #111111;
  text-align: right;
}

.status-active {
  color: var(--app-main);
  font-weight: 800;
}

.app-modal-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-modal {
  width: calc(100% - 72px);
  max-width: 303px;
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 20px 20px;
  text-align: center;
}

.app-modal-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 8px;
}

.app-modal-desc {
  font-size: 12px;
  color: #777777;
  line-height: 1.5;
  margin-bottom: 20px;
}

.app-sheet-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  z-index: 100;
}

.app-bottom-sheet {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 18px 18px 0 0;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  z-index: 101;
}

.app-sheet-handle {
  width: 44px;
  height: 4px;
  border-radius: 99px;
  background: #e5e5e5;
  margin: 0 auto 20px;
}

.app-sheet-option {
  height: 38px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #111111;
}

.app-sheet-option.active {
  color: var(--app-main);
  font-weight: 800;
}

.app-sheet-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.app-sheet-actions .app-btn {
  flex: 1;
}

.app-empty {
  min-height: calc(100dvh - var(--app-header-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.app-empty-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #d7d7dc;
  color: #ffffff;
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
}

.app-empty-text {
  font-size: 12px;
  color: #777777;
  text-align: center;
}

.hidden,
.app-hidden {
  display: none !important;
}

.app-show {
  display: block !important;
}

.text-center {
  text-align: center;
}

.mt-8 {
  margin-top: 8px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-32 {
  margin-top: 32px;
}

.kostel-connector-screen {
  min-height: calc(100dvh - 78px);
  margin: -26px -18px -104px;
  padding: 96px 18px 104px;
  background: linear-gradient(180deg, #eef5ff 0%, #f8fbff 55%, #ffffff 100%);
  position: relative;
}

.kostel-connector-title {
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  padding-top: 60px;
  margin-bottom: 34px;
}

.kostel-connector-grid {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.kostel-connector-card {
  width: 112px;
  height: 112px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.kostel-connector-card img {
  width: 112px;
  height: 112px;
  display: block;
  border-radius: 50%;
  object-fit: contain;
}

.kostel-home-btn {
  position: fixed;
  right: 22px;
  bottom: 96px;
  width: 112px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #666b75;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.connector-sheet {
  padding-top: 10px;
}

.connector-sheet-title {
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  color: #111111;
  margin-bottom: 18px;
}

.connector-sheet-grid {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.connector-sheet-card {
  width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.connector-sheet-card img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18));
}

.connector-sheet-card span {
  font-size: 11px;
  font-weight: 800;
  color: #111111;
}

.connector-sheet-card:active img {
  transform: scale(0.94);
}

.charge-ready-page {
  min-height: calc(100dvh - var(--app-bottom-nav-height));
  padding: 0 18px 92px;
  background: radial-gradient(circle at 28% 22%, rgba(16, 201, 139, 0.16), transparent 34%),
    linear-gradient(160deg, #f0fff9 0%, #f4f8ff 54%, #ffffff 100%);
  position: relative;
}

.charge-ready-top {
  height: 58px;
  display: flex;
  align-items: center;
}

.charge-ready-logo {
  width: 64px;
  height: auto;
}

.charge-ready-center {
  padding-top: 92px;
  text-align: center;
}

.charge-ready-title {
  font-size: 13px;
  font-weight: 800;
  color: #111111;
  margin-bottom: 18px;
}

.charge-code-input {
  width: 100%;
  max-width: 316px;
  height: 58px;
  border: 1px solid #d7e5f1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,.14);
  padding: 0 18px;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--app-main);
  outline: none;
}

.charge-code-input::placeholder {
  color: #c7c7c7;
}

.charge-code-input.is-error,
.charge-code-input.error {
  border-color: #ff4d4f;
  color: #ff3333;
}

.charge-input-error {
  min-height: 18px;
  margin-top: 12px;
  font-size: 10px;
  font-weight: 700;
  color: #ff3333;
}

.charge-start-btn {
  position: static;
  margin-top: 28px;
  left: 18px;
  right: 18px;
  bottom: calc(var(--app-bottom-nav-height) + 14px);
  height: 42px;
  border-radius: 6px;
  background: var(--app-main);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.charge-start-btn:disabled {
  background: var(--app-disabled);
}

.charging-web-page {
  min-height: 100dvh;
  background: radial-gradient(circle at 24% 13%, rgba(26, 199, 139, 0.14), transparent 35%),
    linear-gradient(180deg, #f4fff9 0%, #f7fbff 58%, #ffffff 100%);
}

.charging-web-page .app-page,
.charging-web-page .charge-ready-page,
.charging-web-page #stepWaiting,
.charging-web-page #stepCharging {
  background: transparent;
}

.charging-web-page .charge-ready-page {
  min-height: calc(100dvh - var(--app-bottom-nav-height));
  padding: 32px 24px calc(var(--app-bottom-nav-height) + 18px);
  display: flex;
  flex-direction: column;
}

.charging-web-page .charge-ready-top {
  height: 34px;
  display: flex;
  align-items: flex-start;
}

.charging-web-page .charge-ready-logo {
  width: 58px;
  height: auto;
}

.charging-web-page .charge-ready-center {
  padding-top: 0;
  margin-top: 132px;
  text-align: center;
}

.charging-web-page .charge-ready-title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
  color: #111;
  margin-bottom: 28px;
  letter-spacing: -0.5px;
}

.charging-web-page .charge-code-input {
  width: 100%;
  max-width: none;
  height: 66px;
  border-radius: 17px;
  border: 1px solid #dfe6ee;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  font-size: 28px;
  font-weight: 800;
  color: #00a982;
  text-align: left;
  padding: 0 26px;
}

.charging-web-page .charge-code-input::placeholder {
  color: #c9cdd3;
  font-size: 27px;
  font-weight: 900;
}

.charging-web-page .charge-input-error {
  margin-top: 12px;
  min-height: 18px;
  font-size: 11px;
}

.charging-web-page .charge-start-btn {
  position: static;
  width: 100%;
  height: 56px;
  border-radius: 11px;
  background: #18c993;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  margin-top: 28px;
}

.charging-web-page .charge-start-btn:disabled {
  background: #d3d3d8;
}

.charging-web-page .app-bottom-sheet.connector-sheet {
  border-radius: 28px 28px 0 0;
  padding: 10px 24px calc(26px + env(safe-area-inset-bottom));
}

.charging-web-page .connector-sheet .app-sheet-handle {
  width: 42px;
  height: 4px;
  margin: 0 auto 22px;
  background: #e5e5e5;
}

.charging-web-page .connector-sheet-title {
  font-size: 25px;
  line-height: 1.2;
  font-weight: 900;
  color: #111;
  text-align: center;
  margin: 0 0 28px;
  letter-spacing: -0.6px;
}

.charging-web-page .connector-sheet-grid {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.charging-web-page .connector-sheet-card {
  flex: 1;
  width: auto;
  border: 0;
  background: transparent;
  text-align: center;
  gap: 0;
}

.charging-web-page .connector-sheet-card img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.12));
}

.charging-web-page .connector-sheet-card span {
  display: block;
  margin-top: 15px;
  font-size: 20px;
  font-weight: 900;
  color: #111;
}

.charging-web-page .connector-sheet .app-btn {
  height: 50px;
  border-radius: 13px;
  font-size: 18px;
  font-weight: 900;
}

.charging-web-page #stepWaiting.app-content,
.charging-web-page #stepCharging.app-content {
  padding: 0 24px calc(var(--app-bottom-nav-height) + 20px);
}

.charging-web-page #stepWaiting .mt-32,
.charging-web-page #stepCharging .mt-24 {
  margin-top: 0;
}

.charging-web-page #stepWaiting .app-list-item {
  margin: 42px 0 0;
  min-height: 120px;
  padding: 24px 26px;
  border-radius: 24px !important;
  border: 1px solid #ececec !important;
  background: #fff;
}

.charging-web-page #stepWaiting .app-list-title {
  font-size: 22px;
  font-weight: 900;
}

.charging-web-page #stepWaiting .app-list-sub {
  margin-top: 10px;
  font-size: 18px;
  color: #9b9b9b;
}

.charging-web-page #stepWaiting .status-active {
  font-size: 36px;
  font-weight: 900;
  color: #18c993;
}

.charging-web-page #stepWaiting .app-empty {
  min-height: 330px !important;
  justify-content: center;
}

.charging-web-page #stepWaiting .app-empty-icon {
  width: 66px;
  height: 66px;
  font-size: 32px;
  margin-bottom: 24px;
}

.charging-web-page #stepWaiting .app-modal-title {
  font-size: 28px;
  font-weight: 900;
}

.charging-web-page #stepWaiting .app-empty-text {
  margin-top: 14px;
  font-size: 19px;
  line-height: 1.5;
}

.charging-web-page #stepWaiting .app-btn-outline {
  height: 56px;
  border-radius: 16px;
  font-size: 22px;
  font-weight: 900;
}

.charging-web-page .charging-status {
  width: calc(100% - 72px);
  height: 46px;
  margin: 0 auto;
  padding: 0 18px;
  background: #d9fbef;
  color: #008875;
  font-size: 20px;
  font-weight: 900;
}

.charging-web-page .charging-status span:last-child {
  font-size: 23px;
  font-weight: 900;
}

.charging-web-page .charging-main {
  padding: 58px 0 0 !important;
  text-align: center;
}

.charging-web-page .charging-label {
  font-size: 18px;
  line-height: 1.2;
  color: #333;
  margin-bottom: 14px;
}

.charging-web-page .charging-time {
  font-size: 54px;
  line-height: 1;
  font-weight: 900;
  color: #050505;
  letter-spacing: -1px;
}

.charging-web-page .charging-metric {
  margin-top: 42px;
}

.charging-web-page .charging-value {
  margin-top: 14px;
  font-size: 46px;
  line-height: 1;
  font-weight: 900;
  color: #18c993;
  letter-spacing: -1px;
}

.charging-web-page #finalMessage {
  margin-top: 58px !important;
  margin-bottom: 0;
}

.charging-web-page #finalTitle {
  font-size: 29px;
  line-height: 1.2;
  font-weight: 900;
  color: #111;
  margin-bottom: 16px;
}

.charging-web-page #finalSub {
  max-width: 300px;
  margin: 0 auto;
  font-size: 19px;
  line-height: 1.45;
  color: #777;
  word-break: keep-all;
}

.charging-web-page #finalMessage:not(.app-hidden) + .charging-main {
  padding-top: 42px !important;
}

.charging-web-page #stopBtn,
.charging-web-page #homeBtn {
  position: static !important;
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 42px;
  border-radius: 16px;
  font-size: 22px;
  font-weight: 900;
}

.charging-web-page #stopBtn {
  background: #18c993;
  color: #fff;
}

.charging-web-page #stopBtn:disabled {
  background: #d4d4da;
}

.charging-web-page #homeBtn {
  background: #fff;
  color: #111;
  border: 1px solid #e5e5e5;
}

.charging-web-page #finalMessage:not(.app-hidden) ~ #stopBtn,
.charging-web-page #finalMessage:not(.app-hidden) ~ #homeBtn {
  margin-top: 34px;
}

@media (max-height: 760px) {
  .charging-web-page .charge-ready-center {
    margin-top: 96px;
  }

  .charging-web-page .charging-main {
    padding-top: 44px !important;
  }

  .charging-web-page .charging-metric {
    margin-top: 34px;
  }

  .charging-web-page .charging-time {
    font-size: 48px;
  }

  .charging-web-page .charging-value {
    font-size: 40px;
  }

  .charging-web-page #finalMessage {
    margin-top: 42px !important;
  }
}

.charging-web-page .charge-ready-page {
  padding: 0 0 calc(var(--app-bottom-nav-height) + 8px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(#fff 0 56px, transparent 56px),
        radial-gradient(circle at 22% 18%,
            rgba(23,201,149,.16),
            transparent 34%),
        linear-gradient(180deg,
            #effff7 0%,
            #f6fbff 55%,
            #ffffff 100%);
}

.charging-web-page .charge-ready-top {
  height: 56px;
  display: flex;
  align-items: center;
  padding-left: 18px;
}

.charging-web-page .charge-ready-logo {
  width: 90px;
  height: auto;
}

.charging-web-page .charge-ready-center {
  margin-top: 105px;
  text-align: center;
}

.charging-web-page .charge-ready-title {
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 18px;
}

.charging-web-page .charge-code-input {
  width: 72%;
  max-width: 250px;
  height: 74px;
  margin: 0 auto;
  border-radius: 18px;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 10px;
  background: #fff;
  border: 1px solid #E6E6E6;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.charging-web-page .charge-code-input::placeholder {
  color: #d0d3d8;
  letter-spacing: 10px;
  font-size: 28px;
  font-weight: 900;
}

.charging-web-page .charge-start-btn {
  width: calc(100% - 48px);
  max-width: 320px;
  height: 56px;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1px;
  display: block;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 900;
  background: #1BCB93;
}

.charging-web-page .charge-start-btn:disabled {
  background: #d5d5d5;
}

.charging-web-page .charge-code-otp {
  width: 72%;
  max-width: 250px;
  height: 74px;
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid #e6e6e6;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.charging-web-page .charge-code-real-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.01;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
}

.charging-web-page .charge-code-slots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  pointer-events: none;
}

.charging-web-page .charge-code-slots span {
  min-width: 14px;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  color: #c9cdd3;
  text-align: center;
}

.charging-web-page .charge-code-slots span.filled {
  color: #18c993;
}

.charging-web-page .charge-code-otp.is-error {
  border-color: #ff5b5b;
}

.charging-web-page .charge-code-otp.is-error .charge-code-slots span.filled {
  color: #ff3333;
}

.charging-web-page .charge-code-otp.is-valid {
  border-color: #18c993;
}

.charging-web-page .charge-code-otp.is-valid .charge-code-slots span.filled {
  color: #18c993;
}

.charging-web-page .charge-code-otp.is-checking {
  border-color: #8ee8cf;
}

.charging-web-page .charging-run-page {
  min-height: calc(100dvh - var(--app-bottom-nav-height));
  padding: 0 0 calc(var(--app-bottom-nav-height) + 8px) !important;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 22% 12%, rgba(23,201,149,.16), transparent 34%),
    linear-gradient(180deg, #effff7 0%, #f6fbff 55%, #ffffff 100%) !important;
}

.charging-web-page .charging-top-bar {
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0 18px;
  background: rgba(16, 201, 139, 0.15);
  color: #008875;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 900;
}

.charging-web-page .charging-top-bar strong {
  font-size: 13px;
  font-weight: 900;
}

.charging-web-page .charge-metrics {
  padding: 0 24px;
  margin-top: 104px;
  text-align: center;
}

.charging-web-page .charge-label {
  font-size: 12px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.charging-web-page .charge-time {
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  color: #111;
  letter-spacing: 1px;
}

.charging-web-page .charge-label-gap {
  margin-top: 34px;
}

.charging-web-page .charge-energy,
.charging-web-page .charge-price {
  margin-top: 6px;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  color: #18c993;
}

.charging-web-page #stopBtn {
  width: calc(100% - 48px);
  max-width: 320px;
  height: 56px;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1px;
  border-radius: 10px;
  background: #1BCB93;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.charging-web-page #stopBtn:disabled {
  background: #d5d5d5;
}

.charging-web-page .charge-finish-title {
  margin-top: 70px;
  text-align: center;
}

.charging-web-page .charge-finish-title h2 {
  font-size: 44px;
  font-weight: 900;
  margin-bottom: 18px;
}

.charging-web-page .charge-finish-title p {
  font-size: 18px;
  color: #666;
  line-height: 1.6;
}

.charging-web-page .charging-top-bar {
  height: 38px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #DFFAF1;
}

.charging-web-page .charging-top-bar strong {
  font-size: 14px;
  font-weight: 900;
  color: #008E7C;
}

.charging-web-page .charge-metrics {
  margin-top: 90px;
  text-align: center;
}

.charging-web-page .charge-label {
  font-size: 14px;
  font-weight: 500;
  color: #555;
  margin-bottom: 10px;
}

.charging-web-page .charge-time {
  font-size: 48px;
  font-weight: 900;
  color: #111;
}

.charging-web-page .charge-label-gap {
  margin-top: 24px;
}

.charging-web-page .charge-energy,
.charging-web-page .charge-price {
  font-size: 42px;
  font-weight: 900;
  color: #17C995;
}

.charging-web-page .charge-energy {
  margin-bottom: 10px;
}

.charging-web-page #stopBtn {
  width: calc(100% - 48px);
  max-width: 320px;
  height: 56px;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2px;
  border-radius: 10px;
  background: #1BCB93;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
}

.charging-web-page #finalMessage {
  margin-top: 82px;
  margin-bottom: 28px;
  text-align: center;
}

.charging-web-page #finalTitle {
  font-size: 42px;
  font-weight: 900;
  margin-bottom: 18px;
}

.charging-web-page #finalSub {
  width: 290px;
  margin: 0 auto;
  font-size: 18px;
  color: #777;
  line-height: 1.6;
}

.charging-web-page #finalMessage:not(.app-hidden)+.charge-metrics {
  margin-top: 20px;
}

.charging-web-page #homeBtn {
  width: calc(100% - 48px);
  max-width: 320px;
  height: 56px;
  margin-top: 28px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e5e5;
  color: #111;
  font-size: 19px;
  font-weight: 900;
}

.app-sub-page {
  min-height: 100dvh;
  padding: 18px 20px calc(var(--app-bottom-nav-height) + 24px);
  background: radial-gradient(circle at 24% 8%, rgba(23,201,149,.14), transparent 32%),
    linear-gradient(180deg, #f4fff9 0%, #f7fbff 52%, #ffffff 100%);
}

.sub-top {
  height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub-logo {
  width: 72px;
}

.sub-link {
  font-size: 11px;
  color: #555;
  font-weight: 700;
}

.history-month-row {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.month-arrow {
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 900;
}

.month-title-btn {
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 900;
}

.history-summary-card {
  margin-top: 14px;
  padding: 15px 18px;
  border-radius: 12px;
  border: 1px solid #73dec0;
  background: #ffffff;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.9;
}

.summary-row strong {
  color: #13b989;
  font-weight: 900;
}

.history-list {
  margin-top: 18px;
}

.history-item {
  padding: 18px 0;
  border-bottom: 1px solid #eeeeee;
}

.history-date {
  font-size: 12px;
  color: #777;
  margin-bottom: 12px;
}

.history-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-top: 8px;
}

.history-label {
  color: #555;
  font-weight: 700;
}

.history-value {
  font-weight: 900;
}

.history-price {
  color: #13b989;
}

.empty-history {
  padding: 60px 0;
  text-align: center;
  font-size: 13px;
  color: #999;
}

.more-title {
  margin-top: 30px;
  font-size: 24px;
  font-weight: 900;
}

.more-card {
  margin-top: 16px;
  padding: 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #eeeeee;
}

.more-section-title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 14px;
}

.more-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 16px;
}

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

.more-label {
  color: #777;
  font-weight: 700;
}

.more-value {
  font-weight: 900;
}

.more-menu {
  margin-top: 12px;
  padding: 18px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eeeeee;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 900;
}

.month-sheet-dim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 100;
}

.month-sheet {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 14px 24px calc(24px + env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 26px 26px 0 0;
  z-index: 101;
}

.month-sheet-handle {
  width: 44px;
  height: 4px;
  border-radius: 99px;
  background: #e5e5e5;
  margin: 0 auto 22px;
}

.month-sheet-title {
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 18px;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 10px;
}

.month-grid a {
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

.month-grid a.active {
  background: #18c993;
  color: #fff;
}

.charging-wait-page {
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.charging-wait-page .charger-info-card {
  width: 88%;
  margin: 24px auto 0;
  background: #fff;
  border-radius: 22px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.charger-info-title {
  font-size: 16px;
  font-weight: 700;
  color: #222;
}

.charger-info-sub {
  margin-top: 6px;
  font-size: 15px;
  color: #888;
}

.charger-info-code {
  font-size: 48px;
  font-weight: 800;
  color: #20c997;
}

.charge-wait-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 30px;
}

.charge-wait-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  margin-bottom: 28px;
}

.charge-wait-title {
  font-size: 44px;
  font-weight: 800;
  margin-bottom: 20px;
}

.charge-wait-desc {
  font-size: 21px;
  line-height: 1.8;
  color: #666;
}

.charging-wait-page .charge-outline-btn {
  width: 88%;
  height: 58px;
  margin: 0 auto 34px;
  border-radius: 14px;
}

.charging-web-page .charging-wait-page {
  min-height: calc(100dvh - var(--app-bottom-nav-height));
  padding: 0 0 calc(var(--app-bottom-nav-height) + 8px) !important;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 22% 12%, rgba(23,201,149,.16), transparent 34%),
    linear-gradient(180deg, #effff7 0%, #f6fbff 55%, #ffffff 100%) !important;
}

.charging-web-page .charging-wait-page .charger-info-card {
  width: calc(100% - 48px);
  max-width: 320px;
  min-height: 126px;
  margin: 42px auto 0;
  padding: 24px 28px;
  border-radius: 24px;
  border: 0;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.charging-web-page .charging-wait-page .charger-info-title {
  font-size: 22px;
  font-weight: 900;
  color: #111;
}

.charging-web-page .charging-wait-page .charger-info-code {
  font-size: 34px;
  font-weight: 900;
  color: #18c993;
}

.charging-web-page .charging-wait-page .charge-wait-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 32px;
}

.charging-web-page .charging-wait-page .charge-wait-icon {
  display: none;
}

.charging-web-page .charging-wait-page .charge-wait-title {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 900;
  color: #111;
  margin-bottom: 24px;
  word-break: keep-all;
  white-space: nowrap;
}

.charging-web-page .charging-wait-page .charge-wait-desc {
  font-size: 21px;
  line-height: 1.7;
  color: #777;
  word-break: keep-all;
}

.charging-web-page .charging-wait-page .charge-outline-btn {
  width: calc(100% - 48px);
  max-width: 320px;
  height: 56px;
  margin: 0 auto 2px;
  border-radius: 10px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font-size: 19px;
  font-weight: 900;
}

.history-page {
  padding-top: 0;
}

.history-page .sub-top,
.more-page .sub-top {
  height: 56px;
  padding-left: 18px;
  padding-right: 18px;
  display: flex;
  align-items: center;
}

.history-page .sub-logo,
.more-page .sub-logo {
  width: 90px;
  height: auto;
}

.history-month-row {
  margin-top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

.month-title-btn {
  font-size: 16px;
  font-weight: 900;
  background: transparent;
}

.month-arrow {
  font-size: 20px;
  font-weight: 900;
}

.history-summary-card {
  margin: 16px 14px 20px;
  padding: 14px 18px;
  border: 1px solid #18c993;
  border-radius: 10px;
  background: #fff;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 2;
}

.summary-row strong {
  color: #18c993;
  font-weight: 900;
}

.history-list {
  margin-top: 0;
  background: #fff;
}

.history-item {
  padding: 18px 20px;
  border-bottom: 1px solid #eeeeee;
}

.history-date {
  font-size: 11px;
  color: #555;
  margin-bottom: 14px;
}

.history-info-row {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-size: 12px;
}

.history-label {
  color: #333;
  font-weight: 700;
}

.history-value {
  color: #111;
  font-weight: 900;
}

.history-price {
  color: #18c993;
}

body {
  margin: 0;
}

.app-logo-header {
  height: 60px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #fff;
}

.app-logo-header img {
  width: 82px;
  height: auto;
}

.app-logo-header .logout {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  text-decoration: none;
}

.card-register-btn {
  margin-top: 24px;
}

.card-register-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #E8F4FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin: 8px auto 16px;
}

.card-register-main {
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 10px;
  color: #171A1F;
}

.card-register-sub {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  color: #6F7782;
  margin-bottom: 22px;
}

.card-back-btn {
  margin-top: 10px;
}

.card-register-notice {
  padding: 0 6px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #777;
  text-align: center;
}

.card-back-link {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #666;
  text-decoration: none;
}

.pagination {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 40px;
  margin: 20px 0 90px;
}

.pagination .page-btn:first-child {
  position: absolute;
  left: 20px;
}

.pagination .page-btn:last-child {
  position: absolute;
  right: 20px;
}

.pagination .page-number {
  font-weight: 700;
}

.rate-confirm-sheet {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 480px;
  padding: 12px 20px 24px;
  border-radius: 24px 24px 0 0;
  box-sizing: border-box;
  background: #fff;
}

.rate-confirm-title {
  margin-top: 14px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: #111;
}

.rate-confirm-info {
  margin-top: 28px;
  padding: 22px 18px;
  text-align: center;
  border: 1px solid #e5ece9;
  border-radius: 18px;
  background: #f8fcfa;
}

.rate-confirm-charger {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #7a8580;
}

.rate-confirm-type {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #202724;
}

.rate-confirm-amount {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #008d65;
}

.rate-confirm-base-fee {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
}

.rate-confirm-notice {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: #707975;
}

.rate-confirm-actions {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rate-confirm-start-btn {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: #00a879;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.rate-confirm-cancel-btn {
  width: 100%;
  height: 48px;
  border: 1px solid #d9e0dd;
  border-radius: 14px;
  background: #fff;
  color: #333;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.rate-confirm-start-btn:active,
.rate-confirm-cancel-btn:active {
  transform: scale(0.99);
}

.charging-web-page.with-bottom-nav {
  padding-bottom: 0 !important;
}

.charging-web-page #stepInput.charge-ready-page {
  width: 100%;
  height: calc(
       100dvh
       - 68px
       - env(safe-area-inset-bottom)
   );
  min-height: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: radial-gradient(
            ellipse 105% 50% at 8% 18%,
            rgba(32, 233, 216, 0.055) 0%,
            rgba(32, 233, 216, 0.025) 48%,
            transparent 76%
        ),
        radial-gradient(
            ellipse 115% 62% at 2% 72%,
            rgba(59, 127, 253, 0.045) 0%,
            rgba(59, 127, 253, 0.018) 54%,
            transparent 80%
        ),
        linear-gradient(
            180deg,
            #fbfffe 0%,
            #f2fcff 36%,
            #edf5ff 76%,
            #ffffff 100%
        ) !important;
}

.charging-web-page #stepInput.charge-ready-page::before,
.charging-web-page #stepInput.charge-ready-page::after {
  content: none !important;
  display: none !important;
}

.charging-web-page .charge-input-header {
  width: 100%;
  height: 68px;
  padding: 4px 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
  position: relative;
  z-index: 5;
}

.charging-web-page .charge-header-logo {
  display: flex;
  align-items: center;
}

.charging-web-page .charge-header-logo img {
  width: 78px;
}

.charging-web-page .charge-cs-link {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  color: #555555;
  text-decoration: none;
}

.charging-web-page #stepInput .app-logo-header.login {
  width: 100%;
  height: 78px;
  padding: env(safe-area-inset-top)
        16px
        0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
  position: relative;
  z-index: 5;
}

.charging-web-page #stepInput .app-logo-header.login img {
  display: block;
  width: 78px;
  height: auto;
}

.charging-web-page #stepInput .charge-ready-center {
  width: 100%;
  margin: 0;
  padding: clamp(118px, 18vh, 146px) 28px 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

.charging-web-page #stepInput .charge-ready-title {
  margin: 0 0 17px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 800;
  color: #111111;
  letter-spacing: -0.45px;
}

.charging-web-page #stepInput .charge-code-otp {
  width: 100%;
  max-width: 303px;
  height: 92px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid #d9dbe1;
  border-radius: 27px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 18px rgba(50, 72, 105, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

.charging-web-page #stepInput .charge-code-real-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.01;
  border: 0;
  outline: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  z-index: 2;
}

.charging-web-page #stepInput .charge-code-slots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.charging-web-page #stepInput .charge-code-slots span {
  display: block;
  min-width: 14px;
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  color: #d1d1d6;
  text-align: center;
}

.charging-web-page #stepInput .charge-code-slots span.filled {
  color: #18c993;
}

.charging-web-page #stepInput .charge-code-otp.is-checking {
  border-color: #8ee8cf;
}

.charging-web-page #stepInput .charge-code-otp.is-valid {
  border-color: #18c993;
  box-shadow: 0 8px 18px rgba(24, 201, 147, 0.14);
}

.charging-web-page #stepInput .charge-code-otp.is-error {
  border-color: #ff5b5b;
  box-shadow: 0 8px 18px rgba(255, 77, 79, 0.11);
}

.charging-web-page
#stepInput
.charge-code-otp.is-error
.charge-code-slots span.filled {
  color: #ff4d4f;
}

.charging-web-page #stepInput .charge-input-error {
  min-height: 17px;
  margin: 9px 0 0;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  color: #ff4d4f;
  text-align: center;
}

.charging-web-page #stepInput .charge-start-btn {
  position: static !important;
  display: block;
  width: calc(100% - 28px);
  max-width: 343px;
  height: 47px;
  margin: auto
        auto
        18px !important;
  flex-shrink: 0;
  border: 0;
  border-radius: 10px;
  background: #18c993;
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  text-align: center;
}

.charging-web-page #stepInput .charge-start-btn:disabled {
  background: #d1d1d6;
  color: #ffffff;
  cursor: default;
  transform: none;
}

.charging-web-page #stepInput .charge-start-btn:active:not(:disabled) {
  transform: scale(0.985);
}

.charging-web-page + .app-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(68px + env(safe-area-inset-bottom));
  padding: 0 0 env(safe-area-inset-bottom);
  display: flex;
  background: #ffffff;
  border-top: 1px solid #eeeeee;
  z-index: 50;
}

.charging-web-page + .app-bottom-nav a {
  flex: 1;
  height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  color: #111111;
}

.charging-web-page + .app-bottom-nav .icon {
  font-size: 20px;
  line-height: 1;
}

.charging-web-page + .app-bottom-nav a.active {
  color: #009c8a;
  font-weight: 700;
}

@media (max-height: 700px) {
  .charging-web-page #stepInput .charge-ready-center {
    padding-top: 86px;
  }

  .charging-web-page #stepInput .charge-code-otp {
    height: 86px;
  }

  .charging-web-page #stepInput .charge-start-btn {
    margin-bottom: 12px !important;
  }
}

@media (min-width: 430px) {
  .charging-web-page #stepInput .charge-ready-center {
    max-width: 375px;
    margin-left: auto;
    margin-right: auto;
  }
}

.charging-web-page #stepInput.charge-ready-page {
  background: radial-gradient(
            ellipse 72% 42% at -8% -2%,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.96) 42%,
            rgba(255, 255, 255, 0) 76%
        ),


        radial-gradient(
            ellipse 78% 46% at 108% 104%,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.94) 42%,
            rgba(255, 255, 255, 0) 76%
        ),


        radial-gradient(
            ellipse 108% 55% at 78% 5%,
            rgba(32, 233, 216, 0.075) 0%,
            rgba(32, 233, 216, 0.028) 54%,
            transparent 82%
        ),


        radial-gradient(
            ellipse 118% 68% at 20% 72%,
            rgba(59, 127, 253, 0.065) 0%,
            rgba(59, 127, 253, 0.024) 56%,
            transparent 84%
        ),

        linear-gradient(
            180deg,
            #fbfffe 0%,
            #f2fcff 35%,
            #edf5ff 75%,
            #ffffff 100%
        ) !important;
}

.charging-web-page + .app-bottom-nav .icon {
  width: 22px;
  height: 22px;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.charging-web-page + .app-bottom-nav .icon svg {
  width: 21px;
  height: 21px;
  display: block;
}

.charging-web-page + .app-bottom-nav a {
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
}

.app-bottom-nav .icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 1;
}

.app-bottom-nav .icon svg {
  display: block;
  width: 21px;
  height: 21px;
}

.app-bottom-nav .nav-charge-icon svg {
  fill: currentColor;
}

.app-bottom-nav .nav-history-icon svg,
.app-bottom-nav .nav-user-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-bottom-nav a {
  gap: 5px;
}

.app-bottom-nav a.active {
  color: #009c8a;
  font-weight: 700;
}

.month-sheet-year-row {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 38px;
}

.month-sheet-year-row .month-sheet-title {
  margin: 0;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  color: #111111;
}

.month-year-arrow {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
  color: #111111;
  border-radius: 50%;
}

.month-year-arrow:active {
  background: #f2f2f2;
}

body:has(.more-page) {
  background: #ffffff;
}

.app-sub-page.more-page {
  min-height: calc(
        100dvh
        - 68px
        - env(safe-area-inset-bottom)
    );
  background: #ffffff !important;
  padding: 18px
        20px
        calc(68px + env(safe-area-inset-bottom) + 24px);
}

.more-body {
  background: #ffffff;
}

.more-body .more-page {
  background: #ffffff !important;
}

.charging-web-page .charge-ready-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: #151515;
}

.charging-web-page .customer-service-link {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.32px;
  color: #454545;
}

.charging-web-page .charge-code-slots span {
  font-size: 16px;
  font-weight: 700;
}

.charging-web-page .charge-code-slots span.filled {
  color: #10C7A6;
}

.charging-web-page .charge-start-btn {
  font-size: 16px;
  font-weight: 700;
}


/* =========================================================
   Kakao Login Terms Bottom Sheet
   ========================================================= */

body.terms-sheet-open {
    overflow: hidden;
}

.kakao-terms-dim {
    position: fixed;
    inset: 0;
    z-index: 1900;

    background: rgba(0, 0, 0, 0.46);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}

.kakao-terms-dim.show {
    opacity: 1;
    visibility: visible;
}

.kakao-terms-sheet {
    position: fixed;
    left: 50%;
    bottom: 0;

    z-index: 2000;

    width: 100%;
    max-width: 480px;

    padding:
        10px
        20px
        calc(24px + env(safe-area-inset-bottom));

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 24px 24px 0 0;

    transform:
        translate(-50%, 105%);

    transition:
        transform 0.28s cubic-bezier(.22, .8, .3, 1);
}

.kakao-terms-sheet.show {
    transform:
        translate(-50%, 0);
}

.kakao-terms-handle {
    width: 34px;
    height: 4px;

    margin: 0 auto 16px;

    border-radius: 999px;

    background: #dedede;
}

.kakao-terms-close {
    position: absolute;

    top: 16px;
    right: 18px;

    width: 30px;
    height: 30px;

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

    color: #555555;

    font-size: 26px;
    font-weight: 300;
}

.kakao-terms-title {
    padding-right: 36px;
    margin-bottom: 24px;

    color: #151515;

    font-size: 18px;
    line-height: 1.45;
    font-weight: 800;
}

.kakao-term-all-row,
.kakao-term-row label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kakao-term-all-row {
    min-height: 42px;

    color: #222222;
    font-size: 15px;

    cursor: pointer;
}

.kakao-term-row {
    min-height: 44px;

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

    color: #555555;

    font-size: 13px;
}

.kakao-term-row label {
    flex: 1;
    cursor: pointer;
}

.kakao-term-all-row input,
.kakao-term-row input {
    display: none;
}

.kakao-term-check {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    position: relative;

    border: 1.5px solid #d2d2d2;
    border-radius: 50%;

    background: #ffffff;
}

.kakao-term-all-row input:checked + .kakao-term-check,
.kakao-term-row input:checked + .kakao-term-check {
    border-color: #10c98b;
    background: #10c98b;
}

.kakao-term-all-row input:checked + .kakao-term-check::after,
.kakao-term-row input:checked + .kakao-term-check::after {
    content: '';

    position: absolute;

    left: 5px;
    top: 2px;

    width: 5px;
    height: 9px;

    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;

    transform: rotate(45deg);
}

.kakao-terms-divider {
    height: 1px;

    margin: 8px 0 9px;

    background: #eeeeee;
}

.kakao-term-view {
    min-width: 28px;
    height: 34px;

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

    color: #777777;

    font-size: 24px;
    line-height: 1;
}

.kakao-terms-continue {
    width: 100%;
    height: 48px;

    margin-top: 20px;

    border-radius: 9px;

    background: #d1d1d6;
    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    transition: background 0.18s ease;
}

.kakao-terms-continue.enabled {
    background: #10c98b;
}

.kakao-terms-continue:disabled {
    cursor: default;
}

.rate-notice-list {
    margin: 0;
    padding-left: 20px;

    color: #74787e;
    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
    overflow-wrap: break-word;
}

.rate-notice-list li {
    margin-bottom: 12px;
}

.rate-notice-list {
    margin: 0;
    padding-left: 20px;

    color: #666;
    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
    overflow-wrap: break-word;
}

.rate-notice-list li {
    margin-bottom: 10px;
}

.rate-notice-list li:last-child {
    margin-bottom: 0;
}

.rate-guide-intro {
    margin-top: 12px;
    color: #666;
    font-size: 14px;
    line-height: 1.65;
    word-break: keep-all;
}

.kakao-term-view {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 6px 2px 6px 10px;

    color: #73777d;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.2;

    white-space: nowrap;
    cursor: pointer;
}

.kakao-terms-continue {
    width: 100%;
    height: 52px;
    margin-top: 22px;

    border: 0;
    border-radius: 10px;

    background: #D1D1D6;
    color: #FFFFFF;

    font-size: 15px;
    font-weight: 800;

    cursor: default;
}

.kakao-terms-continue:not(:disabled) {
    background: #10C98B;
    color: #FFFFFF;
    cursor: pointer;
}

.kakao-terms-continue:disabled {
    opacity: 1;
}

.more-menu-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 72px;

  text-decoration: none;
  color: #171A1F;
}

.more-menu-title {
  font-size: 17px;
  font-weight: 800;
}

.more-menu-arrow {
  font-size: 28px;
  font-weight: 300;
  color: #222;
}

/* =========================================================
   사용자 상세 화면 공통 헤더
   ========================================================= */

.app-detail-header {
    position: relative;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 16px;

    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
}

.app-detail-back {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);

    width: 40px;
    height: 40px;

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

    padding: 0;
    border: 0;
    background: transparent;

    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;
}

.app-detail-title {
    margin: 0;

    font-size: 17px;
    font-weight: 700;
    line-height: 1;

    color: #222222;
    text-align: center;
}
/* 2026-08-17 design QA adjustments */
.login-form .app-input-wrap { position: relative; }
.login-typing-state { display:none; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:700; color:#10b981; pointer-events:none; }
.login-typing-state.show { display:block; }
.login-error-under-password { margin: -2px 0 8px; text-align:left; }
.signup-complete-toast { position:fixed; left:50%; bottom:32px; transform:translate(-50%,20px); width:calc(100% - 48px); max-width:360px; padding:14px 18px; border-radius:14px; background:#3f4247; color:#fff; text-align:center; font-size:13px; line-height:1.5; opacity:0; transition:.2s; z-index:9999; }
.signup-complete-toast.show { opacity:1; transform:translate(-50%,0); }
.eye-icon {
  width:24px;
  height:24px;
  display:inline-block;
  flex:0 0 24px;
  box-sizing:border-box;
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}
/* Figma color/icon05, 24x24. eye-open = visible, eye-closed = hidden */
.eye-icon.eye-open {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2.25 12s3.5-6 9.75-6 9.75 6 9.75 6-3.5 6-9.75 6S2.25 12 2.25 12Z' stroke='%23B4B4B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3' stroke='%23B4B4B4' stroke-width='2'/%3E%3C/svg%3E");
}
.eye-icon.eye-closed {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 3l18 18' stroke='%23B4B4B4' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M10.6 6.15A10.9 10.9 0 0 1 12 6c6.25 0 9.75 6 9.75 6a18.9 18.9 0 0 1-3.1 3.72M6.45 7.5C3.72 9.35 2.25 12 2.25 12s3.5 6 9.75 6c1.35 0 2.56-.28 3.63-.72' stroke='%23B4B4B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.88 9.88A3 3 0 0 0 14.12 14.12' stroke='%23B4B4B4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.eye-icon::before,.eye-icon::after { content:none !important; }
.history-value, .history-price { color:#111 !important; }
.month-sheet-year-row { justify-content:center !important; gap:8px; padding:0 !important; }
.month-sheet-year-row .month-sheet-title { font-weight:500 !important; min-width:68px; text-align:center; }
.month-year-arrow { width:28px !important; height:28px !important; font-size:20px !important; }
.month-year-arrow.disabled, .month-grid a.disabled { opacity:.25; pointer-events:none; }
.month-grid a { font-weight:500 !important; }
.profile-header { height:64px; padding:env(safe-area-inset-top) 18px 0; display:grid; grid-template-columns:70px 1fr 70px; align-items:center; background:#fff; border-bottom:1px solid #f1f1f1; }
.profile-header strong { text-align:center; font-size:16px; font-weight:700; }
.profile-back,.profile-close { border:0; background:transparent; font-size:28px; text-align:left; padding:0; cursor:pointer; }
.profile-close { text-align:right; }
.profile-logout { text-align:right; font-size:16px; color:#555; }
.status-badge { padding:5px 9px; border-radius:7px; font-size:16px; font-weight:500; }
.status-badge.active { background:#d9fff3; color:#00a77f; }
.status-badge.inactive { background:#ffe7e7; color:#ff4e4e; }
.status-badge.blocked { background:#eeeeef; color:#555; }
.password-change-page,.password-complete-page { position:fixed; inset:0; background:#fff; z-index:2000; }
.password-change-form { padding:18px; height:calc(100% - 64px); display:flex; flex-direction:column; }
.password-field { position:relative; margin-top:10px; }
.password-field input { width:100%; height:48px; padding:0 48px 0 14px; border:1px solid #ddd; border-radius:10px; outline:none; box-sizing:border-box; }
.password-field input:focus { border-color:#12c996; }
.password-field button { position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:transparent; }
.password-error { min-height:16px; margin:4px 4px 0; font-size:10px; color:#ff4e57; }
.password-change-submit { margin-top:auto; margin-bottom:12px; }
.password-complete-center { height:calc(100% - 64px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.password-check { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#12c996; color:#fff; font-size:30px; font-weight:700; }
.password-complete-center p { font-size:12px; color:#333; }
.charging-page-header { height:58px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; background:#fff; }
.charging-page-header img { width:76px; height:auto; }
.charging-page-header a { font-size:12px; color:#333; }
.charge-id-left { text-align:left; padding-left:18px; font-size:12px; color:#008e7c; font-weight:700; }
.charge-final-id { margin-top:auto; margin-left:24px; margin-bottom:12px; align-self:flex-start; font-size:12px; color:#555; }
.stop-confirm-dim { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:2500; display:flex; align-items:center; justify-content:center; }
.stop-confirm-box { width:280px; background:#fff; border-radius:16px; padding:22px; text-align:center; box-shadow:0 10px 35px rgba(0,0,0,.18); }
.stop-confirm-box strong { display:block; font-size:17px; margin-bottom:8px; }
.stop-confirm-box p { font-size:12px; color:#777; margin-bottom:20px; }
.stop-confirm-actions { display:flex; gap:10px; }
.stop-confirm-actions button { flex:1; height:42px; border:0; border-radius:9px; font-weight:700; }
.stop-confirm-actions .confirm { background:#12c996; color:#fff; }
.history-month-row .month-arrow.disabled { opacity:.25; pointer-events:none; }


/* Requested UI follow-up fixes */
.history-summary-card .summary-row strong { color:#111 !important; }
.history-item .history-price { color:#111 !important; }
.history-item .history-energy { color:#13b989 !important; }
.charge-input-error:not(:empty)::before {
  content:'!'; display:inline-flex; align-items:center; justify-content:center;
  width:12px; height:12px; margin-right:4px; border-radius:50%;
  background:#ff4d4f; color:#fff; font-size:9px; font-weight:800; line-height:1;
  vertical-align:1px;
}
.charging-page-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#fff; }
.charging-page-header img { width:78px; height:auto; }
.charging-page-header a { color:#111; text-decoration:none; font-size:14px; }
.stop-confirm-dim { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding:24px; }
.stop-confirm-box { width:min(320px,100%); background:#fff; border-radius:18px; padding:22px; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.stop-confirm-box p { margin:10px 0 18px; color:#777; font-size:13px; }
.stop-confirm-actions { display:flex; gap:10px; }
.stop-confirm-actions button { flex:1; height:42px; border:1px solid #ddd; border-radius:10px; background:#fff; }
.stop-confirm-actions .confirm { background:#13c994; border-color:#13c994; color:#fff; }
.charge-final-id { margin:18px 0 8px; text-align:left; font-size:13px; font-weight:700; }


/* 2026-08-18 Figma QA patch: scoped UI only */
.login-page { padding-left:16px; padding-right:16px; }
.login-page .login-form { max-width:343px; }
.login-page .login-form .app-input { height:56px; border-radius:12px; box-sizing:border-box; }
.login-page .login-typing-state { left:16px; right:auto; top:auto; bottom:7px; transform:none; font-size:11px; }
.login-page .login-password-wrap { position:relative; }
.login-page .login-eye-btn { position:absolute; right:14px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:0; padding:0; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; }
#signupForm { width:calc(100% - 32px); max-width:343px; }
#signupForm .app-input { height:56px; border-radius:12px; box-sizing:border-box; }
.charging-web-page #stepInput .charge-ready-center { padding-left:20px; padding-right:20px; }
.charging-web-page #stepInput .charge-code-otp { width:100%; max-width:335px; height:114px; border-radius:32px; box-sizing:border-box; }
.charging-web-page #stepInput .charge-code-slots { min-width:242px; min-height:56px; }
.charging-web-page #stopBtn { margin-top:48px; }
.charging-web-page #finalMessage { margin-top:46px; margin-bottom:16px; }
.charging-web-page #finalTitle { font-size:32px; margin-bottom:12px; }
.charging-web-page #finalSub { font-size:15px; line-height:1.5; }
.charging-web-page #finalMessage:not(.app-hidden)+.charge-metrics { margin-top:12px; }
.charging-web-page #homeBtn { margin-top:18px; }
.charging-web-page .charging-wait-page .charge-wait-center { transform:translateY(28px); }
.history-month-row .month-arrow { font-size:26px !important; min-width:30px; line-height:1; text-align:center; }
.history-summary-card .summary-row { font-size:16px !important; line-height:1.8; }
.history-item { font-size:14px; }
.profile-edit-form { height:calc(100dvh - 64px); min-height:0; padding-bottom:max(24px, env(safe-area-inset-bottom)); }
.profile-edit-submit { flex:0 0 48px; margin-top:auto; margin-bottom:0; }
@supports (-webkit-touch-callout:none) {
  .profile-edit-form { height:calc(100dvh - 64px - env(safe-area-inset-bottom)); }
}

/* 2026-08-18 final Figma QA - presentation only */
/* login: Figma 343x56, typing prefix inside ID field, 56px CTA */
.login-page .login-form .app-input-wrap { position:relative; }
.login-page #loginId { padding-left:78px; }
.login-page .login-typing-state {
  left:16px; right:auto; top:50%; bottom:auto; transform:translateY(-50%);
  display:none; color:#111; font-size:14px; font-weight:400; line-height:1;
}
.login-page .login-typing-state.show { display:block; }
.login-page .login-btn { height:56px; border-radius:12px; }
/* signup CTA follows same Figma component */
#signupForm .app-btn { height:56px; border-radius:12px; }

/* charger code: 335x114 outer / 242x56 content / 40px digits / 16px gaps */
.charging-web-page #stepInput .charge-code-otp { max-width:335px; height:114px; border-radius:32px; }
.charging-web-page #stepInput .charge-code-slots { width:242px; min-width:242px; height:56px; min-height:56px; gap:16px; }
.charging-web-page #stepInput .charge-code-slots span { min-width:18px; font-size:40px; line-height:56px; font-weight:700; letter-spacing:-1.2px; }

/* waiting: prevent copy/CTA collision and lower CTA */
.charging-web-page .charging-wait-page .charge-wait-center { transform:none; margin-top:68px; }
.charging-web-page .charging-wait-page .charge-wait-desc { line-height:1.75; }
.charging-web-page .charging-wait-page .charge-outline-btn { margin-top:auto; margin-bottom:24px; flex:0 0 56px; }

/* paid/failed: compact enough to keep home CTA in one viewport */
.charging-web-page #finalMessage { margin-top:48px; margin-bottom:12px; }
.charging-web-page #finalTitle { font-size:34px; line-height:1.15; margin-bottom:12px; }
.charging-web-page #finalSub { font-size:15px; line-height:1.4; }
.charging-web-page #finalMessage:not(.app-hidden)+.charge-metrics { margin-top:8px; }
.charging-web-page #finalMessage:not(.app-hidden)+.charge-metrics .charge-label-gap { margin-top:14px; }
.charging-web-page #finalMessage:not(.app-hidden)+.charge-metrics .charge-time { font-size:40px; }
.charging-web-page #finalMessage:not(.app-hidden)+.charge-metrics .charge-energy,
.charging-web-page #finalMessage:not(.app-hidden)+.charge-metrics .charge-price { font-size:36px; }
.charging-web-page #homeBtn { margin-top:18px; margin-bottom:18px; flex:0 0 56px; }
.charging-web-page .charge-final-id { display:none !important; }

/* More: email label on its own line, address beneath it */
.more-email-row { display:block; }
.more-email-row > .more-label { display:block; white-space:nowrap; margin-bottom:10px; }
.more-email-line { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.more-email-line .more-value { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* password edit: compact fields until an actual validation message exists */
.password-change-form { height:calc(100dvh - 64px); min-height:0; padding:12px 16px max(20px, env(safe-area-inset-bottom)); }
.password-field { margin-top:8px; }
.password-field input { height:56px; border-radius:12px; padding-left:16px; }
.password-error { min-height:0; height:0; overflow:hidden; margin:0 4px; line-height:16px; transition:height .12s, margin .12s; }
.password-error:not(:empty) { height:auto; min-height:16px; margin:4px 4px 2px; overflow:visible; }
.password-change-submit { width:100%; height:56px; flex:0 0 56px; border-radius:12px; margin-top:auto; margin-bottom:0; }

/* phone/email/car edit: same bottom CTA geometry as password */
.profile-edit-form { height:calc(100dvh - 64px); min-height:0; padding:12px 16px max(20px, env(safe-area-inset-bottom)); overflow:hidden; }
.profile-edit-field input { height:56px; border-radius:12px; padding:0 16px; font-size:16px; }
.profile-edit-submit { width:100%; height:56px; flex:0 0 56px; border-radius:12px; margin-top:auto; margin-bottom:0; }
@supports (-webkit-touch-callout:none) {
  .password-change-form,.profile-edit-form { height:calc(100dvh - 64px - env(safe-area-inset-bottom)); }
}


/* 2026-08-18 02:xx Figma follow-up: presentation-only overrides */
/* Login: normal placeholder/value starts at 16px; while typing show prefix and push value right. */
.login-page #loginId { padding-left:16px !important; background:#fff !important; }
.login-page #loginId.typing-active { padding-left:82px !important; }
.login-page .login-typing-state { left:16px !important; color:#111 !important; font-size:14px !important; font-weight:400 !important; }
.login-page .login-btn { height:56px !important; }

/* Prevent Chrome/Safari autofill/focus tint on login/signup fields. */
.login-page .app-input:focus,
#signupForm .app-input:focus { background:#fff !important; }
.login-page .app-input:-webkit-autofill,
.login-page .app-input:-webkit-autofill:hover,
.login-page .app-input:-webkit-autofill:focus,
#signupForm .app-input:-webkit-autofill,
#signupForm .app-input:-webkit-autofill:hover,
#signupForm .app-input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  box-shadow:0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color:#111 !important;
  transition:background-color 9999s ease-out 0s;
}

/* Smart-charge term helper copy starts on a new line. */
.kakao-smart-term small { display:block; margin-top:4px; }

/* Charging/waiting/completion background and top status tint from Figma. */
.charging-web-page .charging-run-page,
.charging-web-page .charging-wait-page {
  background:#B7F4E233 !important;
}
.charging-web-page .charging-top-bar {
  background:#06C58F1A !important;
}

/* Shared header geometry: logo 16px from left, customer center 16px. */
.charging-page-header,
.charge-input-header,
.app-logo-header {
  padding-left:16px !important;
  padding-right:16px !important;
  box-sizing:border-box;
}
.charging-page-header a,
.charge-cs-link,
.app-logo-header .logout { font-size:16px !important; }

/* History: only month/summary zone uses green tint; rows are full-width white with 8px separators. */
.history-page { background:#fff !important; position:relative; }
.history-month-row,
.history-summary-card { position:relative; z-index:1; }
.history-page::before {
  content:"";
  display:block;
  position:absolute;
  left:0; right:0;
  top:0;
  height:248px;
  background:#06C58F1A;
  z-index:0;
  pointer-events:none;
}
.history-list { background:#F6F6F9 !important; padding:0 !important; }
.history-item {
  background:#fff !important;
  margin:0 0 8px 0 !important;
  border-bottom:0 !important;
  padding-left:20px !important;
  padding-right:20px !important;
}
.history-item:last-child { margin-bottom:0 !important; }
.history-summary-card { margin-left:20px !important; margin-right:20px !important; }

/* More page field names requested. */
.more-email-row .more-label { white-space:nowrap; }

/* 2026-08-18 profile single-field edit: keep CTA inside the visible viewport */
.profile-edit-page {
  display:flex;
  flex-direction:column;
  width:100%;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  box-sizing:border-box;
}
.profile-edit-page > .profile-header {
  flex:0 0 64px;
  height:64px;
  box-sizing:border-box;
}
.profile-edit-page > .profile-edit-form {
  flex:1 1 auto;
  width:100%;
  height:auto !important;
  min-height:0;
  padding:12px 16px max(20px, env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-sizing:border-box;
}
.profile-edit-page .profile-edit-submit {
  width:100%;
  height:56px;
  min-height:56px;
  flex:0 0 56px;
  margin-top:auto;
  margin-bottom:0;
  border-radius:12px;
}
@supports (-webkit-touch-callout:none) {
  .profile-edit-page { height:100dvh; }
}

/* 2026-08-18 QA micro-adjustment: history summary tint + waiting copy vertical balance */
/* Keep the mint area limited to the month/summary block and ensure the list paints above it. */
.history-page::before {
  height: 240px !important;
}
.history-list {
  position: relative;
  z-index: 1;
}

/* Move the waiting completion copy slightly upward so top/bottom whitespace is balanced. */
.charging-web-page .charging-wait-page .charge-wait-center {
  margin-top: 36px !important;
}


/* 2026-08-18 Figma alignment: signup width, history full-width rows/top zone */
/* Signup fields use the mobile viewport with 16px side margins instead of the old 343px cap. */
.signup-page .app-content {
  padding-left:16px !important;
  padding-right:16px !important;
  box-sizing:border-box;
}
.signup-page #signupForm {
  width:100% !important;
  max-width:none !important;
}

/* History Figma: mint only around month+summary, 32px vertical / 20px horizontal padding. */
.history-page {
  padding-left:0 !important;
  padding-right:0 !important;
  background:#fff !important;
}
.history-page::before { display:none !important; }
.history-top-zone {
  width:100%;
  padding:32px 20px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:24px;
  background:#06C58F1A;
}
.history-top-zone .history-month-row {
  margin:0 !important;
  min-height:20px;
}
.history-top-zone .history-summary-card {
  width:100%;
  height:92px;
  margin:0 !important;
  padding:20px 16px !important;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.history-top-zone .history-summary-card .summary-row {
  line-height:24px !important;
}
.history-list {
  width:100%;
  margin:0 !important;
  padding:0 !important;
  background:#F6F6F9 !important;
}
.history-list .history-item {
  width:100%;
  margin:0 0 8px 0 !important;
  padding:20px 16px !important;
  box-sizing:border-box;
  background:#fff !important;
  border:0 !important;
}
.history-list .history-item:last-child { margin-bottom:0 !important; }

/* =========================================================
   사용자 공지사항
   ========================================================= */
.notice-page,
.notice-detail-page {
  padding-top: 16px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.notice-list {
  overflow: hidden;
  border: 1px solid #eceeef;
  border-radius: 16px;
  background: #fff;
}

.notice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 78px;
  padding: 16px 18px;
  color: #171a1f;
  text-decoration: none;
  border-bottom: 1px solid #f0f1f2;
  box-sizing: border-box;
}

.notice-item:last-child {
  border-bottom: 0;
}

.notice-item:active {
  background: #f7f8f8;
}

.notice-item-main {
  min-width: 0;
  flex: 1;
}

.notice-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.notice-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
}

.notice-pin {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: #e7faf4;
  color: #10a979;
  font-size: 11px;
  font-weight: 800;
  box-sizing: border-box;
}

.notice-date {
  display: block;
  margin-top: 7px;
  color: #999da3;
  font-size: 12px;
}

.notice-arrow {
  flex: 0 0 auto;
  color: #b0b3b8;
  font-size: 24px;
  line-height: 1;
}

.notice-empty {
  margin-top: 14px;
  padding: 52px 20px;
  border: 1px solid #eceeef;
  border-radius: 16px;
  background: #fff;
}

.notice-detail-card {
  border: 1px solid #eceeef;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.notice-detail-head {
  padding: 22px 20px 18px;
  border-bottom: 1px solid #f0f1f2;
}

.notice-detail-head h2 {
  margin: 10px 0 8px;
  color: #171a1f;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 800;
  word-break: keep-all;
}

.notice-detail-head time {
  color: #999da3;
  font-size: 12px;
}

.notice-detail-content {
  padding: 22px 20px 30px;
  color: #34373d;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}


/* =========================================================
   2026-08-23 Login design-only refinement
   - login utility links 16px
   - no "입력중 |" prefix
   - GridX logo 175 x 48
   - collapsible company footer
   ========================================================= */
.login-page .login-logo {
  width: 175px !important;
  height: 48px !important;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.login-page .login-links,
.login-page .login-links a {
  font-size: 16px !important;
}

/* typing prefix is intentionally disabled on the login page */
.login-page .login-typing-state {
  display: none !important;
}
.login-page #loginId,
.login-page #loginId.typing-active {
  padding-left: 16px !important;
}

.login-page .login-home-link,
.login-page > .company-footer {
  display: none !important;
}

.login-company-footer {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  margin-top: auto;
  border-top: 1px solid #eeeeee;
  background: #ffffff;
  color: #777777;
}

.login-company-details {
  width: 100%;
}

.login-company-summary {
  min-height: 52px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 20px;
  color: #777777;
  user-select: none;
}
.login-company-summary::-webkit-details-marker { display: none; }
.login-company-summary::marker { content: ''; }

.login-company-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #8a8a8a;
  border-bottom: 1.5px solid #8a8a8a;
  transform: rotate(45deg) translateY(-2px);
  transform-origin: center;
  flex: 0 0 auto;
  transition: transform .2s ease;
}
.login-company-details[open] .login-company-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.login-company-panel {
  padding: 0 20px 24px;
  text-align: left;
  font-size: 12px;
  line-height: 1.7;
  color: #666666;
}

.login-company-links {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}

.login-company-logo-link {
  display: inline-block;
  margin-bottom: 14px;
}
.login-company-logo {
  display: block;
  width: 70px;
  height: auto;
}

.login-company-info p {
  margin: 2px 0;
  word-break: keep-all;
}
.login-company-info a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Keep the footer at the visual bottom on tall login screens. */
.login-page {
  display: flex;
  flex-direction: column;
}

/* Login footer: screenshot-aligned company information layout */
.login-bottom-gridon-link { display:block; width:fit-content; margin:28px auto 14px; }
.login-bottom-gridon-logo { display:block; width:64px; height:auto; }
.login-company-links { margin-bottom:22px; }
.login-company-name { display:flex; align-items:center; gap:20px; margin-bottom:8px !important; }
.login-company-info p { margin:3px 0; }

/* 2026-08-23 Figma signup vertical rhythm - presentation only */
.signup-page .app-header,
.signup-page .app-header-left,
.signup-page .app-header-right {
  height:56px;
}
.signup-page .app-header-left {
  left:8px;
}
.signup-page .app-content {
  padding-top:20px !important;
}
.signup-page #signupForm {
  gap:0 !important;
}
.signup-page #signupForm > .app-input-wrap + .app-input-wrap {
  margin-top:12px;
}
.signup-page #signupForm > .app-error-box {
  margin-top:12px;
  margin-bottom:0;
}
.signup-page #signupForm > .app-btn {
  margin-top:32px;
  height:56px !important;
  min-height:56px;
}
.signup-page .app-sub-link {
  margin-top:12px;
}

/* =========================================================
   2026-08-23 Figma terms sheet + signup success toast
   Presentation only: no checkbox / navigation / submit behavior changed.
   ========================================================= */
.kakao-terms-sheet {
  width:100%;
  max-width:375px;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  border-radius:22px 22px 0 0;
  box-shadow:none;
}
.kakao-terms-handle { display:none; }
.kakao-terms-close {
  top:12px;
  right:14px;
  width:24px;
  height:24px;
  padding:0;
  font-size:20px;
  line-height:24px;
  color:#222;
}
.kakao-terms-title {
  padding-right:34px;
  margin:0 0 14px;
  font-size:16px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:-0.2px;
}
.kakao-term-all-row,
.kakao-term-row label {
  gap:8px;
}
.kakao-term-all-row {
  min-height:32px;
  font-size:13px;
  line-height:20px;
}
.kakao-terms-divider {
  margin:4px 0;
  background:#ececec;
}
.kakao-term-row {
  min-height:32px;
  font-size:12px;
  line-height:18px;
}
.kakao-smart-term {
  min-height:52px;
}
.kakao-smart-term label {
  align-items:flex-start;
  padding:6px 0;
}
.kakao-smart-term small {
  display:block;
  margin-top:3px;
  font-size:9px;
  line-height:1.35;
  color:#6f7782;
  word-break:keep-all;
}
.kakao-term-check {
  width:14px;
  height:14px;
  flex:0 0 14px;
  border-width:1px;
  margin-top:1px;
}
.kakao-term-all-row input:checked + .kakao-term-check::after,
.kakao-term-row input:checked + .kakao-term-check::after {
  left:3px;
  top:1px;
  width:4px;
  height:7px;
  border-right-width:1.5px;
  border-bottom-width:1.5px;
}
.kakao-term-view {
  min-width:30px;
  height:28px;
  padding:4px 0 4px 8px;
  font-size:10px !important;
  font-weight:500;
  color:#73777d;
}
.kakao-terms-continue {
  height:48px;
  margin-top:10px;
  border-radius:8px;
  font-size:13px;
  font-weight:800;
}

.signup-complete-toast {
  left:50%;
  bottom:calc(60px + env(safe-area-inset-bottom));
  width:calc(100% - 32px);
  max-width:343px;
  height:56px;
  min-height:56px;
  padding:8px 16px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:#3f4247;
  color:#fff;
  text-align:center;
  font-size:12px;
  line-height:18px;
  font-weight:700;
  transform:translate(-50%,20px);
}
.signup-complete-toast strong {
  font-size:12px;
  font-weight:500;
}
.signup-complete-toast.show {
  transform:translate(-50%,0);
}


/* 2026-08-23 Figma: charging waiting/nav + password change presentation */
/* Charging input/waiting: Figma geometry only */
.charging-web-page #stepInput .app-logo-header.login,
.charging-web-page .charge-input-header,
.charging-web-page .charging-page-header {
  height: 56px !important;
  min-height: 56px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box;
}
.charging-web-page .charging-page-header { padding-top:0 !important; padding-bottom:0 !important; }
.charging-web-page .charging-page-header img,
.charging-web-page #stepInput .app-logo-header.login img,
.charging-web-page .charge-header-logo img { width:78px !important; height:auto !important; }
.charging-web-page .charging-page-header a,
.charging-web-page .charge-cs-link { font-size:16px !important; line-height:1 !important; }

.charging-web-page #stepInput.charge-ready-page {
  height: calc(100dvh - 64px - env(safe-area-inset-bottom)) !important;
}
.charging-web-page #stepInput .charge-start-btn {
  width: calc(100% - 32px) !important;
  max-width:343px !important;
  height:56px !important;
  margin: auto auto 24px !important;
  border-radius:10px !important;
}
.charging-web-page + .app-bottom-nav {
  height: calc(64px + env(safe-area-inset-bottom)) !important;
  padding:0 32px env(safe-area-inset-bottom) !important;
  box-sizing:border-box;
}
.charging-web-page + .app-bottom-nav a {
  height:64px !important;
  gap:4px !important;
  font-size:11px !important;
}
.charging-web-page + .app-bottom-nav .icon,
.app-bottom-nav .icon { width:24px !important; height:24px !important; }
.charging-web-page + .app-bottom-nav .icon svg,
.app-bottom-nav .icon svg { width:24px !important; height:24px !important; }

/* Password mask: Figma-like larger round dots while keeping placeholders normal */
.password-field input[type="password"] {
  font-family: Arial, sans-serif;
  font-size:20px !important;
  letter-spacing:1.4px;
  line-height:1;
}
.password-field input[type="password"]::placeholder {
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif;
  font-size:14px;
  letter-spacing:0;
}
.password-field input[type="text"] { font-size:16px !important; letter-spacing:0; }

/* Password complete: 375x812 Figma proportions, centered success group */
.password-complete-page .profile-header {
  height:56px !important;
  min-height:56px !important;
  padding:0 16px !important;
}
.password-complete-center {
  height:calc(100dvh - 56px) !important;
  min-height:0;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
}
.password-complete-group {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:translateY(-8px);
}
.password-complete-center .password-check {
  width:48px !important;
  height:48px !important;
  margin:0 !important;
  border-radius:50%;
  background:#06C58F !important;
  color:transparent !important;
  font-size:0 !important;
  position:relative;
  box-sizing:border-box;
}
.password-complete-center .password-check::after {
  content:"";
  position:absolute;
  left:13px;
  top:12px;
  width:18px;
  height:10px;
  border-left:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:rotate(-45deg);
  border-radius:1px;
}
.password-complete-center p {
  margin:16px 0 0 !important;
  font-size:12px !important;
  line-height:1.4;
  color:#222 !important;
}

/* =========================================================
   2026-08-23 Figma QA: charging error / history / month sheet
   Design-only overrides. Keep charging/payment/OCPP behavior untouched.
   ========================================================= */

/* Invalid charger-code helper: 12px -> 14px */
.charger-helper {
  font-size: 14px !important;
  line-height: 20px !important;
}

/* History: compact Figma geometry. Header remains untouched. */
.history-top-zone {
  padding: 16px 20px 8px !important;
  gap: 8px !important;
  background: rgba(6, 197, 143, 0.10) !important;
}
.history-top-zone .history-month-row {
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  justify-content: center !important;
  gap: 12px !important;
}
.history-month-row .month-arrow {
  width: 24px !important;
  min-width: 24px !important;
  height: 32px !important;
  font-size: 24px !important;
  line-height: 32px !important;
}
.history-month-row .month-title-btn {
  min-width: 44px !important;
  height: 32px !important;
  padding: 0 4px !important;
  font-size: 16px !important;
  line-height: 32px !important;
  font-weight: 700 !important;
}
.history-top-zone .history-summary-card {
  height: 80px !important;
  padding: 16px !important;
  border-radius: 12px !important;
  gap: 8px !important;
}
.history-top-zone .history-summary-card .summary-row {
  min-height: 16px !important;
  line-height: 16px !important;
  font-size: 14px !important;
}
.history-top-zone .history-summary-card .summary-row strong {
  font-size: 14px !important;
}

/* Each history row uses the full viewport width; internal geometry follows Figma 16px. */
.history-list {
  width: 100% !important;
  background: #F6F6F9 !important;
}
.history-list .history-item {
  min-height: 96px !important;
  padding: 16px !important;
  margin: 0 0 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
}
.history-list .history-date {
  margin: 0 0 16px !important;
  font-size: 14px !important;
  line-height: 16px !important;
}
.history-list .history-info-row {
  min-height: 16px !important;
  margin: 0 !important;
  line-height: 16px !important;
  font-size: 14px !important;
}
.history-list .history-info-row + .history-info-row {
  margin-top: 8px !important;
}
.history-list .history-label,
.history-list .history-value {
  font-size: 14px !important;
  line-height: 16px !important;
}

/* Empty history state: same shell as history screen, centered in the remaining area. */
.history-list.is-empty {
  background: #fff !important;
}
.empty-history {
  min-height: calc(100dvh - 56px - 136px - var(--app-bottom-nav-height));
  padding: 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  box-sizing: border-box;
  color: #9A9A9A !important;
}
.empty-history-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C7C7CC;
}
.empty-history-icon svg { width: 48px; height: 48px; }
.empty-history-title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #8E8E93;
}

/* Month picker: 375px design uses 8px side insets => 359px grid / 4 = 89.75px cells. */
.month-sheet {
  padding: 14px 8px calc(18px + env(safe-area-inset-bottom)) !important;
  border-radius: 26px 26px 0 0 !important;
  box-sizing: border-box !important;
}
.month-sheet-handle {
  width: 44px !important;
  height: 4px !important;
  margin: 0 auto 18px !important;
}
.month-sheet-year-row {
  min-height: 36px !important;
  margin: 0 0 8px !important;
  gap: 8px !important;
}
.month-sheet-year-row .month-sheet-title {
  min-width: 76px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
}
.month-year-arrow {
  width: 32px !important;
  height: 32px !important;
  font-size: 24px !important;
  line-height: 32px !important;
}
.month-grid {
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 0 !important;
  row-gap: 2px !important;
}
.month-grid a {
  width: 100% !important;
  height: 48px !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  line-height: 48px !important;
  font-weight: 500 !important;
  color: #333 !important;
}
.month-grid a.active {
  width: 54px !important;
  height: 40px !important;
  line-height: 40px !important;
  margin: 4px auto !important;
  border-radius: 999px !important;
  background: #06C58F !important;
  color: #fff !important;
}
\n\n/* 2026-08-23 Figma: logout completion modal (UI only) */\n.logout-complete-dim {\n  position: fixed;\n  inset: 0;\n  z-index: 5000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  box-sizing: border-box;\n  background: rgba(0, 0, 0, 0.52);\n}\n.logout-complete-dim.app-hidden { display: none !important; }\n.logout-complete-box {\n  width: min(100%, 288px);\n  padding: 24px 16px 16px;\n  box-sizing: border-box;\n  border-radius: 12px;\n  background: #fff;\n  text-align: center;\n  box-shadow: 0 6px 20px rgba(0,0,0,0.12);\n}\n.logout-complete-box p {\n  margin: 0 0 20px;\n  color: #555;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.55;\n}\n.logout-complete-confirm {\n  width: 100%;\n  height: 48px;\n  border: 0;\n  border-radius: 8px;\n  background: #06C58F;\n  color: #fff;\n  font-size: 14px;\n  font-weight: 700;\n  cursor: pointer;\n}\n

/* ===== Figma 10% three-blob background: charger ID input screen ONLY ===== */
.charging-web-page #stepInput {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.charging-web-page #stepInput .app-bg-blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.charging-web-page #stepInput .app-bg-blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(20px);
  -webkit-filter: blur(20px);
  transform: translateZ(0);
}

.charging-web-page #stepInput .app-bg-blob--mint {
  width: 432px;
  height: 432px;
  top: -215px;
  left: -185px;
  background: rgba(32, 233, 216, 0.10);
}

.charging-web-page #stepInput .app-bg-blob--blue {
  width: 385px;
  height: 385px;
  top: 105px;
  left: 72px;
  background: rgba(59, 127, 253, 0.10);
}

.charging-web-page #stepInput .app-bg-blob--sky {
  width: 308px;
  height: 308px;
  top: 395px;
  left: -55px;
  background: rgba(85, 178, 255, 0.10);
}

.charging-web-page #stepInput > :not(.app-bg-blobs) {
  position: relative;
  z-index: 1;
}


/* 2026-08-23 Figma alignment: charging input / history / profile common chrome */
:root { --gridx-common-bottom-nav-height: 68px; }

/* Bottom navigation: same dimensions and spacing on all three screens */
.app-bottom-nav,
.charging-web-page + .app-bottom-nav {
  height: calc(var(--gridx-common-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  padding: 0 0 env(safe-area-inset-bottom) !important;
}
.app-bottom-nav a,
.app-bottom-nav button,
.charging-web-page + .app-bottom-nav a {
  height: var(--gridx-common-bottom-nav-height) !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}
.app-bottom-nav .icon,
.charging-web-page + .app-bottom-nav .icon {
  width: 24px !important;
  height: 24px !important;
  font-size: 20px !important;
  line-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.app-bottom-nav .icon svg,
.charging-web-page + .app-bottom-nav .icon svg {
  width: 24px !important;
  height: 24px !important;
  display: block;
}

/* History header uses the exact charging-input logo geometry */
.history-page + .app-bottom-nav { height: calc(var(--gridx-common-bottom-nav-height) + env(safe-area-inset-bottom)) !important; }
body:has(.history-page) .app-logo-header {
  height: 78px !important;
  padding: env(safe-area-inset-top) 16px 0 !important;
  box-sizing: border-box;
}
body:has(.history-page) .app-logo-header img {
  width: 78px !important;
  height: auto !important;
}

/* Customer-center typography is identical on charging input and history */
.charging-web-page #stepInput .charge-cs-link,
body:has(.history-page) .app-logo-header .logout {
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #555555 !important;
}

/* Profile header: logout occupies the same right-side position/typography */
.profile-header {
  height: 78px !important;
  box-sizing: border-box;
  padding: env(safe-area-inset-top) 16px 0 !important;
  grid-template-columns: 72px 1fr 72px !important;
}
.profile-logout {
  justify-self: end;
  text-align: right !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #555555 !important;
}


/* 2026-08-23 로그인 간편로그인 링크 영역 */
.simple-login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 14px;
  color: #9ca3af;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.simple-login-divider .simple-login-line {
  height: 1px;
  background: #e5e7eb;
  flex: 1;
}


/* 2026-08-23 login logo / simple login fold / logout modal reliability */
.login-page .login-logo {
  width: 175px !important;
  height: 48px !important;
  object-fit: fill !important;
}

.simple-login-divider {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  justify-content: center;
}
.simple-login-divider .simple-login-label {
  flex: 0 0 auto;
}
.simple-login-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
  flex: 0 0 auto;
  margin-left: -4px;
}
.simple-login-divider.open .simple-login-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}
.simple-login-panel[hidden] {
  display: none !important;
}
.simple-login-panel {
  width: 100%;
}
.simple-login-panel .kakao-login-btn {
  margin-top: 12px;
}

button.profile-logout {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.logout-complete-dim:not(.app-hidden) {
  display: flex !important;
}

/* 2026-08-23 Figma login spacing: visual-only */
.login-page {
  padding-top: 0 !important;
}
.login-page .login-logo {
  width: 175px !important;
  height: 48px !important;
  margin-top: 120px !important;
  margin-bottom: 32px !important;
  flex: 0 0 auto;
}
/* .app-form has an 8px flex gap; 24px margin + 8px gap = 32px
   from the password field bottom to the login button top. */
.login-page .login-form:first-of-type .login-btn {
  margin-top: 24px !important;
}


/* 2026-08-23 Figma login action spacing + footer text cleanup */
/* Empty validation box must not consume the 20px password-to-button spacing. */
.login-page .login-error-under-password:empty { display:none !important; }
/* app-form gap is 8px, so 12px margin + 8px gap = 20px. */
.login-page .login-form:first-of-type .login-btn { margin-top:12px !important; }
/* Login button bottom -> account links = 10px. */
.login-page .login-links { margin-top:10px !important; }
/* Account links -> simple-login area = 20px. */
.login-page .simple-login-divider { margin-top:20px !important; }


/* =========================================================
   2026-08-24 Figma signup header/back + terms check visuals
   UI only: agreement logic / navigation behavior unchanged.
   ========================================================= */

/* Signup title: Figma scale */
.signup-page .app-header-title {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
}

/* Common back button geometry: 24x24 at 24px from the left. */
.signup-page .app-header-left,
body:has(.terms-page) .app-header-left {
  left: 24px !important;
}
.signup-page .app-icon-btn,
body:has(.terms-page) .app-icon-btn,
.app-detail-back,
.profile-back {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  font-size: 28px !important;
  line-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.app-detail-back {
  left: 24px !important;
}
.profile-header {
  padding-left: 24px !important;
}

/* Terms: unchecked ALL = gray circle + white check; checked = green circle. */
.kakao-term-all-row .kakao-term-check {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #D1D5D9 !important;
  position: relative !important;
}
.kakao-term-all-row .kakao-term-check::after {
  content: '' !important;
  position: absolute !important;
  left: 4px !important;
  top: 2px !important;
  width: 4px !important;
  height: 7px !important;
  border-right: 1.5px solid #fff !important;
  border-bottom: 1.5px solid #fff !important;
  transform: rotate(45deg) !important;
}
.kakao-term-all-row input:checked + .kakao-term-check {
  background: #06C58F !important;
}

/* Terms: individual rows = gray bare check; checked = green bare check. */
.kakao-term-row .kakao-term-check {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  position: relative !important;
}
.kakao-term-row .kakao-term-check::after {
  content: '' !important;
  position: absolute !important;
  left: 4px !important;
  top: 2px !important;
  width: 4px !important;
  height: 7px !important;
  border-right: 1.5px solid #B8BDC5 !important;
  border-bottom: 1.5px solid #B8BDC5 !important;
  transform: rotate(45deg) !important;
}
.kakao-term-row input:checked + .kakao-term-check {
  background: transparent !important;
}
.kakao-term-row input:checked + .kakao-term-check::after {
  border-right-color: #06C58F !important;
  border-bottom-color: #06C58F !important;
}

/* Smart/DR row is now one line; keep row height consistent with other terms. */
.kakao-smart-term {
  min-height: 32px !important;
}
.kakao-smart-term label {
  align-items: center !important;
  padding: 0 !important;
}

/* 2026-08-24 Figma: signup-complete toast + charger input blob placement */
.signup-complete-toast {
  width: calc(100% - 32px) !important;
  max-width: 375px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 8px 16px !important;
  border-radius: 22px !important;
  bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
}

/* Figma shows the three blurred circles extending outside the viewport.
   Keep the circles themselves at the design sizes and crop them in #stepInput. */
.charging-web-page #stepInput .app-bg-blob--mint {
  width: 432px !important;
  height: 432px !important;
  top: 20px !important;
  left: 84px !important;
  background: rgba(32, 233, 216, 0.10) !important;
}

.charging-web-page #stepInput .app-bg-blob--blue {
  width: 385px !important;
  height: 385px !important;
  top: 150px !important;
  left: -155px !important;
  background: rgba(59, 127, 253, 0.10) !important;
}

.charging-web-page #stepInput .app-bg-blob--sky {
  width: 308px !important;
  height: 308px !important;
  top: 410px !important;
  left: 120px !important;
  background: rgba(85, 178, 255, 0.10) !important;
}


/* 2026-08-24: profile logout tap reliability */
.profile-header {
  position: relative !important;
  z-index: 300 !important;
  pointer-events: auto !important;
}
.profile-header .profile-logout {
  position: relative !important;
  z-index: 302 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 72px !important;
  height: 56px !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.logout-complete-confirm {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
}


/* 2026-08-24 signup completion toast: force exactly two centered lines */
.signup-complete-toast {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  white-space: normal !important;
  line-height: 1 !important;
}
.signup-complete-toast .signup-complete-line {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
}
.signup-complete-toast .signup-complete-line--strong {
  font-weight: 700 !important;
}

/* 2026-08-24 profile logout: native button hit area + modal confirm button */
.profile-header #profileLogoutBtn {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
#logoutCompleteConfirm {
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* 2026-08-24 profile logout: keep tap target above all profile content */
.profile-header #profileLogoutBtn {
  position: absolute !important;
  top: env(safe-area-inset-top) !important;
  right: 16px !important;
  width: 80px !important;
  min-width: 80px !important;
  height: 56px !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: auto !important;
}

/* =========================================================
   2026-08-24 header alignment + native POST logout
   Charging / history headers share one 56px geometry.
   Profile logout uses the same right typography/position as 고객센터.
   ========================================================= */
.charging-web-page .charge-input-header,
body:has(.history-page) .app-logo-header {
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #fff !important;
}

.charging-web-page .charge-header-logo,
body:has(.history-page) .app-logo-header > a:first-child,
body:has(.history-page) .app-logo-header > img:first-child {
  display: flex !important;
  align-items: center !important;
}

.charging-web-page .charge-header-logo img,
body:has(.history-page) .app-logo-header img {
  width: 78px !important;
  height: auto !important;
  display: block !important;
}

.charging-web-page .charge-cs-link,
body:has(.history-page) .app-logo-header .logout {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #555 !important;
  text-decoration: none !important;
}

.profile-header {
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px 0 24px !important;
  box-sizing: border-box !important;
  grid-template-columns: 72px 1fr 72px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 300 !important;
}
.profile-logout-form {
  width: 72px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
.profile-header .profile-logout {
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  font: inherit !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #555 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* POST logout success is rendered on the login page, without click-handler dependency. */
.logout-result-dim {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(0,0,0,.48);
}
.logout-result-box {
  width: min(343px, calc(100vw - 48px));
  padding: 24px 16px 16px;
  border-radius: 16px;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
}
.logout-result-box p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
.logout-result-confirm {
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06C58F;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* 2026-08-24 vehicle profile detail editor */
.vehicle-summary-group {
  max-width: 68%;
}
.vehicle-summary {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vehicle-summary > span:empty {
  display: none;
}
.vehicle-edit-form {
  gap: 12px;
}
.vehicle-edit-form .profile-edit-field {
  flex: 0 0 auto;
}
.vehicle-edit-form .password-error {
  min-height: 18px;
  margin: 0;
}

/* =========================================================
   2026-08-25 NICE 휴대폰 본인인증 / 계정찾기 (Web)
   ========================================================= */
.nice-phone-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 8px;
  align-items: center;
}
.nice-phone-row .app-input { min-width: 0; }
.nice-auth-btn {
  height: 56px;
  border: 1px solid #e6e7eb;
  border-radius: 12px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}
.nice-auth-btn:active { background: #f7f8f9; }
.nice-verified-msg {
  margin: 7px 2px 0;
  color: #08c99b;
  font-size: 12px;
  line-height: 1.4;
}
.nice-verified-msg.hidden { display: none; }

.recovery-page .app-header-title,
.recovery-page .app-header-left,
.recovery-page .app-header-right { height: 56px; }
.recovery-page .app-header-title { font-size: 16px; font-weight: 700; }
.recovery-content {
  width: calc(100% - 32px);
  max-width: 343px;
  margin: 18px auto 0;
  box-sizing: border-box;
}
.recovery-guide {
  margin: 0 0 18px;
  color: #666b73;
  font-size: 13px;
  line-height: 1.55;
}
.recovery-content .app-input { height: 56px; border-radius: 12px; box-sizing: border-box; }
.recovery-primary { height: 56px; border-radius: 12px; margin-top: 12px; }
.recovery-error {
  min-height: 18px;
  margin: 7px 2px 0;
  color: #e85d5d;
  font-size: 12px;
  line-height: 1.45;
}
.recovery-result {
  padding-top: 84px;
  text-align: center;
}
.recovery-result-label { color: #777b82; font-size: 13px; margin-bottom: 9px; }
.recovery-result > strong { display: block; color: #111; font-size: 20px; font-weight: 700; letter-spacing: .2px; }
.recovery-login-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: 56px;
  margin-top: 36px;
  border-radius: 12px;
  box-sizing: border-box;
}
.recovery-password-wrap { position: relative; }
.recovery-password-wrap .app-input { padding-right: 52px; }
.recovery-check {
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #08c99b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
}

.phone-change-form {
  min-height: calc(100vh - 64px);
  padding: 14px 18px max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.phone-current-field,
.phone-change-auth-row input,
.phone-verify-state {
  width: 100%;
  height: 48px;
  border: 1px solid #e2e3e7;
  border-radius: 10px;
  padding: 0 14px;
  box-sizing: border-box;
  font-size: 14px;
}
.phone-current-field {
  display: flex;
  align-items: center;
  background: #f4f4f7;
  color: #b7b9bf;
  margin-bottom: 8px;
}
.phone-change-auth-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 8px;
  margin-bottom: 8px;
}
.phone-change-auth-row input { outline: none; background: #fff; color: #111; }
.phone-change-auth-row button {
  border: 1px solid #e2e3e7;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 600;
}
.phone-change-auth-row button:disabled { color: #b8bbc1; background: #f5f5f7; }
.phone-verify-state { background: #fff; color: #111; outline: none; }
.phone-verify-state::placeholder { color: #c0c2c7; }
.phone-change-form .profile-edit-submit { margin-top: auto; }

/* Login footer policy links: Figma final adjustment */
.login-page .login-company-links a {
  font-size: 14px !important;
  font-weight: 400 !important;
}



/* =========================================================
   2026-08-29 PROD FIGMA MORE MERGE
   NICE existing CSS preserved above
   ========================================================= */

/* =========================================================
   My vehicle information change - Figma final
   ========================================================= */

.vehicle-edit-page {
  background: #FFFFFF !important;
}

.vehicle-edit-page .vehicle-edit-form {
  width: 100% !important;
  height: calc(100dvh - 56px) !important;
  padding: 20px 16px 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.vehicle-edit-page .vehicle-current-fields,
.vehicle-edit-page .vehicle-new-fields {
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.vehicle-edit-page .vehicle-new-fields {
  margin-top: 12px !important;
}

.vehicle-edit-page .vehicle-current-field,
.vehicle-edit-page .profile-edit-field {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

.vehicle-edit-page .vehicle-current-field {
  display: flex !important;
  align-items: center !important;

  padding: 0 16px !important;

  background: #F6F6F9 !important;
  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #454545 !important;
}

.vehicle-edit-page .profile-edit-field input {
  width: 100% !important;
  height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  box-sizing: border-box !important;

  background: #FFFFFF !important;
  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  outline: none !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #151515 !important;
}

.vehicle-edit-page .profile-edit-field input::placeholder {
  color: #888888 !important;
  opacity: 1 !important;
}

.vehicle-edit-page #vehicleEditMsg {
  margin: 8px 0 0 !important;
  min-height: 17px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #FF4242 !important;
}

.vehicle-edit-page #vehicleEditBtn {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: auto 0 0 !important;
  padding: 0 16px !important;

  border: 0 !important;
  border-radius: 12px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #FFFFFF !important;
}

.vehicle-edit-page #vehicleEditBtn:disabled {
  background: #D1D1D5 !important;
}

.vehicle-edit-page #vehicleEditBtn:not(:disabled) {
  background: #06C58F !important;
}

/* =========================================================
   Email change - Figma final
   ========================================================= */

.email-edit-page {
  background: #FFFFFF !important;
}

.email-edit-page .email-edit-form {
  width: 100% !important;
  height: calc(100dvh - 56px) !important;
  padding: 20px 16px 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.email-edit-page .email-current-field,
.email-edit-page .email-new-field {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
}

.email-edit-page .email-current-field {
  display: flex !important;
  align-items: center !important;

  padding: 0 16px !important;

  background: #F6F6F9 !important;
  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #454545 !important;
}

.email-edit-page .email-new-field {
  margin-top: 12px !important;
}

.email-edit-page #emailChangeInput {
  width: 100% !important;
  height: 56px !important;

  padding: 0 16px !important;
  margin: 0 !important;

  box-sizing: border-box !important;

  background: #FFFFFF !important;
  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;
  outline: none !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #151515 !important;
}

.email-edit-page #emailChangeInput::placeholder {
  color: #888888 !important;
  opacity: 1 !important;
}

.email-edit-page #emailChangeInput.is-error {
  border-color: #FF4242 !important;
}

.email-edit-page .email-domain-suggestions {
  width: calc(100% + 16px) !important;

  margin-top: 20px !important;

  display: flex !important;
  gap: 12px !important;

  overflow-x: auto !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
}

.email-edit-page .email-domain-suggestions::-webkit-scrollbar {
  display: none !important;
}

.email-edit-page .email-domain-suggestions.app-hidden {
  display: none !important;
}

.email-edit-page .email-domain-suggestions button {
  flex: 0 0 auto !important;

  height: 28px !important;
  padding: 0 8px !important;

  border: 0 !important;
  border-radius: 8px !important;

  background: #F6F6F9 !important;
  color: #151515 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.26px !important;
}

.email-edit-page .email-change-error {
  min-height: 17px !important;
  margin: 8px 0 0 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.24px !important;

  color: #FF4242 !important;
}

.email-edit-page #emailChangeBtn {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: auto 0 0 !important;
  padding: 0 16px !important;

  border: 0 !important;
  border-radius: 12px !important;

  color: #FFFFFF !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}

.email-edit-page #emailChangeBtn:disabled {
  background: #D1D1D5 !important;
}

.email-edit-page #emailChangeBtn:not(:disabled) {
  background: #06C58F !important;
}



/* =========================================================
   My info main / detail - Figma structure
   ========================================================= */

/* 메인 최상단 : 아이디 test9 / 내 정보 > */
.profile-main-entry {
  width: 100%;
  height: 56px;

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

  padding: 0 16px;
  box-sizing: border-box;

  background: #FFFFFF;
  cursor: pointer;
}

.profile-main-id,
.profile-main-link {
  display: flex;
  align-items: center;
}

.profile-main-id {
  gap: 8px;
}

.profile-main-id span,
.profile-main-id strong,
.profile-main-link span {
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.32px;
  color: #151515;
}

.profile-main-id span {
  font-weight: 400;
}

.profile-main-id strong {
  font-weight: 600;
}

.profile-main-link {
  gap: 6px;
}

.profile-main-link > span:first-child {
  font-weight: 600;
}

.profile-main-arrow {
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: #888888 !important;
}


/* 상세 전체 */
.profile-detail-page {
  position: fixed;
  inset: 0;

  z-index: 1900;

  background: #FFFFFF;

  overflow-y: auto;
  overscroll-behavior: contain;
}

.profile-detail-content {
  min-height: calc(100dvh - 56px);

  padding: 8px 16px max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}


/* 각 정보 = 라벨 한 줄 + 값 한 줄 */
.profile-detail-row {
  width: 100%;

  padding: 14px 0 16px;
  box-sizing: border-box;
}

.profile-detail-label {
  margin-bottom: 8px;

  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.28px;

  color: #888888;
}

.profile-detail-line {
  width: 100%;
  min-height: 28px;

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

  gap: 12px;
}

.profile-detail-value {
  min-width: 0;

  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.32px;

  color: #151515;

  word-break: break-word;
}

.profile-detail-line > .profile-detail-value {
  flex: 1 1 auto;
}


/* 차량 한 줄 */
.profile-detail-page .vehicle-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}


/* 기존 변경 버튼 위치/형태 유지 */
.profile-detail-page .more-edit-btn {
  flex: 0 0 auto;
}


/* 로그아웃 = 상세 최하단 한 행 */
.profile-detail-logout-form {
  width: 100%;

  margin-top: auto;
  padding-top: 28px;
}

.profile-detail-logout {
  width: 100%;
  min-height: 56px;

  display: flex;
  align-items: center;

  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;

  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.32px;

  color: #454545;
  text-align: left;

  cursor: pointer;
}


/* =========================================================
   My info small alignment fix
   ========================================================= */

/* 1. 상세 - 차종 값을 다른 정보처럼 왼쪽에서 시작 */
.profile-detail-page .vehicle-summary {
  justify-content: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* =========================================================
   My info main entry - plain row final
   ========================================================= */

/* 2. 메인 - 내 정보 진입 영역을 카드/버튼처럼 보이지 않게 */
.profile-main-entry {
  width: 100% !important;
  height: 56px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 0 16px !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  background: transparent !important;
}


/* 오른쪽 '내 정보 >' */
.profile-main-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* > 영역 20 x 20 */
.profile-main-arrow {
  width: 20px !important;
  height: 20px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 20px !important;

  padding: 0 !important;
  margin: 0 !important;

  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 20px !important;

  color: #454545 !important;
}



/* =========================================================
   More main - flat Figma style final
   ========================================================= */

/* 상단 실제 로그인 아이디만 크게 */
.profile-main-login-id {
  font-family: Pretendard, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.4px !important;
  color: #151515 !important;
}


/* 상단 내 정보 행 */
.profile-main-entry {
  min-height: 72px !important;
  height: 72px !important;

  padding: 0 32px !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  background: #FFFFFF !important;
}


/* 메뉴 전체 영역 */
.more-page {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* 기존 네모 카드 제거 */
.more-page .more-menu {
  width: 100% !important;
  min-height: 74px !important;
  height: 74px !important;

  margin: 0 !important;
  padding: 0 32px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  background: #FFFFFF !important;
}


/* 메뉴 사이 얇은 구분선 */
.more-page .more-menu + .more-menu {
  border-top: 1px solid #F1F1F1 !important;
}


/* 메뉴 글자 */
.more-page .more-menu > span:first-child {
  font-family: Pretendard, sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.34px !important;
  color: #454545 !important;
}


/* 오른쪽 화살표 */
.more-page .more-menu > span:last-child {
  width: 20px !important;
  height: 20px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 20px !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 28px !important;
  font-weight: 300 !important;
  line-height: 20px !important;

  color: #555555 !important;
}


/* 상단 내 정보 */
.profile-main-link > span:first-child {
  font-size: 16px !important;
  font-weight: 500 !important;
}


/* 상단 화살표 */
.profile-main-arrow {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;

  font-size: 24px !important;
  line-height: 20px !important;

  color: #454545 !important;
}

/* ===== GRIDX FULL FIGMA FINAL OVERRIDES ===== */
/* =========================================================
   2026-08-28 FIGMA 234:8856 LOGIN FINAL
   Presentation only - login/kakao/auth logic untouched
   ========================================================= */

.login-page {
  box-sizing: border-box !important;
  min-height: 100dvh !important;
  padding: 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
}

/* GridX logo: Figma 175 x 48 */
.login-page .login-logo {
  width: 175px !important;
  height: 48px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 120px auto 32px !important;
  flex: 0 0 auto !important;
}

/* Form width */
.login-page .login-form {
  width: 100% !important;
  max-width: 343px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ID / Password: 343 x 56, radius 12 */
.login-page .app-input-wrap {
  width: 100% !important;
}

.login-page .app-input {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 56px !important;
  padding-left: 16px !important;
  border: 1px solid #e5e5e8 !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #151515 !important;
}

.login-page .app-input::placeholder {
  color: #888 !important;
  opacity: 1 !important;
}

/* Password eye */
.login-page .login-password-wrap {
  position: relative !important;
}

.login-page .login-eye-btn {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
}

/*
 * Figma annotation:
 * password field bottom -> login button top = 52px.
 * .app-form itself has 8px gap, therefore 44px margin.
 */
.login-page .login-error-under-password:empty {
  display: none !important;
}

.login-page .login-form:first-of-type .login-btn {
  box-sizing: border-box !important;
  width: 343px !important;
  height: 56px !important;
  margin-top: 44px !important;
  border-radius: 12px !important;
  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}

/* Disabled login button */
.login-page .login-btn:disabled {
  background: #d1d1d5 !important;
  color: #fff !important;
}

/* Kakao sits immediately below login: 10px */
.login-page .login-kakao-form {
  margin-top: 10px !important;
}

/* Old "간편 로그인" folding UI is no longer used */
.login-page .simple-login-divider,
.login-page .simple-login-panel {
  display: none !important;
}

/* Kakao: 343 x 56 */
.login-page .kakao-login-btn {
  box-sizing: border-box !important;
  display: block !important;
  width: 343px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fee500 !important;
  cursor: pointer !important;
}

.login-page .kakao-login-btn img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 0 !important;
}

/* Kakao -> account links = 16px */
.login-page .login-links {
  margin-top: 16px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #888 !important;
}

.login-page .login-links a,
.login-page .login-links span {
  color: #888 !important;
}

/* Footer: Figma 58px */
.login-company-footer {
  box-sizing: border-box !important;
  width: calc(100% + 32px) !important;
  margin-left: -16px !important;
  margin-right: -16px !important;
  margin-top: auto !important;
  border-top: 1px solid #f6f6f9 !important;
  background: #fff !important;
}

.login-company-summary {
  box-sizing: border-box !important;
  min-height: 58px !important;
  padding: 19px 16px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.39px !important;
  color: #888 !important;
}


/* 2026-08-28 Figma 234:8856 measured spacing correction */
.login-page .login-form:first-of-type .login-btn {
  margin-top: 12px !important;
}


/* Figma login horizontal alignment fix */
.login-page .login-form:first-of-type .login-btn,
.login-page .kakao-login-btn {
  width: 100% !important;
  max-width: 343px !important;
}


.login-page .login-form {
  width: 100% !important;
  max-width: 343px !important;
  box-sizing: border-box !important;
}


/* Figma 234:8856 exact measured spacing */
.login-page .login-form:first-of-type .login-btn {
  margin-top: 44px !important; /* 8px form gap + 44px = 52px */
}


/* =========================================================
   Figma 234:8856 Kakao login button
   No image button - pure HTML/CSS
   ========================================================= */

.login-page .kakao-login-btn {
  width: 100% !important;
  max-width: 343px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  border: 0 !important;
  border-radius: 12px !important;
  background: #fee500 !important;

  font-family: Pretendard, sans-serif !important;
  cursor: pointer !important;
}

/* Kakao speech bubble */
.login-page .kakao-symbol {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 17px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.85);
}

.login-page .kakao-symbol::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: -2px;

  width: 7px;
  height: 5px;

  background: rgba(0, 0, 0, 0.85);

  transform: skewX(-28deg) rotate(-12deg);
  transform-origin: top left;

  border-radius: 0 0 1px 4px;
}

.login-page .kakao-login-text {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  letter-spacing: -0.32px !important;
  color: rgba(0, 0, 0, 0.85) !important;
}


/* =========================================================
   Figma login footer refinement
   ========================================================= */

/* 펼침 영역 전체 */
.login-page .login-company-panel {
  padding: 0 16px 24px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #454545 !important;
  font-weight: 400 !important;
}

/* 이용약관 / 개인정보처리방침 */
.login-page .login-company-links {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin-bottom: 8px !important;
}

.login-page .login-company-links a {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #454545 !important;
  text-decoration: none !important;
}

/* 회사정보 전체 13px */
.login-page .login-company-info,
.login-page .login-company-info p,
.login-page .login-company-info a {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #454545 !important;
  font-weight: 400 !important;
}

/* 회사명 + 대표자만 강조 */
.login-page .login-company-name strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #454545 !important;
}

/* 회사명/대표자 아래 간격 */
.login-page .login-company-name {
  margin-bottom: 8px !important;
}

/* 이메일/전화 링크도 색상 통일 */
.login-page .login-company-info a {
  color: #454545 !important;
  text-underline-offset: 2px !important;
}


/* =========================================================
   Pretendard local webfont
   Local assets only - no external CDN dependency
   ========================================================= */

@font-face {
  font-family: "Pretendard";
  src: url("/css/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("/css/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("/css/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* GridX user web common font */
html,
body,
button,
input,
textarea,
select {
  font-family: "Pretendard", sans-serif !important;
}

/* Login/footer inherit Pretendard consistently */
.login-page,
.login-page *,
.login-company-footer,
.login-company-footer * {
  font-family: "Pretendard", sans-serif !important;
}


/* Login footer policy links: Figma final adjustment */
.login-page .login-company-links a {
  font-size: 14px !important;
  font-weight: 400 !important;
}


/* Password eye-off icon: uploaded PNG */
.eye-icon.eye-closed {
  background-image: url("/css/ico_eye_off.png") !important;
  background-size: 24px 24px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}


/* Password eye-off icon: Figma SVG final */
.eye-icon.eye-closed {
  background-image: url("/css/ico_eye.svg") !important;
  background-size: 24px 24px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}


/* Password eye-off icon: inline SVG final */
.eye-icon.eye-closed {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_251_9125)'%3E%3Cpath d='M18.1519 14.7383C18.93 13.9546 19.5561 13.0266 19.9898 12C19.3314 10.4418 18.2322 9.10863 16.8257 8.16699C15.3983 7.21159 13.7182 6.70129 12.0005 6.70117C11.4228 6.70117 10.8496 6.76107 10.2886 6.87402L8.65484 5.24023C9.72863 4.8858 10.8576 4.70117 12.0005 4.70117C14.1143 4.70129 16.1814 5.32917 17.938 6.50488C19.6944 7.68064 21.0628 9.35175 21.8687 11.3057C21.8731 11.3164 21.8774 11.328 21.8814 11.3389C22.0395 11.7652 22.0396 12.2348 21.8814 12.6611C21.8773 12.6721 21.8731 12.6835 21.8687 12.6943C21.333 13.9932 20.5483 15.1667 19.5669 16.1533L18.1519 14.7383ZM12.0005 19.2998C9.88679 19.2998 7.81973 18.6717 6.06304 17.4961C4.30642 16.3204 2.93839 14.6484 2.13238 12.6943C2.12796 12.6836 2.12372 12.672 2.11968 12.6611C1.96143 12.2347 1.96145 11.7653 2.11968 11.3389C2.12375 11.3279 2.12793 11.3165 2.13238 11.3057C2.93835 9.35154 4.30641 7.68065 6.06304 6.50488C6.27035 6.36614 6.4823 6.23566 6.69781 6.1123L8.17632 7.59082C7.83163 7.76012 7.49691 7.95179 7.17535 8.16699C5.76846 9.10871 4.66875 10.4415 4.01031 12C4.66878 13.5586 5.76837 14.8923 7.17535 15.834C8.60288 16.7892 10.2829 17.2998 12.0005 17.2998C13.6202 17.2997 15.2062 16.8459 16.5787 15.9932L18.023 17.4375C17.9946 17.4569 17.9666 17.477 17.938 17.4961C16.1814 18.6718 14.1143 19.2997 12.0005 19.2998ZM11.7261 8.31152C11.8166 8.30489 11.9083 8.30078 12.0005 8.30078C14.0435 8.30121 15.6998 9.95786 15.6998 12.001C15.6997 12.093 15.6956 12.1841 15.689 12.2744L11.7261 8.31152ZM12.0005 15.7002C9.95753 15.7002 8.30092 14.0439 8.30035 12.001C8.30035 10.8299 8.84567 9.78741 9.69488 9.10937L11.1294 10.5439C10.6337 10.841 10.3003 11.3811 10.3003 12.001C10.3009 12.9393 11.0621 13.7002 12.0005 13.7002C12.6199 13.6999 13.1607 13.3673 13.4576 12.8721L14.8921 14.3066C14.2144 15.1554 13.1712 15.7 12.0005 15.7002Z' fill='%23B0B0B3'/%3E%3Cpath d='M3.75 4.25L19.3063 19.8063' stroke='%23B0B0B3' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_251_9125'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
  background-size: 24px 24px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}


/* Bottom nav Figma icon assets */
.app-bottom-nav .icon {
  width: 24px !important;
  height: 24px !important;
}

.app-bottom-nav .icon img {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}


/* =========================================================
   Charger input screen - Figma 160:6965 final geometry
   ========================================================= */

/* Header: 375 x 56 / horizontal 16 */
.charging-web-page #stepInput .charge-input-header {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-bottom: 0.5px solid rgba(246, 246, 249, 0.7) !important;
}

/* Header logo */
.charging-web-page #stepInput .charge-header-logo {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.charging-web-page #stepInput .charge-header-logo img {
  display: block !important;
  width: 88px !important;
  height: auto !important;
}

/* 고객센터 */
.charging-web-page #stepInput .charge-cs-link {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #454545 !important;
}

/* Title */
.charging-web-page #stepInput .charge-ready-title {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.4px !important;
  color: #151515 !important;
}

/* Figma: title bottom -> ID box top = 16px */
.charging-web-page #stepInput .charge-code-otp {
  margin-top: 16px !important;
}


/* =========================================================
   Charging history header - Figma shared header final
   ========================================================= */

body > .app-logo-header {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-bottom: 0.5px solid rgba(246, 246, 249, 0.7) !important;
}

body > .app-logo-header > img {
  display: block !important;
  width: 88px !important;
  height: auto !important;
  margin: 0 !important;
}

body > .app-logo-header .logout {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #454545 !important;
}


/* =========================================================
   Month bottom sheet dimmed overlay - Figma final
   ========================================================= */

.month-sheet-dim {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* Bottom sheet open: prevent background scrolling */
body.month-sheet-open {
  overflow: hidden !important;
  touch-action: none;
}


/* =========================================================
   Month selector bottom sheet - Figma 252:9832 final
   ========================================================= */

.month-sheet {
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  padding: 0 0 calc(21px + env(safe-area-inset-bottom)) !important;
  background: #ffffff !important;
  border-radius: 24px 24px 0 0 !important;
  box-sizing: border-box !important;
}

/* handle area */
.month-sheet-handle {
  width: 50px !important;
  height: 5px !important;
  margin: 12px auto 12px !important;
  border-radius: 2.5px !important;
  background: #E5E5E8 !important;
}

/* year row */
.month-sheet-year-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}

/* year chevrons */
.month-year-arrow {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

.month-year-arrow img {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}

/* year title */
.month-sheet-title {
  width: 62px !important;
  text-align: center !important;
  font-family: Pretendard, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.54px !important;
  color: #151515 !important;
}

/* disabled next year */
.month-year-arrow:disabled,
.month-year-arrow.disabled {
  opacity: 0.35 !important;
}

/* month grid */
.month-grid {
  height: 150px !important;
  padding: 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
}

.month-grid a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px !important;
  text-decoration: none !important;
  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: -0.32px !important;
  color: #454545 !important;
}

/* selected month */
.month-grid a.active,
.month-grid a.selected,
.month-grid a[aria-current="true"] {
  justify-self: center !important;
  align-self: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 20px !important;
  background: #06C58F !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}


/* =========================================================
   Charger code error - Figma final
   ========================================================= */

.charging-web-page #inputError {
  font-family: Pretendard, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.28px !important;
}

/* ! 가 pseudo element로 표현되는 경우에도 동일 */
.charging-web-page #inputError::before {
  font-size: 14px !important;
  font-weight: 500 !important;
}


/* =========================================================
   History page - Figma 252:9351 final
   ========================================================= */

/* 상단 연녹색 영역 */
.history-page .history-top-zone {
  height: 196px !important;
  padding: 32px 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: rgba(6, 197, 143, 0.10) !important;
}

/* 월 이동 */
.history-page .history-month-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  height: 28px !important;
  margin: 0 0 16px !important;
}

.history-page .history-month-row .month-arrow {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.history-page .history-month-row .month-arrow img {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  object-fit: contain !important;
}

.history-page .history-month-row .month-arrow.disabled img {
  opacity: 0.35 !important;
}

.history-page .month-title-btn {
  width: 53px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.6px !important;
  color: #151515 !important;
  text-align: center !important;
}


/* 월 합계 카드 */
.history-page .history-summary-card {
  width: 100% !important;
  height: 100px !important;
  min-height: 100px !important;

  margin: 0 !important;
  padding: 20px !important;

  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 16px !important;

  background: #ffffff !important;
  border: 1px solid #42D4AB !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.history-page .history-summary-card .summary-row {
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #151515 !important;
}

.history-page .history-summary-card .summary-row > span {
  font-weight: 500 !important;
}

.history-page .history-summary-card .summary-row > strong {
  font-size: 16px !important;
  font-weight: 700 !important;
}


/* =========================================================
   History transaction list
   ========================================================= */

.history-page .history-list {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 한 건 높이 132 */
.history-page .history-item {
  width: 100% !important;
  min-height: 132px !important;
  height: 132px !important;

  padding: 20px 16px !important;
  margin: 0 !important;

  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;

  background: #ffffff !important;
  border: 0 !important;
}

/* 항목 사이 8px separator */
.history-page .history-item + .history-item {
  border-top: 8px solid #F6F6F9 !important;
  height: 140px !important;
  padding-top: 20px !important;
}

/* 날짜 */
.history-page .history-date {
  margin: 0 !important;
  padding: 0 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.28px !important;
  color: #151515 !important;
}

/* 금액 / 충전량 row */
.history-page .history-info-row {
  width: 100% !important;
  height: 20px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.28px !important;
}

/* 좌측 라벨 */
.history-page .history-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #151515 !important;
}

/* 우측 값 */
.history-page .history-value {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #151515 !important;
  text-align: right !important;
}

/* Figma: 충전 금액 숫자 강조 */
.history-page .history-price {
  color: #0FB183 !important;
}

/* 충전량은 검정 */
.history-page .history-energy {
  color: #151515 !important;
}


/* =========================================================
   Month sheet disabled / active states
   ========================================================= */

.month-grid a.disabled {
  color: #D1D1D5 !important;
  pointer-events: none !important;
}

.month-grid a.active {
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;

  justify-self: center !important;
  align-self: center !important;

  border-radius: 20px !important;
  background: #06C58F !important;

  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}


/* History list separator geometry correction */
.history-page .history-item + .history-item {
  height: 132px !important;
  min-height: 132px !important;
  border-top: 0 !important;
  margin-top: 8px !important;
  position: relative !important;
}

.history-page .history-item + .history-item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
  background: #F6F6F9;
}


/* Charger connect button text */
.charging-web-page .charge-start-btn {
  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}


/* Empty charging history - Figma 252:9893 */
.history-page .empty-history {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  text-align: center !important;
}

.history-page .empty-history-icon {
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.history-page .empty-history-icon img {
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
}

.history-page .empty-history-title {
  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.48px !important;
  color: #151515 !important;
  text-align: center !important;
}


/* =========================================================
   History typography final adjustment
   ========================================================= */

/* 월별 합계: 라벨 / 값 / 단위 모두 16 Medium + black */
.history-page .history-summary-card .summary-row,
.history-page .history-summary-card .summary-row > span,
.history-page .history-summary-card .summary-row > strong {
  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #151515 !important;
}

/* 각 충전내역: 라벨 / 값 / 단위 모두 14 Medium + black */
.history-page .history-info-row,
.history-page .history-label,
.history-page .history-value,
.history-page .history-price,
.history-page .history-energy {
  font-family: Pretendard, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.28px !important;
  color: #151515 !important;
}


/* =========================================================
   Rate confirm sheet - Figma 221:8604
   ========================================================= */

#rateConfirmDim {
  background: rgba(0, 0, 0, 0.5) !important;
}

.rate-confirm-sheet {
  width: 100% !important;
  height: 391px !important;
  left: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: 24px 24px 0 0 !important;
  box-sizing: border-box !important;
}

/* 기존 handle은 이 팝업에서는 숨김 */
.rate-confirm-sheet .app-sheet-handle {
  display: none !important;
}

.rate-confirm-title {
  height: 68px !important;
  padding: 20px 16px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.54px !important;
  color: #151515 !important;
}

/* charger code는 Figma에 없음 */
.rate-confirm-charger {
  display: none !important;
}

.rate-confirm-info {
  width: 327px !important;
  height: 106px !important;
  margin: 13px auto 0 !important;
  padding: 20px !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  background: #F6F6F9 !important;
  border-radius: 12px !important;
}

.rate-confirm-type {
  font-family: Pretendard, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.6px !important;
  color: #151515 !important;
}

.rate-confirm-amount {
  font-family: Pretendard, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.72px !important;
  color: #0FB183 !important;
}

.rate-confirm-base-fee {
  font-size: 13px !important;
}

.rate-confirm-notice {
  margin: 16px 16px 0 !important;
  text-align: center !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #454545 !important;
}

.rate-confirm-actions {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 20px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.rate-confirm-start-btn {
  width: 100% !important;
  height: 56px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #06C58F !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #ffffff !important;
}

.rate-confirm-cancel-btn {
  width: 100% !important;
  height: 48px !important;
  border: 0 !important;
  background: transparent !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #888888 !important;
}


/* =========================================================
   Charging running - Figma 252:10352
   ========================================================= */

.charging-run-page {
  background: rgba(183, 244, 226, 0.20) !important;
}

/* status bar */
.charging-run-page .charging-top-bar {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;

  background: rgba(6, 197, 143, 0.10) !important;
}

.charging-run-page .charging-top-bar strong {
  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #0FB183 !important;
}

/* metrics whole block */
.charging-run-page .charge-metrics {
  width: 327px !important;
  margin: 130px auto 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* labels */
.charging-run-page .charge-label {
  margin: 0 !important;
  font-family: Pretendard, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.28px !important;
  color: #454545 !important;
  text-align: center !important;
}

.charging-run-page .charge-label-gap {
  margin-top: 50px !important;
}

/* elapsed time */
.charging-run-page .charge-time {
  margin-top: 4px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -1.2px !important;
  color: #151515 !important;
  text-align: center !important;
}

/* charging energy */
.charging-run-page .charge-energy {
  margin-top: 4px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -1.2px !important;
  color: #0FB183 !important;
  text-align: center !important;
}

/* estimated amount */
.charging-run-page .charge-price {
  margin-top: 4px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -1.2px !important;
  color: #0FB183 !important;
  text-align: center !important;
}

/* stop button */
.charging-run-page #stopBtn {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 89px !important;

  width: auto !important;
  height: 56px !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 12px !important;
  background: #06C58F !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #ffffff !important;
}


/* =========================================================
   FINAL LAYOUT CORRECTION
   Rate sheet + charging screen geometry
   ========================================================= */


/* ---------------------------------------------------------
   1. 이용요금 안내 Bottom Sheet
   --------------------------------------------------------- */

.charging-web-page #rateConfirmDim {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1000 !important;
}

.charging-web-page #rateConfirmSheet {
  position: fixed !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;

  transform: none !important;

  width: 100% !important;
  max-width: none !important;
  height: 391px !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  background: #ffffff !important;
  border-radius: 24px 24px 0 0 !important;

  z-index: 1001 !important;
  overflow: hidden !important;
}


/* 제목 */
.charging-web-page #rateConfirmSheet .rate-confirm-title {
  width: 100% !important;
  height: 68px !important;

  margin: 0 !important;
  padding: 20px 16px !important;

  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;

  text-align: left !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.54px !important;
  color: #151515 !important;
}


/* 요금 카드 */
.charging-web-page #rateConfirmSheet .rate-confirm-info {
  width: calc(100% - 48px) !important;
  height: 106px !important;

  margin: 13px 24px 0 !important;
  padding: 20px !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 4px !important;

  background: #F6F6F9 !important;
  border: 0 !important;
  border-radius: 12px !important;
}


/* 안내 문구 */
.charging-web-page #rateConfirmSheet .rate-confirm-notice {
  width: 100% !important;

  margin: 16px 0 0 !important;
  padding: 0 16px !important;

  box-sizing: border-box !important;

  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;

  text-align: center !important;
  color: #454545 !important;
}


/* 팝업 버튼 영역 */
.charging-web-page #rateConfirmSheet .rate-confirm-actions {
  position: absolute !important;

  left: 16px !important;
  right: 16px !important;
  bottom: 20px !important;

  width: auto !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}


/* ---------------------------------------------------------
   2. 충전 진행 화면 자체를 위치 기준 부모로 고정
   --------------------------------------------------------- */

.charging-web-page #stepCharging {
  position: relative !important;

  width: 100% !important;
  min-height: calc(100dvh - 69px) !important;
  height: calc(100dvh - 69px) !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
  overflow: hidden !important;

  background: rgba(183, 244, 226, 0.20) !important;
}


/* 헤더 */
.charging-web-page #stepCharging .charging-page-header {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  box-sizing: border-box !important;
}


/* 충전 상태 바 */
.charging-web-page #stepCharging .charging-top-bar {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;

  background: rgba(6, 197, 143, 0.10) !important;
}


/* ---------------------------------------------------------
   3. 충전 정보 전체를 정확히 가운데 정렬
   --------------------------------------------------------- */

.charging-web-page #stepCharging .charge-metrics {
  position: absolute !important;

  top: 230px !important;
  left: 50% !important;

  transform: translateX(-50%) !important;

  width: calc(100% - 48px) !important;
  max-width: 327px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  text-align: center !important;
}


/* 진행 시간 */
.charging-web-page #stepCharging .charge-time {
  margin: 4px 0 0 !important;
}


/* 충전량 / 예상금액 간격 */
.charging-web-page #stepCharging .charge-label-gap {
  margin-top: 50px !important;
}


/* ---------------------------------------------------------
   4. 충전 중지 / 종료 중 / 결제 처리중
   항상 같은 위치
   --------------------------------------------------------- */

.charging-web-page #stepCharging #stopBtn {
  position: absolute !important;

  left: 50% !important;
  right: auto !important;
  bottom: 89px !important;

  transform: translateX(-50%) !important;

  width: calc(100% - 32px) !important;
  max-width: none !important;
  height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  box-sizing: border-box !important;

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

  border: 0 !important;
  border-radius: 12px !important;

  background: #06C58F !important;
  color: #ffffff !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;

  text-align: center !important;
}


/*
 충전 중지
 종료 중...
 종료 처리중...
 결제 처리중...
 전부 같은 자리 유지
 */
.charging-web-page #stepCharging #stopBtn:disabled {
  left: 50% !important;
  right: auto !important;
  bottom: 89px !important;

  transform: translateX(-50%) !important;

  width: calc(100% - 32px) !important;
  height: 56px !important;

  margin: 0 !important;
}


/* ---------------------------------------------------------
   5. 완료 후 처음 화면으로 버튼도 같은 축 사용
   --------------------------------------------------------- */

.charging-web-page #stepCharging #homeBtn {
  position: absolute !important;

  left: 50% !important;
  right: auto !important;
  bottom: 89px !important;

  transform: translateX(-50%) !important;

  width: calc(100% - 32px) !important;
  max-width: none !important;
  height: 56px !important;

  margin: 0 !important;

  box-sizing: border-box !important;
}


/* =========================================================
   2026-08-29 FINAL CHARGING FLOW GEOMETRY
   Figma 221:8604 / 252:10352
   ========================================================= */


/* ---------------------------------------------------------
   공통 충전 실행 화면
   --------------------------------------------------------- */

.charging-web-page #stepCharging {
  position: relative !important;
  width: 100% !important;
  height: calc(100dvh - var(--app-bottom-nav-height)) !important;
  min-height: calc(100dvh - var(--app-bottom-nav-height)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: rgba(183,244,226,.20) !important;
}


/* header */
.charging-web-page #stepCharging .charging-page-header {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   52px 충전 상태 영역
   --------------------------------------------------------- */

.charging-web-page #stepCharging .charging-top-bar {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  box-sizing: border-box !important;

  background: rgba(6,197,143,.10) !important;
}

.charging-web-page #stepCharging .charging-status-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}

.charging-web-page #stepCharging #statusText {
  margin: 0 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -.32px !important;

  color: #0FB183 !important;
}


/* ---------------------------------------------------------
   충전 진행 metrics
   status bar 아래 78px
   --------------------------------------------------------- */

.charging-web-page #stepCharging .charge-metrics {
  position: static !important;
  transform: none !important;

  width: 327px !important;
  max-width: calc(100% - 48px) !important;

  margin: 78px auto 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  text-align: center !important;
}

.charging-web-page #stepCharging .charge-label {
  margin: 0 !important;
  padding: 0 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -.28px !important;

  color: #454545 !important;
}

.charging-web-page #stepCharging .charge-time {
  margin: 4px 0 0 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -1.2px !important;

  color: #151515 !important;
}

.charging-web-page #stepCharging .charge-label-gap {
  margin-top: 50px !important;
}

.charging-web-page #stepCharging .charge-energy,
.charging-web-page #stepCharging .charge-price {
  margin: 4px 0 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;

  color: #0FB183 !important;
  line-height: 1.4 !important;
}

.charging-web-page #stepCharging #energyValue,
.charging-web-page #stepCharging #estimatedAmountValue {
  font-family: Pretendard, sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  letter-spacing: -1.2px !important;

  color: #0FB183 !important;
}

.charging-web-page #stepCharging .charge-unit {
  font-family: Pretendard, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -.72px !important;

  color: #454545 !important;
}


/* ---------------------------------------------------------
   충전 중지 / 종료중 / 결제처리중
   무조건 nav 위 20px
   --------------------------------------------------------- */

.charging-web-page #stepCharging #stopBtn,
.charging-web-page #stepCharging #homeBtn {
  position: fixed !important;

  left: 16px !important;
  right: 16px !important;
  bottom: calc(var(--app-bottom-nav-height) + 20px) !important;

  transform: none !important;

  width: calc(100% - 32px) !important;
  max-width: none !important;
  height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  box-sizing: border-box !important;

  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -.32px !important;
  text-align: center !important;

  z-index: 20 !important;
}

.charging-web-page #stepCharging #stopBtn:not(.app-hidden),
.charging-web-page #stepCharging #homeBtn:not(.app-hidden) {
  display: flex !important;
}

.charging-web-page #stepCharging #stopBtn {
  border: 0 !important;
  background: #06C58F !important;
  color: #fff !important;
}

/* 종료 처리중에도 위치/녹색 버튼 유지 */
.charging-web-page #stepCharging #stopBtn:disabled {
  opacity: 1 !important;
  background: #06C58F !important;
  color: #fff !important;
}

.charging-web-page #stepCharging #homeBtn {
  background: #fff !important;
  color: #151515 !important;
  border: 1px solid #E5E5E8 !important;
}


/* ---------------------------------------------------------
   결제 완료 화면
   충전 중 페이지 디자인 그대로 + 완료 문구 추가
   --------------------------------------------------------- */

.charging-web-page #stepCharging #finalMessage {
  margin: 34px 16px 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.charging-web-page #stepCharging #finalTitle {
  margin: 0 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -.72px !important;

  color: #151515 !important;
}

.charging-web-page #stepCharging #finalSub {
  width: 100% !important;
  margin: 12px 0 0 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -.28px !important;

  color: #888 !important;
}

.charging-web-page #stepCharging #finalMessage:not(.app-hidden) + .charge-metrics {
  margin-top: 30px !important;
}

.charging-web-page #stepCharging #finalMessage:not(.app-hidden)
  + .charge-metrics .charge-label-gap {
  margin-top: 22px !important;
}


/* ---------------------------------------------------------
   이용요금 안내
   --------------------------------------------------------- */

.charging-web-page #rateConfirmDim {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,.50) !important;
  z-index: 1000 !important;
}

.charging-web-page #rateConfirmSheet {
  position: fixed !important;

  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;

  transform: none !important;

  width: 100% !important;
  max-width: none !important;
  height: 391px !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  border-radius: 24px 24px 0 0 !important;
  background: #fff !important;

  overflow: hidden !important;
  z-index: 1001 !important;
}

.charging-web-page #rateConfirmSheet .app-sheet-handle {
  display: none !important;
}

.charging-web-page #rateConfirmSheet .rate-confirm-title {
  width: 100% !important;
  height: 68px !important;

  margin: 0 !important;
  padding: 20px 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  box-sizing: border-box !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -.54px !important;

  color: #151515 !important;
  text-align: left !important;
}

.charging-web-page .rate-confirm-close-btn {
  width: 24px !important;
  height: 24px !important;

  margin: 0 !important;
  padding: 0 !important;

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

  border: 0 !important;
  background: transparent !important;
}

.charging-web-page .rate-confirm-close-btn img {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
}

.charging-web-page #rateConfirmSheet .rate-confirm-info {
  width: calc(100% - 48px) !important;
  height: 106px !important;

  margin: 13px 24px 0 !important;
  padding: 20px !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  border: 0 !important;
  border-radius: 12px !important;
  background: #F6F6F9 !important;
}

.charging-web-page #rateConfirmSheet .rate-confirm-charger,
.charging-web-page #rateConfirmSheet .rate-confirm-base-fee.app-hidden {
  display: none !important;
}

.charging-web-page #rateConfirmSheet .rate-confirm-type {
  margin: 0 !important;

  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;

  color: #151515 !important;
}

.charging-web-page #rateConfirmSheet .rate-confirm-amount {
  margin: 0 !important;

  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;

  color: #0FB183 !important;
}

.charging-web-page #rateConfirmSheet .rate-confirm-notice {
  width: 100% !important;

  margin: 16px 0 0 !important;
  padding: 0 16px !important;

  box-sizing: border-box !important;

  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;

  color: #454545 !important;
  text-align: center !important;
}

.charging-web-page #rateConfirmSheet .rate-confirm-actions {
  position: absolute !important;

  left: 16px !important;
  right: 16px !important;
  bottom: 20px !important;

  width: auto !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}


/* ---------------------------------------------------------
   커넥터 선택 팝업
   팝업 중 뒤쪽 충전하기 버튼은 숨김 + 50% dim
   --------------------------------------------------------- */

.charging-web-page #connectorSheetDim {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.50) !important;
  z-index: 1000 !important;
}

body.connector-sheet-open .charging-web-page .charge-start-btn {
  visibility: hidden !important;
}

.charging-web-page #connectorSheet {
  z-index: 1001 !important;
}


/* =========================================================
   Charging screen responsive vertical layout FINAL
   Mobile browser / variable viewport height safe
   ========================================================= */

.charging-web-page #stepCharging {
  position: relative !important;

  width: 100% !important;
  height: calc(100dvh - var(--app-bottom-nav-height)) !important;
  min-height: 0 !important;

  padding: 0 16px 20px !important;
  margin: 0 !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  overflow: hidden !important;

  background: rgba(183, 244, 226, 0.20) !important;
}


/* header/status는 다시 화면 전체 폭 */
.charging-web-page #stepCharging .charging-page-header,
.charging-web-page #stepCharging .charging-top-bar {
  margin-left: -16px !important;
  margin-right: -16px !important;
  width: calc(100% + 32px) !important;
  flex: 0 0 auto !important;
}


/* Figma: 상태바 아래 78px */
.charging-web-page #stepCharging .charge-metrics {
  position: static !important;
  inset: auto !important;
  transform: none !important;

  width: 327px !important;
  max-width: 100% !important;

  margin: 78px auto 0 !important;
  padding: 0 !important;

  flex: 0 0 auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}


/* 충전중 / 종료중 / 결제처리중 버튼
   남은 공간을 이용해 항상 하단으로 */
.charging-web-page #stepCharging #stopBtn {
  position: static !important;
  inset: auto !important;
  transform: none !important;

  width: 100% !important;
  max-width: none !important;
  height: 56px !important;

  margin: auto 0 0 !important;
  flex: 0 0 56px !important;

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

  border-radius: 12px !important;
}


/* 완료화면의 처음 화면으로도 같은 위치 */
.charging-web-page #stepCharging #homeBtn {
  position: static !important;
  inset: auto !important;
  transform: none !important;

  width: 100% !important;
  max-width: none !important;
  height: 56px !important;

  margin: auto 0 0 !important;
  flex: 0 0 56px !important;

  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;
}

.charging-web-page #stepCharging #homeBtn:not(.app-hidden) {
  display: flex !important;
}


/* 높이가 작은 모바일 브라우저에서는
   Figma의 큰 여백만 조금 줄이고 요소 크기는 유지 */
@media (max-height: 740px) {
  .charging-web-page #stepCharging .charge-metrics {
    margin-top: 44px !important;
  }

  .charging-web-page #stepCharging .charge-label-gap {
    margin-top: 34px !important;
  }
}


/* Rate confirm close icon inline SVG */
.charging-web-page .rate-confirm-close-btn {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.charging-web-page .rate-confirm-close-icon {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}


/* Charging status icon - inline SVG final */
.charging-web-page #stepCharging .charging-status-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.charging-web-page #stepCharging .charging-top-bar {
  display: flex !important;
  align-items: center !important;
}


/* =========================================================
   Charging bottom action buttons - absolute final reset
   stop / processing / home all same geometry
   ========================================================= */

.charging-web-page #stepCharging #stopBtn,
.charging-web-page #stepCharging #homeBtn,
.charging-web-page #stepCharging #stopBtn:disabled,
.charging-web-page #stepCharging #homeBtn:not(.app-hidden) {
  position: static !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  inset: auto !important;

  transform: none !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  height: 56px !important;
  min-height: 56px !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-top: auto !important;

  padding: 0 16px !important;

  box-sizing: border-box !important;

  flex: 0 0 56px !important;
  align-self: stretch !important;

  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;

  text-align: center !important;
  white-space: nowrap !important;
}

/* 보이는 상태에서만 flex */
.charging-web-page #stepCharging #stopBtn:not(.app-hidden),
.charging-web-page #stepCharging #homeBtn:not(.app-hidden) {
  display: flex !important;
}

/* stop / 종료중 / 종료처리중 / 결제처리중 */
.charging-web-page #stepCharging #stopBtn,
.charging-web-page #stepCharging #stopBtn:disabled {
  background: #06C58F !important;
  color: #ffffff !important;
  border: 0 !important;
  opacity: 1 !important;
}

/* 결제 완료 후 처음 화면으로 */
.charging-web-page #stepCharging #homeBtn {
  background: #ffffff !important;
  color: #151515 !important;
  border: 1px solid #E5E5E8 !important;
}

/* 버튼과 하단 nav 사이 Figma 20px */
.charging-web-page #stepCharging {
  padding-bottom: 20px !important;
}


/* Rate confirm cancel button - Figma final */
.charging-web-page #rateConfirmSheet .rate-confirm-cancel-btn {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;

  margin: 0 !important;
  padding: 0 !important;

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

  box-sizing: border-box !important;

  background: #FFFFFF !important;
  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  color: #888888 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}

/* =========================================================
   History month navigation - dynamic title width FINAL
   8월 = compact / 2025년 12월 = naturally wider
   ========================================================= */

.history-page .history-month-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 16px !important;

  height: 28px !important;
  margin: 0 0 16px !important;
}

.history-page .history-month-row .month-title-btn {
  width: auto !important;
  min-width: 53px !important;
  max-width: none !important;

  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;

  white-space: nowrap !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  letter-spacing: -0.6px !important;

  text-align: center !important;
}

.history-page .history-month-row .month-arrow {
  flex: 0 0 20px !important;

  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
}

/* =========================================================
   My vehicle information change - Figma final
   ========================================================= */

.vehicle-edit-page {
  background: #FFFFFF !important;
}

.vehicle-edit-page .vehicle-edit-form {
  width: 100% !important;
  height: calc(100dvh - 56px) !important;
  padding: 20px 16px 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.vehicle-edit-page .vehicle-current-fields,
.vehicle-edit-page .vehicle-new-fields {
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.vehicle-edit-page .vehicle-new-fields {
  margin-top: 12px !important;
}

.vehicle-edit-page .vehicle-current-field,
.vehicle-edit-page .profile-edit-field {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

.vehicle-edit-page .vehicle-current-field {
  display: flex !important;
  align-items: center !important;

  padding: 0 16px !important;

  background: #F6F6F9 !important;
  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #454545 !important;
}

.vehicle-edit-page .profile-edit-field input {
  width: 100% !important;
  height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  box-sizing: border-box !important;

  background: #FFFFFF !important;
  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  outline: none !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #151515 !important;
}

.vehicle-edit-page .profile-edit-field input::placeholder {
  color: #888888 !important;
  opacity: 1 !important;
}

.vehicle-edit-page #vehicleEditMsg {
  margin: 8px 0 0 !important;
  min-height: 17px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #FF4242 !important;
}

.vehicle-edit-page #vehicleEditBtn {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: auto 0 0 !important;
  padding: 0 16px !important;

  border: 0 !important;
  border-radius: 12px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #FFFFFF !important;
}

.vehicle-edit-page #vehicleEditBtn:disabled {
  background: #D1D1D5 !important;
}

.vehicle-edit-page #vehicleEditBtn:not(:disabled) {
  background: #06C58F !important;
}

/* =========================================================
   Email change - Figma final
   ========================================================= */

.email-edit-page {
  background: #FFFFFF !important;
}

.email-edit-page .email-edit-form {
  width: 100% !important;
  height: calc(100dvh - 56px) !important;
  padding: 20px 16px 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.email-edit-page .email-current-field,
.email-edit-page .email-new-field {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
}

.email-edit-page .email-current-field {
  display: flex !important;
  align-items: center !important;

  padding: 0 16px !important;

  background: #F6F6F9 !important;
  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #454545 !important;
}

.email-edit-page .email-new-field {
  margin-top: 12px !important;
}

.email-edit-page #emailChangeInput {
  width: 100% !important;
  height: 56px !important;

  padding: 0 16px !important;
  margin: 0 !important;

  box-sizing: border-box !important;

  background: #FFFFFF !important;
  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;
  outline: none !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #151515 !important;
}

.email-edit-page #emailChangeInput::placeholder {
  color: #888888 !important;
  opacity: 1 !important;
}

.email-edit-page #emailChangeInput.is-error {
  border-color: #FF4242 !important;
}

.email-edit-page .email-domain-suggestions {
  width: calc(100% + 16px) !important;

  margin-top: 20px !important;

  display: flex !important;
  gap: 12px !important;

  overflow-x: auto !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
}

.email-edit-page .email-domain-suggestions::-webkit-scrollbar {
  display: none !important;
}

.email-edit-page .email-domain-suggestions.app-hidden {
  display: none !important;
}

.email-edit-page .email-domain-suggestions button {
  flex: 0 0 auto !important;

  height: 28px !important;
  padding: 0 8px !important;

  border: 0 !important;
  border-radius: 8px !important;

  background: #F6F6F9 !important;
  color: #151515 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.26px !important;
}

.email-edit-page .email-change-error {
  min-height: 17px !important;
  margin: 8px 0 0 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.24px !important;

  color: #FF4242 !important;
}

.email-edit-page #emailChangeBtn {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: auto 0 0 !important;
  padding: 0 16px !important;

  border: 0 !important;
  border-radius: 12px !important;

  color: #FFFFFF !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}

.email-edit-page #emailChangeBtn:disabled {
  background: #D1D1D5 !important;
}

.email-edit-page #emailChangeBtn:not(:disabled) {
  background: #06C58F !important;
}

/* =========================================================
   Payment card management - Figma final
   ========================================================= */

body:has(#cardArea) {
  background: #FFFFFF !important;
}

/* 카드 페이지 공통 */
#cardArea {
  width: 100% !important;
}

#cardArea .card-empty-view,
#cardArea .card-registered-view {
  width: 100% !important;
  min-height: calc(100dvh - 56px) !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
}

/* ---------------------------------------------------------
   카드 없음
   --------------------------------------------------------- */

#cardArea .card-empty-view {
  position: relative !important;
  padding: 20px 16px 20px !important;

  display: flex !important;
  flex-direction: column !important;
}

#cardArea .card-empty-center {
  flex: 1 1 auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

#cardArea .card-empty-icon {
  width: 56px !important;
  height: 56px !important;
}

#cardArea .card-empty-icon img {
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
}

#cardArea .card-empty-title {
  margin-top: 16px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.72px !important;

  color: #151515 !important;
  text-align: center !important;
}

#cardArea .card-empty-guide {
  width: 100% !important;
  max-width: 335px !important;

  margin-top: 28px !important;
  padding: 20px 24px !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;

  background: #F6F6F9 !important;
  border-radius: 16px !important;
}

#cardArea .card-guide-row {
  width: 100% !important;
  min-height: 22px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;

  color: #454545 !important;
}

#cardArea .card-guide-row strong {
  font: inherit !important;
  color: #454545 !important;
}

#cardArea .card-register-primary {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: auto 0 0 !important;
  padding: 0 16px !important;

  border: 0 !important;
  border-radius: 12px !important;

  background: #06C58F !important;
  color: #FFFFFF !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}

/* ---------------------------------------------------------
   카드 있음
   --------------------------------------------------------- */

#cardArea .card-registered-view {
  padding: 16px 0 20px !important;

  display: flex !important;
  flex-direction: column !important;
}

#cardArea .card-info-row {
  width: 100% !important;
  min-height: 56px !important;

  padding: 16px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;

  color: #454545 !important;
}

#cardArea .card-info-label,
#cardArea .card-info-value {
  color: #454545 !important;
}

#cardArea .card-change-btn {
  width: calc(100% - 32px) !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: auto 16px 0 !important;
  padding: 0 16px !important;

  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  background: #FFFFFF !important;
  color: #151515 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}

/* =========================================================
   Rate guide - Figma final
   ========================================================= */

.rate-guide-page {
  min-height: calc(100dvh - 56px) !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
}

.rate-guide-list {
  width: 100% !important;
  padding-top: 20px !important;
}

.rate-guide-row {
  width: 100% !important;
  min-height: 72px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  box-sizing: border-box !important;
}

.rate-guide-name {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;

  color: #151515 !important;
}

.rate-guide-name strong {
  font-family: Pretendard, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.36px !important;
}

.rate-guide-name span {
  font-family: Pretendard, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.3px !important;

  color: #888888 !important;
}

.rate-guide-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;

  color: #151515 !important;
  white-space: nowrap !important;
}

.rate-guide-price strong {
  font-family: Pretendard, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.36px !important;
}

.rate-guide-price span {
  font-family: Pretendard, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.3px !important;
}

.rate-guide-price-empty {
  font-family: Pretendard, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #888888 !important;
}

.rate-guide-divider {
  width: 100% !important;
  height: 1px !important;
  background: #E5E5E8 !important;
}

.rate-guide-notice {
  margin-top: 330px !important;
  padding-bottom: 28px !important;
}

.rate-guide-notice-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;

  margin-bottom: 16px !important;

  color: #151515 !important;
}

.rate-guide-notice-title strong {
  font-family: Pretendard, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.3px !important;
}

.rate-guide-info-icon {
  width: 20px !important;
  height: 20px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1.5px solid #888888 !important;
  border-radius: 50% !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  color: #888888 !important;
  box-sizing: border-box !important;
}

.rate-guide-notice ul {
  margin: 0 !important;
  padding-left: 20px !important;
}

.rate-guide-notice li {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.3px !important;

  color: #454545 !important;
}

.rate-guide-notice li:last-child {
  margin-bottom: 0 !important;
}

/* =========================================================
   Notice - Figma final
   ========================================================= */

/* ---------- list header ---------- */

.notice-list-header {
  position: relative !important;
}

.notice-list-header .notice-header-spacer,
.notice-list-header .notice-close-btn {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
}

.notice-list-header .notice-close-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;
  color: #151515 !important;
}

.notice-list-header .notice-close-btn svg {
  width: 24px !important;
  height: 24px !important;
}

/* ---------- list ---------- */

.notice-page {
  min-height: calc(100dvh - 56px) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
}

.notice-list {
  width: 100% !important;
}

.notice-list .notice-item {
  width: 100% !important;
  min-height: 76px !important;

  padding: 16px !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;

  background: #FFFFFF !important;

  color: inherit !important;
  text-decoration: none !important;
}

.notice-list .notice-title {
  width: 100% !important;

  display: block !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;

  color: #151515 !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

.notice-list .notice-date {
  display: block !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.28px !important;

  color: #888888 !important;
}

/* ---------- empty ---------- */

.notice-empty {
  min-height: calc(100dvh - 56px) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 16px 56px !important;
  box-sizing: border-box !important;
}

.notice-empty-icon {
  width: 72px !important;
  height: 72px !important;
}

.notice-empty-icon img {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
}

.notice-empty-text {
  margin-top: 16px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;

  color: #454545 !important;
}

/* ---------- detail ---------- */

.notice-detail-page {
  min-height: calc(100dvh - 56px) !important;

  padding: 20px 16px 32px !important;
  box-sizing: border-box !important;

  background: #FFFFFF !important;
}

.notice-detail {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.notice-detail-head {
  margin: 0 !important;
  padding: 0 !important;
}

.notice-detail-head h2 {
  margin: 0 !important;
  padding: 0 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.36px !important;

  color: #151515 !important;

  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

.notice-detail-head time {
  display: block !important;

  margin-top: 8px !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.28px !important;

  color: #888888 !important;
}

.notice-detail-content {
  margin-top: 28px !important;
  padding: 0 !important;

  font-family: Pretendard, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: -0.28px !important;

  color: #454545 !important;

  white-space: pre-wrap !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

/* =========================================================
   My info main / detail - Figma structure
   ========================================================= */

/* 메인 최상단 : 아이디 test9 / 내 정보 > */
.profile-main-entry {
  width: 100%;
  height: 56px;

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

  padding: 0 16px;
  box-sizing: border-box;

  background: #FFFFFF;
  cursor: pointer;
}

.profile-main-id,
.profile-main-link {
  display: flex;
  align-items: center;
}

.profile-main-id {
  gap: 8px;
}

.profile-main-id span,
.profile-main-id strong,
.profile-main-link span {
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.32px;
  color: #151515;
}

.profile-main-id span {
  font-weight: 400;
}

.profile-main-id strong {
  font-weight: 600;
}

.profile-main-link {
  gap: 6px;
}

.profile-main-link > span:first-child {
  font-weight: 600;
}

.profile-main-arrow {
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: #888888 !important;
}


/* 상세 전체 */
.profile-detail-page {
  position: fixed;
  inset: 0;

  z-index: 1900;

  background: #FFFFFF;

  overflow-y: auto;
  overscroll-behavior: contain;
}

.profile-detail-content {
  min-height: calc(100dvh - 56px);

  padding: 8px 16px max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}


/* 각 정보 = 라벨 한 줄 + 값 한 줄 */
.profile-detail-row {
  width: 100%;

  padding: 14px 0 16px;
  box-sizing: border-box;
}

.profile-detail-label {
  margin-bottom: 8px;

  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.28px;

  color: #888888;
}

.profile-detail-line {
  width: 100%;
  min-height: 28px;

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

  gap: 12px;
}

.profile-detail-value {
  min-width: 0;

  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.32px;

  color: #151515;

  word-break: break-word;
}

.profile-detail-line > .profile-detail-value {
  flex: 1 1 auto;
}


/* 차량 한 줄 */
.profile-detail-page .vehicle-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}


/* 기존 변경 버튼 위치/형태 유지 */
.profile-detail-page .more-edit-btn {
  flex: 0 0 auto;
}


/* 로그아웃 = 상세 최하단 한 행 */
.profile-detail-logout-form {
  width: 100%;

  margin-top: auto;
  padding-top: 28px;
}

.profile-detail-logout {
  width: 100%;
  min-height: 56px;

  display: flex;
  align-items: center;

  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;

  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.32px;

  color: #454545;
  text-align: left;

  cursor: pointer;
}


/* =========================================================
   My info small alignment fix
   ========================================================= */

/* 1. 상세 - 차종 값을 다른 정보처럼 왼쪽에서 시작 */
.profile-detail-page .vehicle-summary {
  justify-content: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* =========================================================
   My info main entry - plain row final
   ========================================================= */

/* 2. 메인 - 내 정보 진입 영역을 카드/버튼처럼 보이지 않게 */
.profile-main-entry {
  width: 100% !important;
  height: 56px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 0 16px !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  background: transparent !important;
}


/* 오른쪽 '내 정보 >' */
.profile-main-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* > 영역 20 x 20 */
.profile-main-arrow {
  width: 20px !important;
  height: 20px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 20px !important;

  padding: 0 !important;
  margin: 0 !important;

  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 20px !important;

  color: #454545 !important;
}



/* =========================================================
   More main - flat Figma style final
   ========================================================= */

/* 상단 실제 로그인 아이디만 크게 */
.profile-main-login-id {
  font-family: Pretendard, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.4px !important;
  color: #151515 !important;
}


/* 상단 내 정보 행 */
.profile-main-entry {
  min-height: 72px !important;
  height: 72px !important;

  padding: 0 32px !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  background: #FFFFFF !important;
}


/* 메뉴 전체 영역 */
.more-page {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* 기존 네모 카드 제거 */
.more-page .more-menu {
  width: 100% !important;
  min-height: 74px !important;
  height: 74px !important;

  margin: 0 !important;
  padding: 0 32px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  background: #FFFFFF !important;
}


/* 메뉴 사이 얇은 구분선 */
.more-page .more-menu + .more-menu {
  border-top: 1px solid #F1F1F1 !important;
}


/* 메뉴 글자 */
.more-page .more-menu > span:first-child {
  font-family: Pretendard, sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.34px !important;
  color: #454545 !important;
}


/* 오른쪽 화살표 */
.more-page .more-menu > span:last-child {
  width: 20px !important;
  height: 20px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 20px !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 28px !important;
  font-weight: 300 !important;
  line-height: 20px !important;

  color: #555555 !important;
}


/* 상단 내 정보 */
.profile-main-link > span:first-child {
  font-size: 16px !important;
  font-weight: 500 !important;
}


/* 상단 화살표 */
.profile-main-arrow {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;

  font-size: 24px !important;
  line-height: 20px !important;

  color: #454545 !important;
}

/* =========================================================
   Recovery header alignment final
   Find ID / Reset password
   ========================================================= */

.recovery-page .app-header {
  position: relative !important;
  height: 56px !important;
  min-height: 56px !important;
}

.recovery-page .app-header-left {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
}

.recovery-page .app-header-title {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  transform: translateX(-50%) !important;

  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* =========================================================
   Kakao login icon/text - reference final
   ========================================================= */

.login-page .kakao-login-btn {
  gap: 8px !important;
}

/* 24x22 영역 안에 실제 카카오 말풍선 구성 */
.login-page .kakao-symbol {
  position: relative !important;
  display: inline-block !important;

  width: 24px !important;
  height: 22px !important;
  flex: 0 0 24px !important;

  border-radius: 0 !important;
  background: transparent !important;
}

/* 말풍선 본체 */
.login-page .kakao-symbol::before {
  content: "" !important;
  position: absolute !important;

  left: 1px !important;
  top: 1px !important;

  width: 22px !important;
  height: 17px !important;

  background: rgba(0, 0, 0, 0.85) !important;
  border-radius: 50% !important;
}

/* 왼쪽 아래 꼬리 */
.login-page .kakao-symbol::after {
  content: "" !important;
  position: absolute !important;

  left: 4px !important;
  bottom: 1px !important;

  width: 9px !important;
  height: 8px !important;

  background: rgba(0, 0, 0, 0.85) !important;

  clip-path: polygon(0 0, 100% 0, 12% 100%) !important;
  transform: rotate(-10deg) !important;
  transform-origin: top left !important;

  border-radius: 0 0 0 2px !important;
}

/* 레퍼런스처럼 너무 Bold하지 않게 */
.login-page .kakao-login-text {
  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  letter-spacing: -0.32px !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

/* =========================================================
   Kakao speech bubble FINAL
   ========================================================= */

.login-page .kakao-symbol {
  position: relative !important;
  display: inline-block !important;
  width: 24px !important;
  height: 22px !important;
  flex: 0 0 24px !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.login-page .kakao-symbol::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  top: 1px !important;
  width: 22px !important;
  height: 18px !important;
  background: rgba(0, 0, 0, 0.85) !important;
  border-radius: 50% !important;
}

.login-page .kakao-symbol::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  bottom: 0px !important;
  width: 9px !important;
  height: 8px !important;
  background: rgba(0, 0, 0, 0.85) !important;
  clip-path: polygon(0 0, 100% 0, 12% 100%) !important;
  transform: rotate(-15deg) !important;
  transform-origin: top left !important;
  border-radius: 0 0 0 2px !important;
}


/* =========================================================
   2026-08-29 LOGIN KAKAO + FOOTER FINAL
   ========================================================= */

/* Kakao icon container */
.login-page .kakao-symbol {
  position: relative !important;
  display: inline-block !important;
  width: 24px !important;
  height: 22px !important;
  flex: 0 0 24px !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Kakao bubble body */
.login-page .kakao-symbol::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 2px !important;
  width: 21px !important;
  height: 17px !important;
  background: rgba(0, 0, 0, 0.85) !important;
  border-radius: 50% !important;
}

/* Kakao bubble tail - LEFT / DOWN */
.login-page .kakao-symbol::after {
  content: "" !important;
  position: absolute !important;

  left: 2px !important;
  top: 14px !important;

  width: 9px !important;
  height: 8px !important;

  background: rgba(0, 0, 0, 0.85) !important;

  clip-path: polygon(
    42% 0%,
    100% 0%,
    0% 100%
  ) !important;

  transform: none !important;
  transform-origin: center !important;
  border-radius: 0 0 0 2px !important;
}

/* Footer terms/privacy */
.login-page .login-company-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

/* 이용약관 뒤 세로 구분선 */
.login-page .login-company-links a:first-child::after {
  content: "" !important;
  display: inline-block !important;

  width: 2px !important;
  height: 16px !important;

  margin: 0 12px !important;

  background: #d1d5db !important;
  border-radius: 1px !important;

  vertical-align: -3px !important;
}


/* =========================================================
   2026-08-29 CONNECTOR SELECT TEXT CARD FINAL
   image removed / connector logic unchanged
   ========================================================= */

.charging-web-page #connectorSheet {
  box-sizing: border-box !important;
  padding: 0 16px 20px !important;
  overflow: visible !important;
}

.charging-web-page #connectorSheet .connector-sheet-title {
  margin: 18px 0 24px !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.72px !important;

  color: #151515 !important;
  text-align: left !important;
}

/* 3개 커넥터 */
.charging-web-page #connectorSheet .connector-sheet-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 기존 이미지 카드 스타일 초기화 */
.charging-web-page #connectorSheet .connector-sheet-card {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  overflow: hidden !important;
  cursor: pointer !important;
}

/* 위쪽 색상 네모 */
.charging-web-page #connectorSheet .connector-type-box {
  width: 100% !important;
  height: 72px !important;

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

  border-radius: 12px 12px 0 0 !important;
  box-sizing: border-box !important;
}

.charging-web-page #connectorSheet .connector-type-box strong {
  margin: 0 !important;
  padding: 0 !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.3px !important;

  color: #ffffff !important;
  white-space: nowrap !important;
}

/* 참고 이미지의 3가지 색 */
.charging-web-page #connectorSheet .connector-ac3 .connector-type-box {
  background: #D98A19 !important;
}

.charging-web-page #connectorSheet .connector-chademo .connector-type-box {
  background: #20AFC1 !important;
}

.charging-web-page #connectorSheet .connector-combo .connector-type-box {
  background: #78A83A !important;
}

/* 사용 차종 영역 */
.charging-web-page #connectorSheet .connector-car-info {
  width: 100% !important;
  min-height: 82px !important;
  padding: 13px 4px 10px !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;

  background: #ffffff !important;
}

.charging-web-page #connectorSheet .connector-car-info span {
  display: block !important;
  width: 100% !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.24px !important;

  color: #454545 !important;
  text-align: center !important;
  word-break: keep-all !important;
}

/* AC3상 SM3는 가운데에 조금 여유 */
.charging-web-page #connectorSheet .connector-ac3 .connector-car-info {
  justify-content: flex-start !important;
}

/* 기존 취소 버튼 반드시 표시 */
.charging-web-page #connectorSheet > .app-btn.app-btn-outline {
  position: static !important;

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

  width: 100% !important;
  height: 52px !important;

  margin: 12px 0 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  background: #ffffff !important;
  color: #151515 !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  visibility: visible !important;
  opacity: 1 !important;
}

/* dim은 Figma 50% 유지 */
.charging-web-page #connectorSheetDim {
  background: rgba(0, 0, 0, 0.50) !important;
}



/* =========================================================
   2026-08-29 PAYMENT COMPLETE BUTTON FINAL
   완료 화면에서는 결제처리중/충전중지 버튼 숨김
   payment / charging logic unchanged
   ========================================================= */

.charging-web-page #stepCharging #finalMessage:not(.app-hidden) ~ #stopBtn {
  display: none !important;
}



/* =========================================================
   2026-08-29 CHARGING SCREEN FIGMA 252:10352 FINAL
   vertical spacing only / charging logic unchanged
   ========================================================= */

/* Figma: content starts below 100px header/status area */
.charging-web-page #stepCharging {
  height: calc(100dvh - var(--app-bottom-nav-height)) !important;
  padding: 0 16px 20px !important;
}

/* Figma node 252:10357
   top = 130px inside charging background */
.charging-web-page #stepCharging .charge-metrics {
  width: 327px !important;
  max-width: 100% !important;

  margin: 130px auto 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* 진행시간 → 충전량 → 예상금액
   Figma gap = 50px */
.charging-web-page #stepCharging .charge-label-gap {
  margin-top: 50px !important;
}

/* 진행 시간 label */
.charging-web-page #stepCharging .charge-label {
  font-family: "Pretendard", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.28px !important;
  color: #454545 !important;
}

/* 진행 시간 숫자 */
.charging-web-page #stepCharging .charge-time {
  margin-top: 4px !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -1.2px !important;
  color: #151515 !important;
}

/* 충전량 / 예상금액 큰 숫자 */
.charging-web-page #stepCharging .charge-energy,
.charging-web-page #stepCharging .charge-price {
  margin-top: 4px !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -1.2px !important;
  color: #0FB183 !important;
}

/* kWh / 원 */
.charging-web-page #stepCharging .charge-energy .charge-unit,
.charging-web-page #stepCharging .charge-price .charge-unit {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.72px !important;
  color: #454545 !important;
}

/* Figma button: 343x56, bottom-nav 위 영역 */
.charging-web-page #stepCharging #stopBtn,
.charging-web-page #stepCharging #homeBtn {
  width: 100% !important;
  height: 56px !important;
  flex: 0 0 56px !important;

  margin: auto 0 0 !important;

  border-radius: 12px !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}

/* 완료화면에서는 처음 화면으로만 */
.charging-web-page #stepCharging #finalMessage:not(.app-hidden) ~ #stopBtn {
  display: none !important;
}

/* 작은 높이 기기만 최소 보정 */
@media (max-height: 740px) {
  .charging-web-page #stepCharging .charge-metrics {
    margin-top: 92px !important;
  }

  .charging-web-page #stepCharging .charge-label-gap {
    margin-top: 38px !important;
  }
}



/* =========================================================
   2026-08-29 CONNECTOR SHEET LAYOUT FINAL
   ========================================================= */

/* 커넥터 바텀시트가 하단 네비 위에서 충분한 높이를 갖도록 */
.charging-web-page #connectorSheet {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--app-bottom-nav-height) !important;

  width: 100% !important;
  height: auto !important;
  min-height: 390px !important;
  max-height: calc(100dvh - var(--app-bottom-nav-height) - 12px) !important;

  padding: 0 16px 20px !important;
  box-sizing: border-box !important;

  overflow: visible !important;

  border-radius: 28px 28px 0 0 !important;
  background: #fff !important;

  z-index: 1001 !important;
}

/* 제목 */
.charging-web-page #connectorSheet .connector-sheet-title {
  margin: 18px 0 24px !important;
}

/* 카드 영역 */
.charging-web-page #connectorSheet .connector-sheet-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* 색상 박스 */
.charging-web-page #connectorSheet .connector-type-box {
  height: 72px !important;
}

/* 차종 글씨 영역 */
.charging-web-page #connectorSheet .connector-car-info {
  min-height: 72px !important;
  padding: 12px 2px 6px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 1px !important;
}

/* 두 줄 글씨를 서로 더 가깝게 */
.charging-web-page #connectorSheet .connector-car-info span {
  margin: 0 !important;
  padding: 0 !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.24px !important;

  color: #454545 !important;
  text-align: center !important;
  word-break: keep-all !important;
}

/* 취소 버튼 */
.charging-web-page #connectorSheet > .app-btn.app-btn-outline {
  position: static !important;

  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 52px !important;

  margin: 14px 0 0 !important;
  padding: 0 !important;

  flex: 0 0 52px !important;

  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  background: #fff !important;
  color: #151515 !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;

  z-index: 2 !important;
}


/* =========================================================
   2026-08-29 CHARGING FIGMA 252:10352 FINAL
   ========================================================= */

.charging-web-page #stepCharging {
  height: calc(100dvh - var(--app-bottom-nav-height)) !important;
  min-height: 0 !important;

  padding: 0 16px 20px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Figma: 충전 상태 영역 기준 top 130px */
.charging-web-page #stepCharging .charge-metrics {
  width: 327px !important;
  max-width: 100% !important;

  margin: 130px auto 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Figma 각 정보 블록 간격 */
.charging-web-page #stepCharging .charge-label-gap {
  margin-top: 50px !important;
}

.charging-web-page #stepCharging .charge-label {
  font-family: "Pretendard", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.28px !important;
  color: #454545 !important;
}

.charging-web-page #stepCharging .charge-time {
  margin-top: 4px !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -1.2px !important;
  color: #151515 !important;
}

.charging-web-page #stepCharging .charge-energy,
.charging-web-page #stepCharging .charge-price {
  margin-top: 4px !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -1.2px !important;

  color: #0FB183 !important;
}

.charging-web-page #stepCharging .charge-energy .charge-unit,
.charging-web-page #stepCharging .charge-price .charge-unit {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.72px !important;
  color: #454545 !important;
}

/* Figma 하단 버튼 */
.charging-web-page #stepCharging #stopBtn,
.charging-web-page #stepCharging #homeBtn {
  width: 100% !important;
  height: 56px !important;
  flex: 0 0 56px !important;

  margin: auto 0 0 !important;

  border-radius: 12px !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}

/* 결제 완료 후에는 결제처리중/충전중지 버튼 제거 */
.charging-web-page #stepCharging #finalMessage:not(.app-hidden) ~ #stopBtn {
  display: none !important;
}

/* 작은 화면에서만 세로 간격 최소 보정 */
@media (max-height: 740px) {

  .charging-web-page #stepCharging .charge-metrics {
    margin-top: 92px !important;
  }

  .charging-web-page #stepCharging .charge-label-gap {
    margin-top: 38px !important;
  }

}



/* =========================================================
   2026-08-29 CONNECTOR SHEET BOTTOM FULL FINAL
   바텀시트가 하단 네비까지 덮도록
   ========================================================= */

.charging-web-page #connectorSheet {
  position: fixed !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  height: auto !important;

  min-height: 360px !important;
  max-height: calc(100dvh - 12px) !important;

  padding: 0 16px 24px !important;

  box-sizing: border-box !important;
  overflow: visible !important;

  border-radius: 28px 28px 0 0 !important;
  background: #ffffff !important;

  z-index: 1100 !important;
}

/* 네비보다 위에 오도록 */
.charging-web-page .app-bottom-nav {
  z-index: 20 !important;
}

/* 차종 영역 조금 더 압축 */
.charging-web-page #connectorSheet .connector-car-info {
  min-height: 66px !important;
  padding: 10px 2px 4px !important;

  gap: 0 !important;
}

.charging-web-page #connectorSheet .connector-car-info span {
  margin: 0 !important;
  padding: 0 !important;

  line-height: 1.18 !important;
}

/* 취소 버튼을 조금 더 아래로 */
.charging-web-page #connectorSheet > .app-btn.app-btn-outline {
  position: static !important;

  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 100% !important;
  height: 52px !important;

  margin: 28px 0 0 !important;
  padding: 0 !important;

  align-items: center !important;
  justify-content: center !important;

  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  background: #ffffff !important;
  color: #151515 !important;

  z-index: 2 !important;
}

/* dim도 화면 전체 */
.charging-web-page #connectorSheetDim {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1099 !important;
  background: rgba(0, 0, 0, 0.50) !important;
}



/* =========================================================
   2026-08-29 CONNECTOR SHEET SPACING FINAL
   title/cards/text lower + cancel lower
   ========================================================= */

/* 제목을 조금 아래로 */
.charging-web-page #connectorSheet .connector-sheet-title {
  margin: 28px 0 28px !important;
}

/* 색상 박스 + 차종 영역 전체를 조금 아래로 */
.charging-web-page #connectorSheet .connector-sheet-grid {
  margin-top: 4px !important;
}

/* 색상 박스와 차종 글씨 사이 여백 */
.charging-web-page #connectorSheet .connector-car-info {
  min-height: 68px !important;
  padding: 14px 2px 4px !important;
  gap: 1px !important;
}

/* 2줄 설명은 붙여서 유지 */
.charging-web-page #connectorSheet .connector-car-info span {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.18 !important;
}

/* 취소 버튼을 더 아래쪽으로 */
.charging-web-page #connectorSheet > .app-btn.app-btn-outline {
  margin-top: 42px !important;
}

/* 바텀시트 높이도 그만큼 확보 */
.charging-web-page #connectorSheet {
  min-height: 390px !important;
  padding-bottom: 24px !important;
}



/* =========================================================
   2026-08-29 CONNECTOR SHEET SPACING FIX
   upper contents lower / cancel gap reduce
   ========================================================= */

/* 제목부터 전체적으로 조금 아래 */
.charging-web-page #connectorSheet .connector-sheet-title {
  margin-top: 40px !important;
  margin-bottom: 28px !important;
}

/* 카드 영역 */
.charging-web-page #connectorSheet .connector-sheet-grid {
  margin-top: 0 !important;
}

/* 색상 박스 아래 차종 영역 */
.charging-web-page #connectorSheet .connector-car-info {
  min-height: 66px !important;
  padding: 14px 2px 4px !important;
  gap: 0 !important;
}

.charging-web-page #connectorSheet .connector-car-info span {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.18 !important;
}

/* 차종 설명과 취소 사이 과한 공백 제거 */
.charging-web-page #connectorSheet > .app-btn.app-btn-outline {
  margin-top: 18px !important;
}

/* 현재 바텀시트 높이는 유지 */
.charging-web-page #connectorSheet {
  min-height: 390px !important;
  bottom: 0 !important;
}



/* =========================================================
   2026-08-29 RATE GUIDE NOTICE POSITION FINAL
   안내사항을 위로 올려 모바일 잘림 최소화
   ========================================================= */

.rate-guide-page .rate-guide-notice,
.rate-guide-page .rate-notice,
.rate-guide-page .notice-section {
  margin-top: 220px !important;
}

/* 내부 제목 위 여백 최소화 */
.rate-guide-page .rate-guide-notice-title,
.rate-guide-page .rate-notice-title,
.rate-guide-page .notice-title {
  margin-top: 0 !important;
}

/* 목록 자체도 위쪽 여백 축소 */
.rate-guide-page .rate-guide-notice ul,
.rate-guide-page .rate-notice ul,
.rate-guide-page .notice-section ul {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}



/* =========================================================
   2026-08-29 PAYMENT CARD SCREEN FIT FINAL
   결제카드 변경하기 버튼 한 화면 안에 표시
   ========================================================= */

/* 카드 화면 전체 */
.card-page,
.payment-card-page {
  min-height: calc(100dvh - 56px) !important;
  height: auto !important;
  padding-bottom: 24px !important;
  box-sizing: border-box !important;
}

/* 카드 정보 박스 높이 과도하게 늘어나지 않게 */
.card-page .card-info-box,
.payment-card-page .card-info-box,
.card-page .payment-card-box,
.payment-card-page .payment-card-box {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

/* 카드 정보 행 간격 */
.card-page .card-info-row,
.payment-card-page .card-info-row {
  margin-bottom: 30px !important;
}

.card-page .card-info-row:last-child,
.payment-card-page .card-info-row:last-child {
  margin-bottom: 0 !important;
}

/* 변경 버튼 영역을 화면 안으로 끌어올림 */
.card-page .card-change-btn,
.payment-card-page .card-change-btn,
.card-page .payment-card-change-btn,
.payment-card-page .payment-card-change-btn {
  position: static !important;

  width: calc(100% - 32px) !important;
  height: 56px !important;

  margin: 36px 16px 0 !important;

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

  box-sizing: border-box !important;
}

/* 버튼 wrapper가 있다면 고정 bottom 해제 */
.card-page .card-action,
.payment-card-page .card-action,
.card-page .card-actions,
.payment-card-page .card-actions {
  position: static !important;
  inset: auto !important;
  margin-top: 36px !important;
  padding: 0 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}



/* =========================================================
   2026-08-29 CARD REGISTERED VIEW SCREEN FIT FINAL
   실제 card.html 구조 기준
   ========================================================= */

.card-page .card-registered-view {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;

  padding: 48px 20px 24px !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
}

/* 카드사 / 카드번호 / PG */
.card-page .card-registered-view .card-info-row {
  width: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  margin: 0 0 28px !important;
}

.card-page .card-registered-view .card-info-row:last-of-type {
  margin-bottom: 0 !important;
}

/* 카드 변경하기 - 정보 바로 아래에서 한 화면에 표시 */
.card-page .card-registered-view .card-change-btn {
  position: static !important;
  inset: auto !important;

  width: 100% !important;
  height: 56px !important;

  margin: 64px 0 0 !important;
  padding: 0 !important;

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

  flex: 0 0 56px !important;

  box-sizing: border-box !important;

  border-radius: 12px !important;
}


/* =========================================================
   2026-08-29 RATE GUIDE NOTICE FINAL
   기존 330px -> 220px
   ========================================================= */

.rate-guide-page .rate-guide-notice {
  margin-top: 220px !important;
  padding-bottom: 20px !important;
}

.rate-guide-page .rate-guide-notice-title {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.rate-guide-page .rate-guide-notice ul {
  margin: 0 !important;
  padding-left: 20px !important;
}



/* =========================================================
   2026-08-29 CARD INFO DIVIDER REMOVE FINAL
   카드정보 행 실선 제거
   ========================================================= */

#cardArea .card-registered-view .card-info-row {
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;

  box-shadow: none !important;
  background-image: none !important;
}

#cardArea .card-registered-view .card-info-row::before,
#cardArea .card-registered-view .card-info-row::after {
  content: none !important;
  display: none !important;
}



/* =========================================================
   2026-08-29 CARD EMPTY VIEW SCREEN FIT FINAL
   카드 미등록 화면 한 화면 안에 표시
   ========================================================= */

#cardArea .card-empty-view {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;

  padding: 72px 22px 24px !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* 느낌표 + 안내문 영역 */
#cardArea .card-empty-center {
  position: static !important;
  inset: auto !important;
  transform: none !important;

  margin: 0 auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* 느낌표 아래 간격 */
#cardArea .card-empty-icon {
  margin: 0 0 20px !important;
}

/* 안내 문구 */
#cardArea .card-empty-title {
  margin: 0 !important;
}

/* 결제 방식 / 등록 용도 / 보안 박스를 위로 */
#cardArea .card-empty-guide {
  position: static !important;
  inset: auto !important;

  width: 100% !important;

  margin: 72px 0 0 !important;
  padding: 18px 22px !important;

  box-sizing: border-box !important;
}

/* 안내 박스 내부 줄 간격 */
#cardArea .card-guide-row {
  min-height: 28px !important;
  margin: 0 !important;
}

/* 카드 등록 버튼을 안내 박스 바로 아래 */
#cardArea .card-register-primary {
  position: static !important;
  inset: auto !important;

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

  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 12px 0 0 !important;
  padding: 0 16px !important;

  box-sizing: border-box !important;
  flex: 0 0 56px !important;
}



/* =========================================================
   2026-08-29 CARD EMPTY VIEW FIGMA 169:16965 FINAL
   ========================================================= */

#cardArea .card-empty-view {
  position: relative !important;

  width: 100% !important;
  height: calc(100dvh - 56px) !important;
  min-height: 0 !important;

  padding: 20px 16px 96px !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 중앙 콘텐츠 그룹 */
#cardArea .card-empty-center {
  position: static !important;
  inset: auto !important;
  transform: none !important;

  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 느낌표 */
#cardArea .card-empty-icon {
  width: 56px !important;
  height: 56px !important;

  margin: 0 0 16px !important;
}

/* 제목 */
#cardArea .card-empty-title {
  margin: 0 !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.72px !important;

  color: #151515 !important;
  text-align: center !important;
}

/* 안내 박스 */
#cardArea .card-empty-guide {
  position: static !important;
  inset: auto !important;

  width: 335px !important;
  max-width: 100% !important;
  height: 122px !important;
  min-height: 122px !important;

  margin: 28px 0 0 !important;
  padding: 20px 24px !important;

  box-sizing: border-box !important;

  background: #F6F6F9 !important;
  border-radius: 16px !important;
}

/* 안내행 */
#cardArea .card-guide-row {
  width: 100% !important;
  min-height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;

  color: #454545 !important;
}

/* 카드 등록 버튼 - Figma 하단 */
#cardArea .card-register-primary {
  position: absolute !important;

  left: 16px !important;
  right: 16px !important;
  bottom: 20px !important;

  width: auto !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

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

  border-radius: 12px !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}


/* 작은 모바일 높이 보정 */
@media (max-height: 740px) {

  #cardArea .card-empty-view {
    padding-top: 8px !important;
    padding-bottom: 88px !important;
  }

  #cardArea .card-empty-guide {
    margin-top: 20px !important;
  }

}



/* =========================================================
   2026-08-29 CARD EMPTY VIEW VIEWPORT FIX FINAL
   header 제외 실제 화면 높이에 정확히 맞춤
   ========================================================= */

/* 카드 본문 영역 자체가 남은 viewport를 사용 */
.card-page #cardArea {
  position: relative !important;

  width: 100% !important;
  height: calc(100dvh - 56px) !important;
  min-height: 0 !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 미등록 화면은 cardArea 높이 그대로 */
.card-page #cardArea .card-empty-view {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 16px 84px !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
}

/* 중앙 내용은 버튼 공간을 고려해서 살짝 위 */
.card-page #cardArea .card-empty-center {
  position: static !important;
  inset: auto !important;
  transform: translateY(-42px) !important;

  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* 느낌표 */
.card-page #cardArea .card-empty-icon {
  width: 56px !important;
  height: 56px !important;

  margin: 0 0 16px !important;
  flex: 0 0 56px !important;
}

/* 제목 */
.card-page #cardArea .card-empty-title {
  margin: 0 !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.72px !important;

  text-align: center !important;
  color: #151515 !important;
}

/* 안내박스도 중앙 그룹에 맞춰 위로 */
.card-page #cardArea .card-empty-guide {
  position: static !important;
  inset: auto !important;

  width: 335px !important;
  max-width: 100% !important;
  height: 122px !important;
  min-height: 122px !important;

  margin: -14px 0 0 !important;
  padding: 20px 24px !important;

  transform: translateY(126px) !important;

  box-sizing: border-box !important;

  background: #F6F6F9 !important;
  border-radius: 16px !important;
}

/* 내부 3줄 */
.card-page #cardArea .card-guide-row {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 등록 버튼은 실제 화면 하단에 고정 */
.card-page #cardArea .card-register-primary {
  position: absolute !important;

  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;

  width: auto !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

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

  box-sizing: border-box !important;

  border-radius: 12px !important;

  z-index: 2 !important;
}


/* 작은 높이 기기에서는 중앙 그룹만 추가 압축 */
@media (max-height: 740px) {

  .card-page #cardArea .card-empty-center {
    transform: translateY(-54px) !important;
  }

  .card-page #cardArea .card-empty-guide {
    transform: translateY(108px) !important;
  }

}



/* =========================================================
   2026-08-29 CARD REGISTERED VIEW VIEWPORT FINAL
   카드 등록 완료 화면 한 화면 안에 표시
   ========================================================= */

.card-page #cardArea .card-registered-view {
  position: relative !important;

  width: 100% !important;
  height: calc(100dvh - 56px) !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 48px 36px 88px !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  overflow: hidden !important;
}

/* 카드사 / 카드번호 / PG */
.card-page #cardArea .card-registered-view .card-info-row {
  width: 100% !important;
  min-height: 28px !important;

  margin: 0 0 28px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

.card-page #cardArea .card-registered-view .card-info-row:last-of-type {
  margin-bottom: 0 !important;
}

/* 혹시 공통 CSS에서 만든 선도 제거 */
.card-page #cardArea .card-registered-view .card-info-row::before,
.card-page #cardArea .card-registered-view .card-info-row::after {
  content: none !important;
  display: none !important;
}

/* 카드 변경하기 - 화면 하단 고정 */
.card-page #cardArea .card-registered-view .card-change-btn {
  position: absolute !important;

  left: 36px !important;
  right: 36px !important;
  bottom: 16px !important;

  width: auto !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

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

  box-sizing: border-box !important;

  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  background: #FFFFFF !important;
  color: #151515 !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}



/* =========================================================
   2026-08-29 CARD PAGE HEADER DIVIDER REMOVE FINAL
   결제카드 관리 화면 헤더 하단 실선 제거
   ========================================================= */

.card-body .app-header,
.card-page .app-header,
body:has(.card-page) .app-header {
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

.card-body .app-header::before,
.card-body .app-header::after,
body:has(.card-page) .app-header::before,
body:has(.card-page) .app-header::after {
  content: none !important;
  display: none !important;
}



/* =========================================================
   2026-08-29 CARD REGISTERED VIEW SCREEN FIX FINAL
   실제 #cardArea 구조 기준
   ========================================================= */

/* 헤더 아래 남은 화면 높이 */
#cardArea {
  position: relative !important;

  width: 100% !important;
  height: calc(100dvh - 56px) !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}


/* 등록 카드 화면 */
#cardArea .card-registered-view {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 48px 36px 92px !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  overflow: hidden !important;
}


/* 카드사 / 카드번호 / PG */
#cardArea .card-registered-view .card-info-row {
  width: 100% !important;
  min-height: 28px !important;

  margin: 0 0 28px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}

#cardArea .card-registered-view .card-info-row:last-of-type {
  margin-bottom: 0 !important;
}

#cardArea .card-registered-view .card-info-row::before,
#cardArea .card-registered-view .card-info-row::after {
  content: none !important;
  display: none !important;
}


/* 카드 변경하기 - 반드시 현재 화면 안쪽 */
#cardArea .card-registered-view .card-change-btn {
  position: absolute !important;

  left: 36px !important;
  right: 36px !important;
  bottom: 20px !important;

  width: auto !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

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

  box-sizing: border-box !important;

  border: 1px solid #E5E5E8 !important;
  border-radius: 12px !important;

  background: #FFFFFF !important;
  color: #151515 !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;

  z-index: 5 !important;
}



/* =========================================================
   2026-08-29 CARD PAGE UNIFIED VIEWPORT FIT FINAL
   등록 전 / 등록 후 공통 한 화면 맞춤
   ========================================================= */

/* 헤더 아래 실제 남은 영역 */
#cardArea {
  position: relative !important;
  width: 100% !important;

  height: calc(100dvh - 56px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 56px) !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}


/* =========================
   카드 미등록 화면
   ========================= */

#cardArea .card-empty-view {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 16px 84px !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* 중앙 컨텐츠를 너무 아래로 두지 않음 */
#cardArea .card-empty-center {
  position: absolute !important;

  left: 50% !important;
  top: 34% !important;

  transform: translate(-50%, -50%) !important;

  width: 100% !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* 느낌표 */
#cardArea .card-empty-icon {
  width: 56px !important;
  height: 56px !important;

  margin: 0 0 16px !important;
}

/* 제목 */
#cardArea .card-empty-title {
  margin: 0 !important;

  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.72px !important;

  text-align: center !important;
}

/* 안내 박스 */
#cardArea .card-empty-guide {
  position: absolute !important;

  left: 16px !important;
  right: 16px !important;
  bottom: 92px !important;

  width: auto !important;
  height: 122px !important;
  min-height: 122px !important;

  margin: 0 !important;
  padding: 20px 24px !important;

  box-sizing: border-box !important;

  background: #F6F6F9 !important;
  border-radius: 16px !important;
}

#cardArea .card-guide-row {
  height: 30px !important;
  min-height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 등록 버튼 */
#cardArea .card-register-primary {
  position: absolute !important;

  left: 16px !important;
  right: 16px !important;
  bottom: 20px !important;

  width: auto !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

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

  box-sizing: border-box !important;

  z-index: 5 !important;
}


/* =========================
   카드 등록 완료 화면
   ========================= */

#cardArea .card-registered-view {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 48px 36px 92px !important;

  box-sizing: border-box !important;

  overflow: hidden !important;
}

#cardArea .card-registered-view .card-info-row {
  width: 100% !important;
  min-height: 28px !important;

  margin: 0 0 28px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#cardArea .card-registered-view .card-info-row:last-of-type {
  margin-bottom: 0 !important;
}

/* 카드 변경 버튼 */
#cardArea .card-registered-view .card-change-btn {
  position: absolute !important;

  left: 36px !important;
  right: 36px !important;
  bottom: 20px !important;

  width: auto !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

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

  box-sizing: border-box !important;

  z-index: 5 !important;
}


/* 낮은 화면에서 중앙내용만 조금 위로 */
@media (max-height: 740px) {
  #cardArea .card-empty-center {
    top: 30% !important;
  }

  #cardArea .card-empty-guide {
    bottom: 86px !important;
  }
}



/* =========================================================
   2026-08-29 NOTICE CLOSE BUTTON RIGHT FINAL
   공지사항 X 버튼 우측 정렬
   ========================================================= */

.notice-list-header {
  position: relative !important;
}

/* 제목은 계속 정중앙 */
.notice-list-header .app-header-title,
.notice-list-header .notice-header-title {
  width: 100% !important;
  text-align: center !important;
}

/* X 버튼만 화면 오른쪽으로 */
.notice-list-header .notice-close-btn {
  position: absolute !important;

  top: 50% !important;
  right: 8px !important;
  left: auto !important;

  width: 40px !important;
  height: 40px !important;

  margin: 0 !important;
  padding: 8px !important;

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

  transform: translateY(-50%) !important;

  border: 0 !important;
  background: transparent !important;

  z-index: 2 !important;
}

.notice-list-header .notice-close-btn svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}



/* =========================================================
   2026-08-29 CARD PAGE STRUCTURE REAL FINAL
   등록 전/등록 후 한 화면 기준
   ========================================================= */

/*
  card.html 실제 구조:
  body.card-page
    app-detail-header
    app-sub-page.more-page
      more-card
        cardArea
*/

/* 페이지 자체를 viewport 하나로 고정 */
body.card-page {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
  box-sizing: border-box !important;

  background: #FFFFFF !important;
}

/* 카드 관리 헤더 = 56px */
body.card-page > .app-detail-header {
  position: relative !important;

  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  flex: 0 0 56px !important;

  margin: 0 !important;

  box-sizing: border-box !important;

  /* 카드 관리 헤더 밑 실선 제거 */
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* 헤더를 제외한 실제 남은 화면 */
body.card-page > .app-sub-page.more-page {
  position: relative !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 기존 more-card의 과도한 높이 제거 */
body.card-page .more-card {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 이제 viewport 계산 금지.
   부모의 실제 남은 높이만 그대로 사용 */
body.card-page #cardArea {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}


/* =========================================================
   카드 미등록
   ========================================================= */

body.card-page #cardArea .card-empty-view {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 16px 92px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 느낌표 + 문구 */
body.card-page #cardArea .card-empty-center {
  position: absolute !important;

  left: 50% !important;
  top: 36% !important;

  width: 100% !important;

  margin: 0 !important;

  transform: translate(-50%, -50%) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

body.card-page #cardArea .card-empty-icon {
  width: 56px !important;
  height: 56px !important;

  margin: 0 0 16px !important;
}

body.card-page #cardArea .card-empty-title {
  margin: 0 !important;

  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.72px !important;

  text-align: center !important;
}

/* 회색 정보박스는 버튼 바로 위 */
body.card-page #cardArea .card-empty-guide {
  position: absolute !important;

  left: 20px !important;
  right: 20px !important;
  bottom: 88px !important;

  width: auto !important;
  height: 122px !important;
  min-height: 122px !important;

  margin: 0 !important;
  padding: 20px 24px !important;

  transform: none !important;

  box-sizing: border-box !important;

  background: #F6F6F9 !important;
  border-radius: 16px !important;
}

/* 카드 등록하기 */
body.card-page #cardArea .card-register-primary {
  position: absolute !important;

  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;

  width: auto !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

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

  box-sizing: border-box !important;
}


/* =========================================================
   카드 등록 완료
   ========================================================= */

body.card-page #cardArea .card-registered-view {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 48px 36px 88px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.card-page #cardArea .card-registered-view .card-info-row {
  width: 100% !important;
  min-height: 28px !important;

  margin: 0 0 28px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.card-page #cardArea .card-registered-view .card-info-row:last-of-type {
  margin-bottom: 0 !important;
}

/* 카드 변경하기 */
body.card-page #cardArea .card-registered-view .card-change-btn {
  position: absolute !important;

  left: 36px !important;
  right: 36px !important;
  bottom: 16px !important;

  width: auto !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

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

  box-sizing: border-box !important;
}


/* 낮은 화면에서도 버튼은 고정하고 중앙 내용만 조금 올림 */
@media (max-height: 740px) {

  body.card-page #cardArea .card-empty-center {
    top: 30% !important;
  }

  body.card-page #cardArea .card-empty-guide {
    height: 112px !important;
    min-height: 112px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}



/* =========================================================
   2026-08-29 CARD EMPTY FIGMA FLOW FINAL
   Figma 169:16965
   제목 바로 아래 안내박스 배치
   ========================================================= */

body.card-page #cardArea .card-empty-view {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 16px 92px !important;

  box-sizing: border-box !important;

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

  overflow: hidden !important;
}

/* 중앙 전체 그룹:
   아이콘 + 제목 + 안내박스 */
body.card-page #cardArea .card-empty-center {
  position: static !important;

  left: auto !important;
  top: auto !important;

  width: 100% !important;

  margin: 0 !important;

  transform: translateY(-38px) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 느낌표 */
body.card-page #cardArea .card-empty-icon {
  width: 56px !important;
  height: 56px !important;

  margin: 0 0 16px !important;
}

/* 제목 */
body.card-page #cardArea .card-empty-title {
  margin: 0 !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.72px !important;

  color: #151515 !important;
  text-align: center !important;
}

/* 기존 absolute 하단 배치 해제 */
body.card-page #cardArea .card-empty-guide {
  position: static !important;

  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;

  width: 335px !important;
  max-width: 100% !important;

  height: 122px !important;
  min-height: 122px !important;

  margin: 28px auto 0 !important;
  padding: 20px 24px !important;

  transform: none !important;

  box-sizing: border-box !important;

  background: #F6F6F9 !important;
  border-radius: 16px !important;
}

/*
  card-empty-guide는 HTML상 center 바깥에 있으므로
  center + guide를 Figma처럼 하나의 중앙 덩어리로 맞춤
*/
body.card-page #cardArea .card-empty-view {
  display: grid !important;

  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;

  align-content: center !important;
  justify-items: center !important;

  row-gap: 28px !important;
}

body.card-page #cardArea .card-empty-center {
  transform: translateY(-38px) !important;
}

body.card-page #cardArea .card-empty-guide {
  margin-top: -38px !important;
}

/* 카드 등록 버튼은 하단 유지 */
body.card-page #cardArea .card-register-primary {
  position: absolute !important;

  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;

  width: auto !important;
  height: 56px !important;

  margin: 0 !important;
}



/* =========================================================
   2026-08-29 SMARTRO BILLING REGISTER UI FINAL
   UI only / Smartro form + payment logic unchanged
   ========================================================= */

body.smartro-register-page {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
  box-sizing: border-box !important;

  background: #FFFFFF !important;
}


/* 상단 */
body.smartro-register-page .smartro-register-header {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  flex: 0 0 56px !important;

  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}


/* 화면 본문 */
body.smartro-register-page .smartro-register-content {
  position: relative !important;

  width: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;

  padding: 0 16px 88px !important;

  box-sizing: border-box !important;

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

  overflow: hidden !important;
}


/* 느낌표 + 제목 + 회색박스 전체 */
body.smartro-register-page .smartro-register-main-group {
  width: 100% !important;

  transform: translateY(-38px) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}


/* 느낌표 */
body.smartro-register-page .smartro-register-icon {
  display: block !important;

  width: 56px !important;
  height: 56px !important;

  margin: 0 0 16px !important;
}


/* 제목 */
body.smartro-register-page .smartro-register-title {
  margin: 0 !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.72px !important;

  color: #151515 !important;
  text-align: center !important;
}


/* 회색 안내박스
   Figma 122px보다 아래 여백을 조금 더 줌 */
body.smartro-register-page .smartro-register-guide {
  width: 335px !important;
  max-width: 100% !important;

  height: 140px !important;
  min-height: 140px !important;

  margin: 28px 0 0 !important;
  padding: 20px 24px 28px !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;

  background: #F6F6F9 !important;
  border-radius: 16px !important;
}


/* 결제 방식 / 등록 용도 / 보안 */
body.smartro-register-page .smartro-register-row {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;

  color: #454545 !important;
}

body.smartro-register-page .smartro-register-row strong {
  font-weight: 500 !important;
  color: #454545 !important;
}


/* 카드 등록하기 */
body.smartro-register-page .smartro-register-submit {
  position: absolute !important;

  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;

  width: auto !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

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

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 12px !important;

  background: #06C58F !important;
  color: #FFFFFF !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}


/* 기존 Smartro form은 기능용이므로 화면에서는 그대로 숨김 */
body.smartro-register-page #tranMgr {
  display: none !important;
}


/* 낮은 화면 */
@media (max-height: 740px) {

  body.smartro-register-page .smartro-register-main-group {
    transform: translateY(-24px) !important;
  }

  body.smartro-register-page .smartro-register-guide {
    height: 132px !important;
    min-height: 132px !important;
    padding-bottom: 20px !important;
  }
}



/* =========================================================
   2026-08-29 SMARTRO REGISTER = CARD MANAGEMENT DESIGN FINAL
   ========================================================= */

body.smartro-register-page {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  font-family: "Pretendard", sans-serif !important;
  background: #ffffff !important;
}


/* 카드 관리와 동일한 상단 헤더 */
body.smartro-register-page > .app-detail-header {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  flex: 0 0 56px !important;

  margin: 0 !important;

  border: 0 !important;
  box-shadow: none !important;

  background: #ffffff !important;
}


/* 헤더 아래 전체 영역 */
body.smartro-register-page .smartro-card-page {
  width: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;

  padding: 34px 0 0 !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}


/* 두 번째 화면의 큰 흰 카드 영역 */
body.smartro-register-page .smartro-card-panel {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 16px 88px !important;

  box-sizing: border-box !important;

  border: 1px solid #eeeeef !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;

  background: #ffffff !important;

  overflow: hidden !important;
}


/* 느낌표 + 제목 + 회색영역 */
body.smartro-register-page .smartro-register-center {
  position: absolute !important;

  left: 16px !important;
  right: 16px !important;
  top: 50% !important;

  transform: translateY(-56%) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}


/* 느낌표 */
body.smartro-register-page .smartro-register-icon {
  display: block !important;

  width: 48px !important;
  height: 48px !important;

  margin: 0 0 20px !important;
}


/* 등록 안내 제목 */
body.smartro-register-page .smartro-register-title {
  margin: 0 !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.72px !important;

  color: #151515 !important;
  text-align: center !important;
}


/* 회색 정보영역 */
body.smartro-register-page .smartro-register-guide {
  width: 100% !important;
  max-width: 335px !important;

  height: 140px !important;
  min-height: 140px !important;

  margin: 28px 0 0 !important;
  padding: 18px 24px 28px !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;

  background: #f6f6f9 !important;
  border-radius: 16px !important;
}


/* 결제방식 / 등록용도 / 보안 */
body.smartro-register-page .smartro-register-row {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;

  color: #454545 !important;
}

body.smartro-register-page .smartro-register-row strong {
  font: inherit !important;
  color: #454545 !important;
}


/* 카드 등록하기 */
body.smartro-register-page .smartro-register-submit {
  position: absolute !important;

  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;

  width: auto !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 16px !important;

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

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 12px !important;

  background: #06C58F !important;
  color: #ffffff !important;

  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
}


/* Smartro 제출 form은 기능만 유지 */
body.smartro-register-page #tranMgr {
  display: none !important;
}


/* =========================================================
   2026-08-29 CHARGING STEP VISIBILITY FIX
   UI only - charging logic unchanged
   ========================================================= */

.charging-web-page .app-hidden {
  display: none !important;
}


/* =========================================================
   2026-08-29 CHARGING STEP VISIBILITY FINAL FIX
   UI visibility only - charging logic unchanged
   ========================================================= */

#stepInput.app-hidden,
#stepWaiting.app-hidden,
#stepCharging.app-hidden {
  display: none !important;
}


.notice-detail-image {
  padding: 0 20px 30px;
}

.notice-detail-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
  object-fit: contain;
}


/* 공지사항 이미지 */
.notice-detail-image {
  margin: 16px 20px 30px !important;
  text-align: center !important;
}

.notice-detail-image img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* =========================================================
   회원 탈퇴
   ========================================================= */

.profile-detail-withdraw {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: #e5484d;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.profile-detail-withdraw:active {
  opacity: 0.65;
}

.withdraw-form {
  padding-top: 24px;
}

.withdraw-notice {
  margin-bottom: 28px;
  padding: 20px;
  border-radius: 12px;
  background: #f7f7f7;
  color: #555;
  font-size: 14px;
  line-height: 1.55;
}

.withdraw-notice strong {
  display: block;
  margin-bottom: 14px;
  color: #222;
  font-size: 16px;
  font-weight: 700;
}

.withdraw-notice p {
  position: relative;
  margin: 8px 0 0;
  padding-left: 14px;
}

.withdraw-notice p::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
}

.withdraw-submit {
  margin-top: 24px;
}

#withdrawPage .withdraw-submit.app-btn-primary {
  background: #e5484d;
  border-color: #e5484d;
  color: #fff;
}

#withdrawPage .withdraw-submit.app-btn-primary:active {
  opacity: 0.8;
}


/* 회원 탈퇴 버튼 - 로그아웃과 동일한 왼쪽 정렬 */
.profile-detail-withdraw {
  width: auto;
  margin: 16px 0 0;
  padding: 0;
  text-align: left;
  font-size: inherit;
  font-weight: inherit;
}


/* =========================================================
   2026-09-09 WEB COMMON CHROME FINAL
   Charging / History / More
   UI geometry only
   ========================================================= */

/* ---------- Charging + History common header ---------- */
.charging-web-page #stepInput .charge-input-header,
body:has(.history-page) > .app-logo-header {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
}

.charging-web-page #stepInput .charge-header-logo img,
body:has(.history-page) > .app-logo-header > img {
  display: block !important;
  width: 88px !important;
  height: auto !important;
  margin: 0 !important;
}

.charging-web-page #stepInput .charge-cs-link,
body:has(.history-page) > .app-logo-header .logout {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.32px !important;
  color: #454545 !important;
  text-decoration: none !important;
}

/* ---------- Bottom navigation: all three screens ---------- */
:root {
  --app-bottom-nav-height: 68px;
  --gridx-common-bottom-nav-height: 68px;
}

.app-bottom-nav,
.charging-web-page + .app-bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: calc(68px + env(safe-area-inset-bottom)) !important;
  padding: 0 0 env(safe-area-inset-bottom) !important;
  box-sizing: border-box !important;
  display: flex !important;
  background: #ffffff !important;
  border-top: 1px solid #eeeeee !important;
  z-index: 50 !important;
}

.app-bottom-nav a,
.app-bottom-nav button,
.charging-web-page + .app-bottom-nav a {
  flex: 1 1 0 !important;
  height: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

.app-bottom-nav .icon,
.charging-web-page + .app-bottom-nav .icon {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 24px !important;
}

.app-bottom-nav .icon img,
.app-bottom-nav .icon svg,
.charging-web-page + .app-bottom-nav .icon img,
.charging-web-page + .app-bottom-nav .icon svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

.app-bottom-nav a.active,
.charging-web-page + .app-bottom-nav a.active {
  color: #009c8a !important;
  font-weight: 700 !important;
}



/* =========================================================
   GRIDX GRIDON BRAND TAGLINE 2026-09-14
   Logo UI only
   ========================================================= */

.gridx-brand-lockup {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

.gridx-brand-tagline {
  display: block !important;
  margin-top: 2px !important;
  padding: 0 !important;
  color: #8c8c8c !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.18px !important;
  white-space: nowrap !important;
}


/* ---------- Login ---------- */

.login-page .login-brand-lockup {
  width: 175px !important;
  margin: 120px auto 20px !important;
}

.login-page .login-brand-lockup .login-logo {
  width: 175px !important;
  height: 48px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
}

.login-page .login-brand-lockup .gridx-brand-tagline {
  font-size: 10px !important;
  letter-spacing: -0.2px !important;
}


/* ---------- Charging input ---------- */

.charging-web-page #stepInput .charge-header-logo {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.charging-web-page #stepInput .charge-header-logo img {
  width: 88px !important;
  height: auto !important;
  margin: 0 !important;
}

.charging-web-page #stepInput .charge-header-logo .gridx-brand-tagline {
  font-size: 9px !important;
}


/* ---------- Charging waiting / running ---------- */

.charging-web-page .charging-page-header .charging-brand-lockup {
  min-width: 78px !important;
}

.charging-web-page .charging-page-header .charging-brand-lockup img {
  display: block !important;
  width: 78px !important;
  height: auto !important;
  margin: 0 !important;
}

.charging-web-page .charging-page-header .charging-brand-lockup .gridx-brand-tagline {
  font-size: 9px !important;
}


/* ---------- History ---------- */

body:has(.history-page) > .app-logo-header .history-brand-lockup {
  width: 88px !important;
}

body:has(.history-page) > .app-logo-header .history-brand-lockup img {
  display: block !important;
  width: 88px !important;
  height: auto !important;
  margin: 0 !important;
}

body:has(.history-page) > .app-logo-header .history-brand-lockup .gridx-brand-tagline {
  font-size: 9px !important;
}


/* =========================================================
   GRIDX BRAND TAGLINE TIGHT FINAL 2026-09-15
   Visual spacing only
   ========================================================= */

.gridx-brand-tagline {
  margin-top: 0 !important;
  transform: translateY(-4px) !important;
  font-size: 8px !important;
  line-height: 0.9 !important;
}

/* Login */
.login-page .login-brand-lockup .gridx-brand-tagline {
  font-size: 8.8px !important;
  transform: translateY(-4px) !important;
}

/* Charging input */
.charging-web-page #stepInput
.charge-header-logo
.gridx-brand-tagline {
  font-size: 8px !important;
  transform: translateY(-4px) !important;
}

/* Charging waiting / charging */
.charging-web-page
.charging-page-header
.charging-brand-lockup
.gridx-brand-tagline {
  font-size: 8px !important;
  transform: translateY(-4px) !important;
}

/* History */
body:has(.history-page)
> .app-logo-header
.history-brand-lockup
.gridx-brand-tagline {
  font-size: 8px !important;
  transform: translateY(-4px) !important;
}


/* =========================================================
   GRIDX BRAND TAGLINE CLOSER VISIBLE FINAL 2026-09-15
   Visual spacing only
   ========================================================= */

.gridx-brand-tagline {
  margin-top: 0 !important;
  transform: translateY(-6px) !important;
  font-size: 8.8px !important;
  line-height: 0.92 !important;
  letter-spacing: -0.15px !important;
  color: #7a7a7a !important;
}

/* Login */
.login-page .login-brand-lockup .gridx-brand-tagline {
  font-size: 9.4px !important;
  transform: translateY(-6px) !important;
  color: #7a7a7a !important;
}

/* Charging input */
.charging-web-page #stepInput .charge-header-logo .gridx-brand-tagline {
  font-size: 8.8px !important;
  transform: translateY(-6px) !important;
  color: #7a7a7a !important;
}

/* Charging waiting / charging */
.charging-web-page .charging-page-header .charging-brand-lockup .gridx-brand-tagline {
  font-size: 8.8px !important;
  transform: translateY(-6px) !important;
  color: #7a7a7a !important;
}

/* History */
body:has(.history-page) > .app-logo-header .history-brand-lockup .gridx-brand-tagline {
  font-size: 8.8px !important;
  transform: translateY(-6px) !important;
  color: #7a7a7a !important;
}


/* =========================================================
   GRIDX BRAND TAGLINE WEB MATCH APP FINAL 2026-09-15
   Match Flutter app header feel
   Login excluded
   ========================================================= */

/* tagline 부모를 기준점으로 */
.gridx-brand-lockup,
.charging-web-page #stepInput .charge-header-logo {
  position: relative !important;
  display: inline-block !important;
}

/* 공통 tagline: 앱과 비슷하게 더 붙이고 더 진하게 */
.gridx-brand-tagline {
  position: absolute !important;
  left: 50% !important;
  bottom: 3px !important;
  transform: translateX(-50%) !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #5F5F5F !important;
  font-size: 9.8px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.15px !important;

  white-space: nowrap !important;
  pointer-events: none !important;
}

/* 충전 입력 */
.charging-web-page #stepInput .charge-header-logo .gridx-brand-tagline {
  bottom: 3px !important;
  font-size: 9.8px !important;
  font-weight: 500 !important;
}

/* 충전 대기 / 충전중 */
.charging-web-page .charging-page-header .charging-brand-lockup .gridx-brand-tagline {
  bottom: 3px !important;
  font-size: 9.8px !important;
  font-weight: 500 !important;
}

/* 충전내역 */
body:has(.history-page) > .app-logo-header .history-brand-lockup .gridx-brand-tagline {
  bottom: 3px !important;
  font-size: 9.8px !important;
  font-weight: 500 !important;
}

/* 로그인은 미사용 */
.login-page .gridx-brand-tagline {
  display: none !important;
}


/* =========================================================
   GRIDX TAGLINE HORIZONTAL ALIGN FIX 2026-09-15
   ========================================================= */

/* 충전 입력 화면 */
.charging-web-page #stepInput .charge-header-logo {
  width: 88px !important;
}

.charging-web-page #stepInput .charge-header-logo .gridx-brand-tagline {
  left: 0 !important;
  right: 0 !important;
  width: 88px !important;
  transform: none !important;
  text-align: center !important;
  bottom: 3px !important;
}

/* 충전 대기 / 충전중 */
.charging-web-page .charging-page-header .charging-brand-lockup {
  width: 78px !important;
  min-width: 78px !important;
}

.charging-web-page .charging-page-header .charging-brand-lockup .gridx-brand-tagline {
  left: 0 !important;
  right: 0 !important;
  width: 78px !important;
  transform: none !important;
  text-align: center !important;
  bottom: 3px !important;
}

/* 충전내역 */
body:has(.history-page) > .app-logo-header .history-brand-lockup {
  width: 88px !important;
}

body:has(.history-page) > .app-logo-header .history-brand-lockup .gridx-brand-tagline {
  left: 0 !important;
  right: 0 !important;
  width: 88px !important;
  transform: none !important;
  text-align: center !important;
  bottom: 3px !important;
}