/* 커피빌리지 주문 화면 - 모바일 퍼스트 반응형 스타일
   css/styles.css(Bootstrap 5 기반) 위에 얹는 페이지 전용 커스텀 스타일.
   고정 px 대신 rem/%/clamp()를 사용해 320px~ 화면에서도 깨지지 않도록 함. */

/* 테마: config.json의 "theme" 값에 따라 cv.js가 <html>에 theme-* 클래스를 붙인다.
   :root(클래스 적용 전 기본값)와 .theme-coffee는 원래 커피 테마와 동일. */
:root,
html.theme-coffee {
  --cv-primary-900: #3b2417;
  --cv-primary-700: #6f4e37;
  --cv-primary-600: #8a6244;
  --cv-primary-400: #b08968;
  --cv-primary-200: #e8d5c4;
  --cv-bg: #fbf4ec;
  --cv-bg-input: #fffaf4;
  --cv-sage: #7a8b69;
  --cv-sage-dark: #5f6f50;
  --cv-terracotta: #b5524a;
  --cv-terracotta-dark: #954139;
}

/* 파란색 계열 테마 */
html.theme-blue {
  --cv-primary-900: #14304d;
  --cv-primary-700: #2c6cad;
  --cv-primary-600: #3f82c4;
  --cv-primary-400: #7fb0dc;
  --cv-primary-200: #d9ebf8;
  --cv-bg: #f2f8fc;
  --cv-bg-input: #fbfdff;
  --cv-sage: #7a8b69;
  --cv-sage-dark: #5f6f50;
  --cv-terracotta: #b5524a;
  --cv-terracotta-dark: #954139;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--cv-bg);
  color: var(--cv-primary-900);
}

/* ---- 버튼/셀렉트/입력창 공통 테마 (커피 톤) ---- */
.btn-primary {
  --bs-btn-bg: var(--cv-primary-700);
  --bs-btn-border-color: var(--cv-primary-700);
  --bs-btn-hover-bg: var(--cv-primary-600);
  --bs-btn-hover-border-color: var(--cv-primary-600);
  --bs-btn-active-bg: var(--cv-primary-900);
  --bs-btn-active-border-color: var(--cv-primary-900);
  --bs-btn-disabled-bg: var(--cv-primary-200);
  --bs-btn-disabled-border-color: var(--cv-primary-200);
  background-color: var(--cv-primary-700);
  border-color: var(--cv-primary-700);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cv-primary-600);
  border-color: var(--cv-primary-600);
}

.btn-outline-success {
  --bs-btn-color: var(--cv-sage-dark);
  --bs-btn-border-color: var(--cv-sage);
  --bs-btn-hover-bg: var(--cv-sage);
  --bs-btn-hover-border-color: var(--cv-sage);
  color: var(--cv-sage-dark);
  border-color: var(--cv-sage);
}
.btn-outline-success:hover {
  background-color: var(--cv-sage);
  border-color: var(--cv-sage);
}

.btn-outline-secondary {
  --bs-btn-color: var(--cv-primary-700);
  --bs-btn-border-color: var(--cv-primary-400);
  --bs-btn-hover-bg: var(--cv-primary-400);
  --bs-btn-hover-border-color: var(--cv-primary-400);
  color: var(--cv-primary-700);
  border-color: var(--cv-primary-400);
}
.btn-outline-secondary:hover {
  background-color: var(--cv-primary-400);
  border-color: var(--cv-primary-400);
  color: #fff;
}

.btn-outline-danger {
  --bs-btn-color: var(--cv-terracotta-dark);
  --bs-btn-border-color: var(--cv-terracotta);
  --bs-btn-hover-bg: var(--cv-terracotta);
  --bs-btn-hover-border-color: var(--cv-terracotta);
  color: var(--cv-terracotta-dark);
  border-color: var(--cv-terracotta);
}

.btn-outline-light {
  --bs-btn-color: var(--cv-bg);
  --bs-btn-border-color: var(--cv-primary-400);
  --bs-btn-hover-bg: var(--cv-primary-700);
  --bs-btn-hover-border-color: var(--cv-primary-400);
  color: var(--cv-bg);
  border-color: var(--cv-primary-400);
}

select,
input[type="text"],
input[type="number"],
input[type="password"],
.form-control {
  background-color: var(--cv-bg-input);
  border-color: var(--cv-primary-400);
  color: var(--cv-primary-900);
}
select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
.form-control:focus {
  border-color: var(--cv-primary-700);
  box-shadow: 0 0 0 0.2rem rgba(111, 78, 55, 0.2);
}
select {
  border: 1px solid var(--cv-primary-400);
  border-radius: 0.3rem;
  padding: 0.3rem 0.5rem;
}

* {
  max-width: 100%;
}

select {
  font-size: 1.1rem;
  cursor: pointer;
}

button {
  cursor: pointer;
}

th {
  font-size: 0.8rem;
  text-align: center;
}

input::placeholder {
  color: #ccc;
  font-size: 0.85em;
}

a,
a:link,
a:visited {
  font-size: 1rem;
  color: var(--cv-primary-700);
}
a:hover {
  color: var(--cv-terracotta);
}

/* 모든 텍스트/숫자 입력은 16px 이상 유지 (iOS 자동 확대 방지) */
input[type="text"],
input[type="number"],
input[type="password"],
select,
.form-control {
  font-size: 1rem;
}

.container {
  width: 100%;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  margin-right: auto;
  margin-left: auto;
}

.navbar {
  padding: 0.25rem;
  margin: 0.25rem 0;
}

.white,
.white a {
  color: #fff;
}

.ui-menu-item {
  font-size: clamp(1rem, 4vw, 1.3rem);
  color: var(--cv-primary-700);
  padding: 0.4rem;
}

.order-row-wrap {
  display: block;
  width: 100%;
}

/* 주문 입력 행: 한 줄 유지, 화면이 좁으면 줄바꿈 대신 가로 스크롤 */
.order-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.3rem;
  width: 100%;
  margin-bottom: 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.order-row > * {
  flex: 0 0 auto;
}
#phone0 {
  flex: 0 0 auto;
  min-width: 2.5rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
}
#m_phone {
  /* .form-control의 width:100%가 flex-basis:auto에 그대로 반영되어 버튼을 밀어내므로 basis는 0%로 고정 */
  flex: 1 1 0%;
  min-width: 4rem;
  text-align: left;
  font-size: 1.1rem;
  font-weight: bold;
  background-color: var(--cv-bg-input);
}
#send {
  /* 고정폭 유지: m_phone(핸드폰번호)이 shrink 경쟁 없이 남는 공간을 전부 가져가도록 함 */
  flex: 0 0 4.5rem;
  min-height: 2.75rem;
  font-size: 1.1rem;
  font-weight: bold;
}
.icon-btn {
  flex: 0 0 auto;
  min-width: 1.25rem;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  text-decoration: none;
  background-color: var(--cv-primary-200);
  border: 1px solid var(--cv-primary-400);
  border-radius: 0.25rem;
}
#takeout {
  /* 고정폭 유지: m_phone(핸드폰번호)이 shrink 경쟁 없이 남는 공간을 전부 가져가도록 함.
     number 입력의 스핀 화살표를 빼도 최소 한 자리 숫자는 잘리지 않도록 폭/여백 확보 */
  flex: 0 0 3.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: var(--cv-bg-input);
  text-align: center;
}
.order-row .input-group-text {
  flex: 0 0 auto;
  font-size: 0.8rem;
  padding: 0.375rem 0.4rem;
  white-space: nowrap;
  background-color: var(--cv-primary-200);
  border: 1px solid var(--cv-primary-400);
  color: var(--cv-primary-900);
  border-radius: 0.25rem;
}
.label-2line {
  min-width: 1.4rem;
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.1;
}
.icon-refresh,
.icon-plus,
.icon-call,
.icon-time {
  font-style: normal;
}

/* 휴대폰 번호 입력란 포커스 중: 줄바꿈 없이 남는 공간을 전부 입력란에 몰아주기 위해
   당장 필요 없는 보조 요소(⏱ 리셋 아이콘, 도착 라벨)를 잠시 숨김.
   #m_phone은 이미 flex-grow:1이라 별도 폭 계산 없이 비워진 공간을 그대로 차지함 */
.order-row.phone-focused .icon-time,
.order-row.phone-focused .label-2line {
  display: none;
}

/* 주문 버튼 옆 카드/현금 체크박스: 기본 크기가 너무 작아 잘 눌리지 않아서 확대 */
.order-row .form-check {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
}
.order-row #ck_pay {
  width: 1.8rem;
  height: 1.8rem;
  margin: 0;
  cursor: pointer;
}

.c_menu {
  font-size: 1.1rem;
  min-height: 2.75rem;
  margin: 0.1rem 0;
  width: 100%;
}
.qtyGroup {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.qtyGroup span {
  display: flex;
  align-items: center;
}
.c_psu {
  font-size: 1.1rem;
  font-weight: bold;
  flex: 1 1 auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0.1rem 0;
  text-align: center;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
/* 메뉴 줄 삭제(➖) 버튼: 로그아웃 버튼과 같은 크기로 축소 */
.delBtn {
  flex: 0 0 1.875rem;
  width: 1.875rem;
  min-height: 1.375rem;
  padding: 0.15rem 0.25rem;
  font-size: 0.85rem;
}

#menuTable {
  width: 100%;
  min-width: 22rem;
  margin-top: 0.25rem;
  table-layout: fixed;
}
#menuTable td {
  padding: 0.15rem;
  margin: 0.1rem;
}
#menuTable th {
  padding: 0.4rem 0.2rem;
}
.col-n {
  width: 1.5rem;
}
.col-menu {
  width: auto;
}
.col-psu {
  width: 7rem;
}

/* 모바일에서 자리(줄) 바꿈 없이 한 줄 유지, 넘치면 가로 스크롤 */
.menuToolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.menuToolbar .btn {
  flex: 0 0 auto;
  min-height: 1.7rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  font-size: 0.75rem;
  white-space: nowrap;
  margin: 0;
}
#addItemBtn {
  font-weight: bold;
  min-width: 1.9rem;
  padding-left: 0.3rem !important;
  padding-right: 0.3rem !important;
}
#hiBtn {
  font-weight: bold;
}

.c_opBtn {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.15;
  min-width: 2.75rem;
  min-height: 2.75rem;
  cursor: pointer;
  padding: 0.2rem 0.25rem;
  /* 부트스트랩 .input-group의 연결형(margin-left:-1px, 좌측 radius 제거) 스타일을 덮어써서 입력란과 확실히 떨어지게 함 */
  margin-left: 0.5rem !important;
  border-radius: 0.25rem !important;
}

.c_best {
  width: 100%;
}
.c_best td {
  border: 1px solid var(--cv-primary-400);
  background-color: var(--cv-bg-input);
  font-size: clamp(1rem, 4vw, 1.4rem);
  font-weight: bold;
  color: var(--cv-primary-700);
  text-align: center;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.c_best td:hover {
  background-color: var(--cv-primary-700);
  color: #fff;
}

.c_item {
  color: var(--cv-primary-700);
  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
  cursor: pointer;
  padding: 0.3rem;
  display: inline-block;
  text-decoration: none;
}

.c_pend {
  font-size: 1.2rem;
  text-align: center;
  display: block;
  padding: 0.25rem;
}
.c_daytoggle {
  cursor: pointer;
  text-decoration: underline;
  color: var(--cv-primary-700);
}

.c_n {
  text-align: right;
  width: 1.5rem;
  min-width: 1.5rem;
  padding-right: 0.25rem !important;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--cv-primary-900);
}
.c_no {
  cursor: pointer;
}
.c_phone {
  cursor: pointer;
  color: var(--cv-primary-700);
}
.c_sno,
.c_kd {
  width: 1.9rem;
  text-align: center;
}

.c_st0 {
  background-color: var(--cv-bg-input);
  cursor: pointer;
}
.c_st1 {
  background-color: var(--cv-primary-200);
}
.c_st2 {
  background-color: #dde6d5;
}
.c_st4 {
  background-color: #f6e2b8;
}
.c_st9 {
  background-color: #ecc9c5;
}

.c_clk {
  color: var(--cv-primary-700);
  cursor: pointer;
}
.c_re {
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--cv-primary-700);
  font-weight: bold;
}

/* 서버가 렌더링하는 주문 내역 표: 좁은 화면에서는 표 자체만 가로 스크롤 */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}
.c_table {
  width: 100%;
  min-width: 22rem;
  border-collapse: collapse;
}
.c_table td {
  border: none;
  padding: 0.5rem 0.35rem;
  margin: 0;
  font-size: clamp(0.85rem, 3.2vw, 1.1rem);
  white-space: nowrap;
  vertical-align: middle;
}
/* 모든 줄에 같은 굵기/색의 테두리를 둘러서 표 전체 테두리 선이 균일하게 보이도록 함 */
.c_table tr {
  outline: 1px solid var(--cv-primary-400);
  outline-offset: -1px;
}
.c_su {
  font-weight: bold;
  text-align: center;
  font-size: clamp(1rem, 4vw, 1.3rem) !important;
}
.c_md {
  cursor: pointer;
  color: red;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  font-size: clamp(0.75rem, 2.8vw, 0.95rem) !important;
}
.c_mon {
  text-align: right;
  cursor: pointer;
  font-weight: bold;
  color: var(--cv-primary-700);
}
.c_po {
  cursor: pointer;
  color: var(--cv-primary-700);
  font-weight: bold;
}
.c_list,
.p_list,
.g_list {
  width: 100%;
  padding: 0;
  margin: 0;
}
.p_list table td {
  cursor: pointer;
}
.g_list .table-bordered,
.p_list .table-bordered {
  border-color: var(--cv-primary-200);
}
.g_list .table-bordered > :not(caption) > *,
.p_list .table-bordered > :not(caption) > * {
  border-width: 0 0 1px 0;
}
.g_list .table-bordered > :not(caption) > * > *,
.p_list .table-bordered > :not(caption) > * > * {
  border-width: 0 0 1px 0;
  padding: 0.4rem 0.5rem;
}

.ctrlRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0;
}
.ctrlRow-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.ctrlRow-left .btn {
  margin: 0;
}
.ctrlRow-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.c_npsu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  min-height: 2.75rem;
  color: var(--cv-primary-400);
}
#coid {
  width: 20px;
  min-width: 20px;
  flex: 0 0 20px;
  min-height: 2.75rem;
  text-align: center;
  border: 5px solid transparent;
  border-radius: 0.25rem;
  background-color: var(--cv-bg-input);
}
#coid:focus {
  border-color: transparent;
  box-shadow: none;
}

.admDiv {
  display: none;
}
.admBtnRow {
  /* 빠른입력 버튼이 설정에서 계속 늘어날 수 있어 nowrap+가로스크롤 대신 줄바꿈으로 항상 화면 폭 안에 들어오게 함 */
  flex-wrap: wrap;
  /* 기본값(stretch)이면 크기를 줄인 버튼도 옆의 큰 버튼 높이에 맞춰 늘어나 버리므로 각자 높이를 쓰게 함 */
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  padding-bottom: 0.25rem;
}
.admDiv .btn {
  min-height: 2.75rem;
  margin: 0.15rem;
}
.admBtnRow .btn {
  flex: 0 0 auto;
  min-width: 3.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin: 0;
}
/* 상태 필터(주문/진행/완료/전체/취소) 버튼: 이모지 제거 후 축소했던 크기를 다시 1.3배 정도로 확대
   (.admBtnRow .btn과 명시도를 맞추기 위해 .admBtnRow를 붙임) */
.admBtnRow .stBtn {
  min-width: 3.25rem;
  min-height: 2.6rem;
  padding: 0.26rem 0.455rem;
  font-size: 1.1rem;
}
/* 로그아웃(나가기)/설정/P 버튼: 크기를 절반 정도로 축소 */
#logoutBtn,
#settingsBtn,
#pointBtn {
  min-width: 1.875rem;
  min-height: 1.375rem;
  padding: 0.15rem 0.25rem;
  font-size: 0.85rem;
}
/* 빠른입력 버튼(A,B,C...): 눈에 잘 띄는 색상 + 주문/진행 버튼과 같은 높이.
   버튼이 계속 늘어날 수 있어 폭은 좁게(min-width를 .admBtnRow .btn 기본값보다 줄임)
   (.admBtnRow .btn/.btn-primary보다 명시도를 높이기 위해 .admBtnRow를 붙임) */
.admBtnRow .quickDynBtn {
  min-width: 2rem;
  min-height: 2.6rem;
  padding: 0.26rem 0.4rem;
  font-size: 1.05rem;
  font-weight: bold;
  background-color: var(--cv-terracotta);
  border-color: var(--cv-terracotta-dark);
  color: #fff;
}
.admBtnRow .quickDynBtn:hover,
.admBtnRow .quickDynBtn:focus {
  background-color: var(--cv-terracotta-dark);
  border-color: var(--cv-terracotta-dark);
  color: #fff;
}

#div_timer {
  font-size: 1.2rem;
  display: none;
}
#sMsg {
  float: left;
  width: 100%;
  font-size: 1.2rem;
}
#serverMsg {
  text-align: left;
  padding: 0;
  font-size: 1rem;
}
.msgDiv {
  font-size: 1.2rem;
  font-weight: bold;
  padding-left: 0.75rem;
}
.c_calAmt {
  color: var(--cv-primary-700);
  text-decoration: underline;
  cursor: pointer;
}
#m_n {
  color: var(--cv-primary-700);
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
  .c_item {
    width: 8rem;
  }
}

/* ---- 설정 모달 스타일 ---- */
.cv-modal {
  display: none;
  position: fixed;
  z-index: 1050;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  padding: 1rem;
}

.cv-modal-content {
  background-color: var(--cv-bg);
  margin: 5% auto;
  border: 1px solid var(--cv-primary-400);
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.cv-modal-header {
  padding: 1rem 1.5rem;
  background-color: var(--cv-primary-900);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cv-modal-header h4 {
  margin: 0;
  font-size: 1.25rem;
}

.cv-modal-close {
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

.cv-modal-close:hover {
  color: var(--cv-primary-200);
}

.cv-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex-grow: 1;
}

.cv-modal-footer {
  padding: 1rem 1.5rem;
  background-color: var(--cv-primary-200);
  border-top: 1px solid var(--cv-primary-400);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.settings-section {
  background-color: var(--cv-bg-input);
  border: 1px solid var(--cv-primary-200);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.settings-section h5 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--cv-primary-700);
  border-bottom: 2px solid var(--cv-primary-400);
  padding-bottom: 0.3rem;
  font-size: 1rem;
  font-weight: bold;
}

.settings-row {
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.settings-row label {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--cv-primary-700);
}

.settings-row input,
.settings-row select,
.settings-section textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--cv-primary-400);
  border-radius: 6px;
  background-color: #fff;
  box-sizing: border-box;
}

.settings-row input:focus,
.settings-row select:focus,
.settings-section textarea:focus {
  outline: none;
  border-color: var(--cv-primary-700);
  box-shadow: 0 0 0 3px rgba(111, 78, 55, 0.2);
}

/* 빠른입력 버튼(A,B,C...) 설정 편집기: 이동/이름/내용/삭제를 한 줄에 배치 */
.qb-editor-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.qb-editor-row .qb-move {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.qb-editor-row .qb-move button {
  min-width: 1.75rem;
  min-height: 1.1rem;
  padding: 0;
  line-height: 1;
  font-size: 0.7rem;
}
.qb-editor-row .qb-name {
  flex: 0 0 5rem;
  width: 5rem;
}
.qb-editor-row .qb-content {
  flex: 1 1 auto;
}
.qb-editor-row .qb-remove {
  flex: 0 0 auto;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.5rem;
}

/* ---- 전화번호 저장 방식 선택 레이어 (Modal) ---- */
.phone-layer-content {
  max-width: 440px;
  margin: 8% auto;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  animation: cvLayerFadeIn 0.25s ease-out;
}

@keyframes cvLayerFadeIn {
  from {
    opacity: 0;
    transform: translateY(-15px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.phone-layer-body {
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.phone-layer-info {
  margin-bottom: 1.25rem;
}

.phone-layer-icon {
  font-size: 2.2rem;
  margin-bottom: 0.3rem;
}

.phone-layer-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cv-primary-900);
  margin-bottom: 0.6rem;
}

.phone-number-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--cv-primary-200);
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  margin-bottom: 0.75rem;
  border: 1px solid var(--cv-primary-400);
}

.phone-number-badge .phone-label {
  font-size: 0.85rem;
  color: var(--cv-primary-700);
}

.phone-number-badge .phone-val {
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--cv-terracotta-dark);
  letter-spacing: 0.5px;
}

.phone-layer-desc {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.45;
  margin-bottom: 0;
}

.phone-layer-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.phone-opt-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  text-align: left;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.phone-opt-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.phone-opt-btn .opt-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.2rem;
}

.phone-opt-btn .opt-sub {
  font-size: 0.8rem;
  opacity: 0.85;
  font-weight: normal;
}

.phone-layer-footer {
  justify-content: center;
}

/* ---- 숫자 키패드 플로팅 레이어 (클릭 위치 근처 팝업, 화면차단 없음) ---- */
#numberKeypadLayer {
  display: none;
  position: absolute;
  z-index: 1040;
  width: 320px;
  max-width: 90vw;
  pointer-events: none; /* 배경 클릭/타이핑 허용 */
}

.keypad-layer-content {
  pointer-events: auto;
  background-color: var(--cv-bg);
  border: 2px solid var(--cv-primary-700);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: cvLayerSlideUp 0.2s ease-out;
}

@keyframes cvLayerSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.keypad-layer-header {
  padding: 0.5rem 1rem;
  background-color: var(--cv-primary-900);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.keypad-layer-header:active {
  cursor: grabbing;
}

.keypad-header-title {
  font-size: 0.95rem;
  font-weight: bold;
}

.keypad-layer-body {
  padding: 0.75rem;
}

.keypad-display-wrap {
  margin-bottom: 0.5rem;
}

#keypadDisplay.keypad-display-input {
  font-size: 3.2rem !important;
  font-weight: 800 !important;
  text-align: right !important;
  letter-spacing: 1px;
  height: 5.2rem !important;
  line-height: 5.2rem !important;
  background-color: #ffffff !important;
  border: 2.5px solid var(--cv-primary-700) !important;
  border-radius: 8px;
  color: var(--cv-primary-900) !important;
  padding: 0.2rem 0.8rem !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.keypad-display-input:focus {
  outline: none;
  background-color: #ffffff;
  border-color: var(--cv-primary-900);
  box-shadow: 0 0 0 3px rgba(111, 78, 55, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.keypad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

.keypad-btn {
  font-size: 1.25rem;
  font-weight: 600;
  height: 2.9rem;
  border-radius: 8px;
  background-color: var(--cv-bg-input);
  border: 1px solid var(--cv-primary-400);
  color: var(--cv-primary-900);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.1s ease, transform 0.05s ease;
  user-select: none;
  touch-action: manipulation;
}

.keypad-btn:active {
  transform: scale(0.95);
  background-color: var(--cv-primary-200);
}

.keypad-special-btn {
  background-color: var(--cv-primary-200);
  color: var(--cv-primary-900);
  font-weight: bold;
  font-size: 1.3rem;
}

.keypad-fn-btn {
  background-color: #f0e4d7;
  color: var(--cv-terracotta-dark);
  font-weight: bold;
}

.keypad-confirm-btn {
  grid-column: span 2;
  background-color: var(--cv-primary-700);
  color: #fff;
  font-size: 0.95rem;
  font-weight: bold;
}

.keypad-confirm-btn:hover,
.keypad-confirm-btn:active {
  background-color: var(--cv-primary-900);
  color: #fff;
}

.keypad-earn-btn {
  background-color: var(--cv-terracotta-dark, #a33822);
  color: #fff;
  font-size: 0.82rem;
  font-weight: bold;
  padding: 0.2rem 0.1rem;
  white-space: nowrap;
}

.keypad-earn-btn:hover,
.keypad-earn-btn:active {
  background-color: #822917;
  color: #fff;
}

.keypad-use-btn {
  background-color: #2e7d32;
  color: #fff;
  font-size: 0.82rem;
  font-weight: bold;
  padding: 0.2rem 0.1rem;
  white-space: nowrap;
}

.keypad-use-btn:hover,
.keypad-use-btn:active {
  background-color: #1b5e20;
  color: #fff;
}

/* 전화번호 주문 레이어 내 포인트 사용 박스 */
.phone-layer-point-box {
  background-color: #fdfbf7;
  border: 1.5px solid var(--cv-primary-400);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.phone-layer-point-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cv-primary-900);
  cursor: pointer;
  margin-bottom: 0;
  user-select: none;
}

.phone-layer-point-chk {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--cv-primary-700);
  cursor: pointer;
}

.point-label-title {
  font-weight: 700;
  color: var(--cv-primary-900);
}

.phone-layer-point-badge {
  font-size: 0.85rem;
  color: var(--cv-primary-700);
  font-weight: 600;
  background-color: var(--cv-primary-100);
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  margin-left: auto;
}

.phone-layer-point-desc {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--cv-primary-300);
  font-size: 0.9rem;
  color: var(--cv-terracotta-dark);
  font-weight: 600;
}

.phone-layer-point-desc strong {
  font-size: 1.05rem;
  color: var(--cv-primary-900);
}