/* kai on top — 가상 데이팅앱, 첫 번째 버전 */
* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; }
body { font-family: system-ui, -apple-system, 'Segoe UI', 'Malgun Gothic', sans-serif; background:#101010; color:#151515; }
button { font:inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #e2478e; outline-offset: -3px; }
.stage { min-height:100dvh; display:grid; place-items:center; padding:18px; }
/* 실제 프레임 PNG 비율 515×1070. */
.phone { position:relative; width:min(440px, calc((100dvh - 36px) * 515 / 1070), calc(100vw - 36px)); aspect-ratio:515/1070; filter:drop-shadow(0 10px 22px rgba(0,0,0,.45)); }
/* PNG의 투명한 화면 영역: 가로 약 x16~495 / 세로 y16~1054 */
.phone-display { position:absolute; left:3.11%; right:3.88%; top:1.50%; bottom:1.50%; overflow:hidden; border-radius:7% / 3.4%; background:#fff; display:flex; flex-direction:column; isolation:isolate; }
.phone-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; z-index:9; user-select:none; }
.status-bar { flex:0 0 5.1%; min-height:24px; display:flex; align-items:center; justify-content:space-between; padding:10px 16px 3px; white-space:nowrap; background:#fff; font-size:12px; line-height:1; color:#515151; z-index:1; }
.status-left { font-weight:500; font-size:13px; letter-spacing:.05px; }
.status-right { display:flex; align-items:center; gap:4px; }
.network-tag { font-size:9px; font-weight:700; border:1px solid currentColor; border-radius:2px; padding:1px 2px; }
.signal-icon { width:13px; height:13px; }
.battery { background:#595959; color:#fff; font-size:11px; font-weight:700; padding:3px 5px; border-radius:7px; }
.screen { display:flex; flex:1 1 auto; min-height:0; flex-direction:column; }
.screen[hidden] { display:none !important; }
.screen-header { height:61px; flex:none; padding:0 18px; display:flex; align-items:center; justify-content:space-between; }
.screen-header h1 { margin:0; font-size:24px; letter-spacing:-1px; font-weight:770; }
.header-icon { display:grid;place-items:center;width:30px;height:30px; }
.header-icon svg { width:30px; height:30px; }
.card-zone { flex:1; min-height:0; padding:6px 7px 5px; }
.profile-card { height:100%; border-radius:18px; background:#121212; overflow:hidden; display:flex; flex-direction:column; position: relative; }
.photo-stage { min-height:0; flex:1; position:relative; background:linear-gradient(130deg,#9daec7,#4f667b); overflow:hidden; }
.photo-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; user-select:none; }
.photo-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom,rgba(0,0,0,.05) 0%,transparent 42%,rgba(0,0,0,.1) 58%,rgba(0,0,0,.88) 100%); z-index:1; }
.photo-progress { position:absolute; left:50%; top:12px; transform:translateX(-50%); width:40%; display:flex; gap:4px; z-index:4; pointer-events:none; }
.photo-progress .bar { height:3px; background:rgba(10,10,10,.28); flex:1; border-radius:8px; box-shadow:0 0 2px rgba(0,0,0,.2); }
.photo-progress .bar.active { background:white; }
.photo-info { position:absolute; bottom:100px; left:20px; right:12px; color:white; z-index:4; pointer-events:none; text-shadow:0 1px 4px rgba(0,0,0,.35); }
.profile-name-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:9px; }
.profile-name { font-size:31px; font-weight:750; letter-spacing:-1.1px; }
.profile-age { font-size:24px; font-weight:680; }
.profile-meta { display:flex; align-items:center; gap:7px; font-size:14px; line-height:1.7; font-weight:500; }
.profile-meta svg { width:17px; height:17px; flex:none; }
.bio { font-size:13px; margin-top:5px; line-height:1.4; font-weight:500; }
.photo-tap { position:absolute; top:0; bottom:0; width:50%; padding:0; border:0; outline-offset:-4px; background:transparent; cursor:pointer; z-index:3; }
.photo-prev { left:0; } .photo-next { right:0; }
.stars-section {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  height: 130px;
  padding: 30px 15px 12px;

 background: linear-gradient(
  to bottom,
  transparent 0%,
  rgba(0, 0, 0, 0.5) 35%,
  #000000 50%,
  #000000 100%
);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;

  z-index: 5;
  pointer-events: none;
 gap: 15px; }

.stars-section svg {
  width: 36px;
  height: 36px;
  flex: 0 0 38px;
  transform: translateY(15px);
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.3;
  display: block;
}
.bottom-nav { flex:0 0 60px; display:flex; justify-content:space-around; align-items:center; padding:0 9px; background:#fff; border-top:1px solid #e2e2e2; z-index:5; }
.nav-item { position:relative; border:0; background:none; padding:9px; height:100%; min-width:0; flex:1; display:grid; place-items:center; color:#111; }
button.nav-item { cursor:pointer; }
.nav-item svg { width:27px; height:27px; }
.nav-item.selected { color:#000; }
.notification-dot { width:8px; height:8px; background:#f3328e; border-radius:50%; position:absolute; right:calc(50% - 15px); top:17px; border:1px solid white; }
.mini-avatar {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 1px solid #c4cbd1;
  display: block;
  object-position: 70% 35%;
}
/* 채팅 화면 */
.chat-header { background:white; height:62px; border-bottom:1px solid #eee; display:flex; align-items:center; padding:0 14px; gap:7px; flex:none; }
.back-button { border:0; background:none; cursor:pointer; display:grid; place-items:center; padding:4px; }
.back-button svg { width:24px; height:24px; }
.chat-peer { display:flex; align-items:center; gap:9px; flex:1; }
.chat-peer div { display:flex; flex-direction:column; gap:2px; }
.chat-peer strong { font-size:16px; }
.chat-peer span:not(.chat-avatar) { font-size:11px; color:#888; }
.chat-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  flex-shrink: 0;
}
.chat-header-side { font-size:25px; }
.chat-messages { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; padding:19px 14px 22px; background:#f7f8fa; scrollbar-width:thin; display:flex; flex-direction:column; gap:9px; }
.chat-date { align-self:center; border-radius:20px; background:#e7e9ed; color:#777; font-size:11px; padding:6px 13px; margin-bottom:11px; }
.message { display:flex; flex-direction:column; max-width:79%; gap:3px; }
.message.mine { align-self:flex-end; align-items:flex-end; }
.message.theirs { align-self:flex-start; align-items:flex-start; }
.message .bubble { padding:10px 12px; border-radius:16px; line-height:1.5; font-size:14px; overflow-wrap:anywhere; white-space:pre-wrap; }
.message.mine .bubble { background:#527be9; color:white; border-bottom-right-radius:5px; }
.message.theirs .bubble { background:white; color:#232323; border-bottom-left-radius:5px; box-shadow:0 1px 2px #0000000c; }
.message .message-time { color:#a0a0a0; font-size:10px; padding:0 3px; }
.chat-compose { background:white; border-top:1px solid #eee; display:flex; align-items:center; gap:8px; padding:11px 15px; flex:none; }
.compose-plus {
  border: 1px solid #b5b5b5;
  color: #888;
  border-radius: 50%;

  width: 23px;
  height: 23px;

  font-size: 18px;
  line-height: 18px;

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

  padding-bottom: 3px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.compose-placeholder { flex:1; border:1px solid #e2e2e2; border-radius:30px; color:#a0a0a0; padding:10px 12px; font-size:12px; }
.compose-send { font-size:21px; color:#c6cbd1; }
/* 모바일: 바깥 프레임 없애고 브라우저의 웹뷰포트에 앱을 가득 표시. */
@media (max-width:640px) {
  html, body { overflow:hidden; background:white; }
  .stage { display:block; padding:0; min-height:100dvh; }
  .phone { width:100vw; height:100dvh; aspect-ratio:auto; filter:none; }
  .phone-frame { display:none; }
  .phone-display { inset:0; border-radius:0; }
  .status-bar { flex-basis:auto; height:calc(34px + env(safe-area-inset-top, 0px)); padding-top:calc(7px + env(safe-area-inset-top, 0px)); padding-left:18px; padding-right:18px; }
  .bottom-nav { flex-basis:calc(60px + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px); }
}
@media (max-height:650px) and (min-width:641px) {
  .screen-header { height:47px; }
  .stars-section { height:75px; padding-block:10px; }
  .bottom-nav { flex-basis:51px; }
  .profile-name { font-size:25px; }
  .profile-age { font-size:20px; }
}
/* =========================
   강태현 마이페이지
========================= */

.screen-my {
  background: #ffffff;
}

.my-settings-icon {
  font-size: 25px;
  color: #444;
}

.my-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 17px 25px;
  scrollbar-width: thin;
}

/* 프로필 */
.my-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 4px 25px;
}

.my-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 70% 35%; /* 여기 숫자로 위치 조절! */
  border: 1px solid #e8e8e8;
  flex-shrink: 0;
}

.my-profile-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.my-profile-text strong {
  font-size: 23px;
  font-weight: 750;
}

.my-profile-text span {
  font-size: 13px;
  color: #777;
}

.my-profile-text small {
  font-size: 12px;
  color: #999;
}

/* 젤리 */
.my-jelly-box {
  background: #f7f7f9;
  border-radius: 17px;
  padding: 17px;
  margin-bottom: 25px;
}

.my-jelly-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 600;
}

.my-jelly-top strong {
  font-size: 18px;
}

.my-jelly-charge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.my-jelly-charge span {
  font-size: 22px;
  color: #aaa;
}

/* 메뉴 */
.my-menu {
  display: flex;
  flex-direction: column;
}

.my-menu-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 7px;
  border: 0;
  border-bottom: 1px solid #f0f0f0;
  background: transparent;
  color: #252525;
  font-size: 15px;
  text-align: left;
}

.my-menu-item > span:last-child {
  color: #aaa;
  font-size: 22px;
}

button.my-menu-item {
  cursor: pointer;
}

/* =========================
   태현이 사진 관리 화면
========================= */

.my-photos-header {
  height: 61px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 15px;
  border-bottom: 1px solid #f1f1f1;
  background: #fff;
}

.my-photos-header strong {
  font-size: 18px;
  font-weight: 700;
}

.screen-my-photos .card-zone {
  flex: 1;
  min-height: 0;
}

/* 마이페이지 선택 시 프사 강조 */
#nav-my.selected .mini-avatar {
  border: 2px solid #111;
  padding: 2px;
}

/* 모바일 */
@media (max-width: 640px) {
  .my-scroll {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* =========================
   태현이 사진 관리 전용 디자인
========================= */

.screen-my-photos {
  background: #fff;
}

.my-photos-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 28px;
}

.my-photos-description {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: #252525;
}

/* 사진 영역: 기존 카이 프로필보다 작게 */
.taehyun-photo-box {
  position: relative;
  width: 100%;
  height: min(58dvh, 520px);
  min-height: 230px;
  border-radius: 15px;
  overflow: hidden;
  background: #f1f1f1;
}

/* 태현이 사진 전용: 그라데이션 없이 원본 표시 */
.taehyun-photo-box > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* 첫 번째 사진만 따로 위치 조절 */
.taehyun-photo-box > img.first-photo {
  object-position: 65% center;
}

/* 사진 넘기기 막대 */
.taehyun-photo-box .photo-progress {
  top: 12px;
  width: 40%;
}

.taehyun-photo-box .photo-progress .bar {
  background: rgba(0, 0, 0, .25);
}

.taehyun-photo-box .photo-progress .bar.active {
  background: #fff;
}

/* 사진 번호 */
.my-photo-count {
  margin: 13px 0 20px;
  text-align: center;
  font-size: 13px;
  color: #888;
}

/* 카메라 / 갤러리 */
.my-photo-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.my-photo-action {
  flex: 1;
  min-width: 0;
  max-width: 165px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 9px;

  padding: 11px 12px;

  border: 1px solid #e5e5e5;
  border-radius: 11px;

  background: #fafafa;
  color: #333;

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

/* 비활성화된 버튼도 디자인 유지 */
.my-photo-action:disabled {
  opacity: 1;
  cursor: default;
}

.my-photo-action-icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

.my-photo-hint {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11px;
  color: #aaa;
}

/* 작은 화면에서도 사진이 너무 커지지 않도록 */
@media (max-width: 640px) {
  .taehyun-photo-box {
    height: min(58dvh, 520px);
  }

  .my-photos-content {
    padding-top: 12px;
    padding-bottom: 16px;
  }

  .my-photo-count {
    margin: 9px 0 12px;
  }

  .my-photo-hint {
    margin-top: 12px;
  }
}
/* =========================
   마이페이지 메뉴 아이콘 통일
========================= */

/* 아이콘 + 메뉴 이름 */
.my-menu-label {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

/* 카메라/갤러리와 같은 라인 아이콘 */
.my-menu-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
  color: #333;
}

/* 오른쪽 화살표 */
.my-menu-arrow {
  color: #aaa;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

/* 메뉴 글씨 크기 유지 */
.my-menu-item .my-menu-label {
  color: #252525;
  font-size: 15px;
}


/* ==========================================
   모바일 최종 통합 CSS
   카이 / 채팅 / 태현이 마이페이지 / 사진 관리
========================================== */

@media (max-width: 640px) {

  /* ===== 1. 모바일 기본 화면 ===== */

  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #fff;
    -webkit-text-size-adjust: 100%;
  }

  .stage {
    display: block;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 0;
  }

  .phone {
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    filter: none;
  }

  .phone-display {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .phone-frame,
  .status-bar {
    display: none !important;
  }

  .screen {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .screen-header {
    height: 52px;
    flex: 0 0 52px;
    padding: 0 17px;
  }

  .screen-header h1 {
    font-size: 21px;
    line-height: 1.2;
  }


  /* ===== 2. 카이 프로필 카드 ===== */

  .screen-profile .card-zone {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 16px 8px;
  }

  .screen-profile .profile-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 18px;
  }

  .screen-profile .photo-stage {
    flex: 1 1 auto;
    min-height: 0;
  }

  .screen-profile .photo-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
  }


  /* ===== 3. 카말 이름 / 직업 / 위치 / 소개 ===== */

  .screen-profile .photo-info {
    bottom: 88px;
    left: 16px;
    right: 12px;
    color: #fff;
    opacity: 1;
  }

  /* 카말 이름 - 실제 클래스 */
  .screen-profile .profile-name {
    font-size: 31px;
    line-height: 1.2;
    font-weight: 750;
    color: #fff;
  }

  /* 나이 */
  .screen-profile .profile-age {
    font-size: 24px;
    line-height: 1.2;
    color: #fff;
  }

  /* 이름과 나이 사이 */
  .screen-profile .profile-name-row {
    margin-bottom: 9px;
  }

  /* 직업 / 위치 */
  .screen-profile .profile-meta {
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    opacity: 1;
  }

  .screen-profile .profile-meta svg {
    width: 17px;
    height: 17px;
  }

  /* 자기소개 - 선명한 흰색 */
  .screen-profile .bio {
    font-size: 14px;
    line-height: 1.4;
    margin-top: 5px;
    color: #fff;
    opacity: 1;
  }


  /* ===== 4. 사진 그라데이션 ===== */

  .screen-profile .photo-shade {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.02) 0%,
      transparent 48%,
      rgba(0, 0, 0, 0.08) 64%,
      rgba(0, 0, 0, 0.76) 100%
    );
  }


  /* ===== 5. 마름모 ===== */

  .screen-profile .stars-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    height: 86px;
    padding: 14px 12px 8px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.65) 58%,
      #000 100%
    );
  }

  .screen-profile .stars-section svg {
    width: 30px;
    height: 30px;
    flex: 0 1 30px;
    transform: translateY(8px);
  }


  /* ===== 6. 하단 메뉴 ===== */

  .bottom-nav {
    flex: 0 0 56px;
    min-height: 56px;
    width: 100%;
  }


  /* ===== 7. 태현이 마이페이지 ===== */

  .my-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 16px 16px;
    -webkit-overflow-scrolling: touch;
  }

  .my-profile {
    gap: 12px;
    padding: 10px 3px 18px;
  }

  .my-avatar {
    width: 62px;
    height: 62px;
  }

  .my-profile-text {
    gap: 4px;
  }

  .my-profile-text strong {
    font-size: 19px;
  }

  .my-profile-text span {
    font-size: 12px;
  }

  .my-profile-text small {
    font-size: 11px;
  }

  .my-jelly-box {
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 14px;
  }

  .my-jelly-top {
    margin-bottom: 10px;
    font-size: 13px;
  }

  .my-jelly-top strong {
    font-size: 16px;
  }

  .my-jelly-charge {
    padding: 11px 12px;
    font-size: 12px;
  }

  .my-menu-item {
    min-height: 49px;
    padding: 13px 6px;
    font-size: 13px;
  }

  .my-menu-item .my-menu-label {
    font-size: 13px;
  }

  .my-menu-icon {
    width: 18px;
    height: 18px;
  }

  .my-menu-label {
    gap: 12px;
  }


  /* ===== 8. 태현이 사진 관리 ===== */

  .screen-my-photos .my-photos-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 24px;
    -webkit-overflow-scrolling: touch;
  }

  /* 태현이 사진 세로 비율 유지 */
  .screen-my-photos .taehyun-photo-box {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 4;
    border-radius: 15px;
    overflow: hidden;
  }

  .screen-my-photos .taehyun-photo-box > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 첫 번째 사진 위치 유지 */
  .screen-my-photos .taehyun-photo-box > img.first-photo {
    object-position: 65% center;
  }

  .my-photo-count {
    margin: 9px 0 12px;
  }

  .my-photo-action {
    padding: 10px;
    font-size: 12px;
  }

  .my-photo-hint {
    margin-top: 12px;
  }

}


/* ===== 높이가 작은 휴대폰 대응 ===== */

@media (max-width: 640px) and (max-height: 700px) {

  .screen-profile .profile-name {
    font-size: 29px;
  }

  .screen-profile .profile-age {
    font-size: 22px;
  }

  .screen-profile .photo-info {
    bottom: 82px;
  }

  .screen-profile .stars-section {
    height: 78px;
  }

  .my-profile {
    padding-bottom: 12px;
  }

  .my-jelly-box {
    margin-bottom: 10px;
  }

  .my-menu-item {
    padding-top: 11px;
    padding-bottom: 11px;
  }

}