/* =====================================
   SAMSUNG PHONE APP
===================================== */

.ph-app {
  position: absolute;
  inset: 0;
  z-index: 48;

  display: none;
  flex-direction: column;

  overflow: hidden;

  background: #f1f1f1;
  color: #111;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'Noto Sans KR',
    'Malgun Gothic',
    sans-serif;
}

.ph-app.open {
  display: flex;
}

/* =====================================
   스크롤 영역
===================================== */

.ph-scroll {
  flex: 1;
  min-height: 0;

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

  scrollbar-width: none;
  overscroll-behavior: contain;
}

.ph-scroll::-webkit-scrollbar {
  display: none;
}

/* =====================================
   상단 전화 제목
===================================== */

.ph-header {
  position: relative;

  height: clamp(205px, 60cqw, 250px);
}

/* 전화 글씨 */
.ph-header h1 {
  position: absolute;

  top: 43px;
  left: 0;
  right: 0;

  margin: 0;

  text-align: center;

  font-size: 28px;
  font-weight: 750;

  color: #205285;
}

/* 상단 아이콘 */
.ph-top-actions {
  position: absolute;

  right: 19px;
  bottom: 27px;

  display: flex;
  align-items: center;

  gap: 22px;

  color: #205285;
}

.ph-top-actions svg {
  width: 23px;
  height: 23px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 더보기 점 3개 */
.ph-more {
  position: relative;

  display: flex;
  flex-direction: column;

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

  gap: 4px;

  width: 15px;
  height: 25px;
}

.ph-more span {
  width: 3px;
  height: 3px;

  border-radius: 50%;
  background: #205285;
}

/* =====================================
   날짜별 통화기록
===================================== */

.ph-call-list {
  padding-bottom: 140px;
}

.ph-date-group {
  margin: 0 10px 19px;
}

.ph-date-label {
  margin: 0 15px 8px;

  color: #929292;

  font-size: 12px;
  font-weight: 700;
}

/* 흰색 통화기록 카드 */
.ph-date-card {
  overflow: hidden;

  background: #fff;
  border-radius: 29px;
}

/* =====================================
   통화기록 한 줄
===================================== */

.ph-call {
  position: relative;

  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) auto;

  align-items: center;
  column-gap: 12px;

  min-height: 50px;

  padding: 9px 15px;
}

/* 같은 날짜 기록 구분선 */
.ph-call:not(:last-child)::after {
  content: "";

  position: absolute;

  left: 17px;
  right: 17px;
  bottom: 0;

  height: 1px;
  background: #e6e6e6;
}

/* =====================================
   수신 / 발신 / 부재중 아이콘
===================================== */

.ph-call-icon {
  display: grid;
  place-items: center;

  width: 18px;
  height: 18px;

  color: #2466a7;
}

.ph-call-icon svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 부재중전화 */
.ph-call.missed .ph-call-icon {
  color: #e34545;
}

/* =====================================
   이름 / 번호
===================================== */

.ph-call-info {
  min-width: 0;
}

.ph-call-name {
  font-size: 13px;
  font-weight: 500;

  line-height: 1.4;

  overflow-wrap: anywhere;
}

/* =====================================
   통화 시간
===================================== */

.ph-call-time {
  align-self: center;

  font-size: 10px;
  font-weight: 450;

  color: #8b8b8b;

  white-space: nowrap;
}

/* 부재중전화 시간 빨간색 + 볼드 */
.ph-call.missed .ph-call-time {
  color: #e34545;
  font-weight: 750;
}

/* =====================================
   하단 PNG 독바
===================================== */

/* =====================================
   전화 하단 독바 - 가운데 고정
===================================== */

/* =====================================
   전화 하단 독바
   PNG 가운데 고정
===================================== */

.ph-bottom-nav {
  position: absolute;

  /* 가로 중앙 정렬 */
  left: 50%;
  transform: translateX(-50%);

  /* 독바 세로 위치 */
  bottom: 35px;

  /* 독바 전체 크기 */
  width: 74%;
  max-width: 300px;
  height: auto;

  flex: none;
  display: block;

  background: transparent;
  border: none;
  padding: 0;
  margin: 0;

  z-index: 15;
}

/* PNG 비율 유지 */
.ph-bottom-nav img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
  pointer-events: none;
}

/* =====================================
   독바 투명 클릭 영역
===================================== */

.ph-dock-buttons {
  position: absolute;
  inset: 0;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  z-index: 2;
}

/* 키패드 / 최근기록 클릭 영역 */
.ph-dock-buttons button {
  width: 100%;
  height: 100%;

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

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

/* 연락처 클릭 비활성화 */
.ph-dock-buttons span {
  pointer-events: none;
}
/* =====================================
   휴대폰 홈바
===================================== */

.ph-exit {
  flex: 0 0 19px;

  display: grid;
  place-items: center;

  padding: 0;
  border: 0;

  background: #f1f1f1;

  cursor: pointer;
}

.ph-exit span {
  display: block;

  width: var(--system-bar-width, 105px);
  height: var(--system-bar-height, 4px);

  background: #858585;
  border-radius: 999px;
}

/* 부재중전화 화살표 각진 모양 */
.ph-call.missed .ph-call-icon svg {
  stroke-linejoin: miter;
  stroke-linecap: round;
}

/* 부재중전화 아이콘 위치 조절 */
.ph-call.missed .ph-call-icon svg {
  transform: translateY(2px);
}

/* =====================================
   전화 키패드 화면
===================================== */

.ph-keypad {
  position: relative;

  flex: 1;
  min-height: 0;

  display: flex;
  flex-direction: column;

  padding: 22px 8% 118px;
  box-sizing: border-box;

  background: #f1f1f1;
}

/* 화면 전환 시 완전히 숨기기 */
.ph-keypad[hidden],
.ph-scroll[hidden] {
  display: none !important;
}

/* 상단 검색 / 메뉴 */
.ph-keypad-tools {
  position: absolute;
  top: 24px;
  right: 20px;

  display: flex;
  align-items: center;
  gap: 24px;

  color: #205285;
}

.ph-keypad-tools svg {
  width: 24px;
  height: 24px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.ph-keypad-tools span {
  font-size: 27px;
  line-height: 1;
}

/* 입력한 전화번호 */
.ph-dial-number {
  margin-top: 0;
  min-height: 42px;

  text-align: center;
  font-size: 24px;
  font-weight: 450;
}

/* 숫자 키패드 배열 */
.ph-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  column-gap: 8px;
  row-gap: 8px;
}

/* 숫자 버튼 한 칸 */
.ph-keypad-grid button {
  height: clamp(66px, 17cqw, 82px);

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

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

  cursor: pointer;
}

/* 큰 숫자 */
.ph-keypad-grid strong {
  font-size: 35px;
  font-weight: 350;
  line-height: 1;
}

/* 숫자 아래 작은 글씨 */
.ph-keypad-grid small {
  display: block;

  min-height: 26px;
  margin-top: 4px;

  font-size: 10px;
  font-weight: 400;
  line-height: 12px;

  text-align: center;
  color: #909090;
}
/* 통화 버튼 영역 */
.ph-keypad-bottom {
  position: relative;

  display: flex;
  justify-content: center;

  margin-top: 15px;
}

/* 파란 통화 버튼 */
.ph-dial-call {
  width: 64px;
  height: 64px;

  border: none;
  border-radius: 50%;

  background: #79afe9;
  color: white;

  font-size: 29px;
  cursor: pointer;
}

/* 번호 삭제 */
.ph-dial-delete {
  position: absolute;

  right: 0;
  top: 14px;

  border: none;
  background: transparent;

  color: #777;
  font-size: 26px;
  cursor: pointer;
}

.ph-dial-delete[hidden] {
  display: none;
}

/* 통화 버튼 속 흰색 수화기 */
.ph-dial-call {
  display: grid;
  place-items: center;
}

.ph-dial-call svg {
  width: 34px;
  height: 34px;

  fill: #fff;
  stroke: none;
}

/* 1번 숫자만 살짝 아래로 */
.ph-keypad-grid button[data-ph-digit="1"] strong {
  transform: translateY(0.3px);
}

/* 키패드 별표 SVG */
.ph-keypad-grid .ph-star-icon {
  display: block;

  width: 30px;
  height: 30px;

  fill: none;
  stroke: #111;
  stroke-width: 2;
  stroke-linecap: round;

  /* 별표 위치 조절 */
  transform: translate(0px, 0px);
}

/* 전화번호 삭제 버튼 크기 및 위치 */
.ph-app #phDialDelete {
  font-size: 18px;

  width: 28px;
  height: 28px;

  top: 17px;
  right: 0px;

  padding: 0;
  line-height: 1;
}

/* =====================================
   전화번호 + 추천 영역
===================================== */

.ph-dial-info {
  margin-top: auto;

  /* 번호를 키패드에서 조금 위로 */
  margin-bottom: 12px;
}

/* 번호 표시 */
.ph-dial-number {
  margin-top: 0;
}

/* =====================================
   태현이 연락처 자동완성
===================================== */

.ph-dial-suggestion {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  gap: 12px;

  margin-bottom: 10px;
  padding: 5px 0;

  background: transparent;
  border: none;

  cursor: pointer;
}

/* 추천이 없을 때 완전히 숨기기 */
.ph-dial-suggestion[hidden] {
  display: none !important;
}

/* 동그란 기본 프사 */
.ph-dial-avatar {
  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #c9cbd1;
  color: #fff;

  font-size: 15px;
  font-weight: 700;
}

/* 프사 옆 이름 + 전화번호 */
.ph-dial-person {
  flex: 1;
  min-width: 0;

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

  gap: 10px;
}

/* 이름: 검정색 고정 */
.ph-dial-person strong {
  font-size: 13px;
  font-weight: 650;
  color: #111 !important;

  white-space: nowrap;
}

/* 전화번호: 회색 */
.ph-dial-person small {
  font-size: 11px;
  font-weight: 400;
  color: #888;

  white-space: nowrap;
}

/* 키패드 돋보기만 아래로 이동 */
.ph-keypad-tools svg {
  transform: translateY(2px);
}

/* =====================================
   통화 화면 전체
===================================== */

.ph-call-overlay {
  position: absolute;
  inset: 0 0 19px;
  z-index: 30;
  overflow: hidden;
}

.ph-call-overlay[hidden],
.ph-calling-view[hidden],
.ph-ended-view[hidden] {
  display: none !important;
}

/* =====================================
   통화 중 화면
===================================== */

.ph-calling-view {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;

background: #3f596c;

  color: #fff;
}

.ph-live-status {
  position: relative;
  margin-top: 49px;

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

  font-size: 13px;
  font-weight: 500;
}

.ph-call-more {
  position: absolute;
  right: 23px;

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

/* 상대방 이름 */
.ph-calling-name {
  margin: 57px 0 0;

  text-align: center;
  font-size: 25px;
  font-weight: 650;
}

/* 하단 회색 패널 */
.ph-call-panel {
  margin: auto 20px 16px;
  padding: 26px 18px 22px;

  background: #aab9c9;
  border-radius: 28px;

  color: #26333c;
}

/* 통화 기능 아이콘 6개 */
.ph-call-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 29px 8px;
  margin-bottom: 35px;
}

.ph-call-actions > div {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 9px;
}

/* =====================================
   통화 중 SVG 아이콘 통일
===================================== */

.ph-call-actions svg {
  display: block;

  width: 25px;
  height: 25px;

  fill: none;
  stroke: #26333c;
  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 키패드 점 */
.ph-call-actions .ph-action-keypad {
  stroke-width: 4;
}

/* 빨간 통화 종료 버튼 */
.ph-app .ph-hangup {
  width: 66px;
  height: 66px;

  display: grid;
  place-items: center;

  margin: 0 auto;
  padding: 0;

  border: none;
  border-radius: 50%;

  background: #d9493d;
  cursor: pointer;
}

/* 통화 중 종료 버튼 수화기 */
.ph-hangup svg {
  width: 34px;
  height: 34px;
  fill: #fff;
  stroke: none;
  transform: none;

  /* 수화기만 위로 */
  transform: translateY(-3px);
}
/* 5초 뒤 자동으로 눌리는 모션 */
.ph-hangup.auto-pressed {
  animation: ph-hangup-pop 450ms ease-in-out;
}

@keyframes ph-hangup-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.78); }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* 통화 기능 아이콘 아래 글씨 */
.ph-call-actions small {
  font-size: 9px;
  font-weight: 500;

  /* 글씨가 두 줄로 넘어가지 않게 */
  white-space: nowrap;
}

/* =====================================
   통화 종료 화면
===================================== */

.ph-ended-view {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  background: #fff;
  color: #111;

  padding: 35px 16px 25px;
  box-sizing: border-box;
}

/* 빨간 통화 종료 문구 */
/* 통화 종료 표시 */
.ph-ended-status {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  color: #bf5148;
  font-size: 16px;
  font-weight: 600;
}

/* 통화 종료 수화기 */
.ph-ended-status svg {
  width: 21px;
  height: 21px;

  fill: currentColor;
  stroke: none;
}
/* 태현이 이름 */
.ph-ended-name {
  margin: 32px 0 0;

  font-size: 28px;
  font-weight: 750;
}

/* 전화번호 */
.ph-ended-number {
  margin-top: 12px;

  font-size: 13px;
  color: #555;
}

/* 태현이 기본 프사 */
.ph-ended-avatar {
  width: 95px;
  height: 95px;

  margin-top: 28px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #c9cbd1;
  color: #fff;

  font-size: 45px;
  font-weight: 400;
}

/* 연락처 보기 */
.ph-ended-contact {
  margin-top: auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 8px;
}

/* 연락처 보기 사람 SVG */
.ph-ended-contact svg {
  display: block;

  width: 27px;
  height: 27px;

  fill: none;
  stroke: #111;
  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}
.ph-ended-contact small {
  font-size: 12px;
}

/* 하단 전화 / 메시지 / 영상통화 */
.ph-ended-actions {
  width: 100%;

  display: flex;
  justify-content: space-around;

  margin-top: 55px;
  margin-bottom: 50px;
}

/* 원형 아이콘 */
.ph-ended-action {
  width: 59px;
  height: 59px;

  display: grid;
  place-items: center;

  border-radius: 50%;
}

.ph-ended-action.phone,
.ph-ended-action.video {
  background: #5ca56f;
}

.ph-ended-action.message {
  background: #68a1e7;
}

.ph-ended-action svg {
  width: 30px;
  height: 30px;

  fill: white;
}

.ph-ended-action.message svg,
.ph-ended-action.video svg {
  fill: fff;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 통화 종료 화면 배경 통일 */
.ph-ended-view {
  background: #fff;
  background-image: none;
}

/* 하단 아이콘 그림자 제거 */
.ph-ended-actions,
.ph-ended-action {
  box-shadow: none;
  filter: none;
}

/* =====================================
   통화 종료 문구 두 번 깜빡이기
===================================== */

.ph-ended-view.ph-end-flash .ph-ended-status {
  animation: ph-ended-blink 1.2s ease-in-out 2;
}

@keyframes ph-ended-blink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* 통화 종료 버튼 직접 조작 금지 */
#phHangup {
  pointer-events: none;
  cursor: default;
}

/* 모바일 전화번호 크기 조정 */
@media (max-width: 599px), (pointer: coarse) {

  #phDialNumber {
    width: 100%;
    max-width: 100%;

    padding-left: 12px;
    padding-right: 12px;

    box-sizing: border-box;

    font-size: clamp(18px, 5.5vw, 26px) !important;

    white-space: nowrap;
    text-align: center;
  }

}