/* ───────── 2단계 앱 공통 ───────── */
.nav-btn.plain { font-weight: 400; }
.nav-icon { color: var(--blue); display: flex; }
.plain-head { border-bottom-color: transparent; }
.grouped .plain-head { background: #F2F2F7; }
.av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-av, .msg-av {
  position: relative; overflow: hidden; flex: none; border-radius: 50%;
  display: grid; place-items: end center; color: #fff;
  background: linear-gradient(180deg, #A9AFBA, #858A94);
}
.contact-av svg, .msg-av svg { width: 80%; height: 80%; margin-bottom: -6%; }

/* ───────── 전화 ───────── */
.seg { display: flex; padding: 2px; border-radius: 9px; background: rgba(118, 118, 128, .12); }
.seg button { padding: 4px 18px; border-radius: 7px; font-size: 13px; font-weight: 500; transition: background .2s; }
.seg button.on { background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04); }
.phone-app .page-head.has-large .nav-title { display: none; }
.call-row {
  position: relative; display: grid; grid-template-columns: 26px 1fr auto 34px; align-items: center;
  width: 100%; min-height: 62px; padding-left: 4px; text-align: left;
}
.call-row::after { content: ''; position: absolute; left: 30px; right: 0; bottom: 0; height: .5px; background: #c6c6c8; }
.call-row:active { background: #e5e5ea; }
.call-ico { color: #8e8e93; display: flex; justify-content: center; }
.call-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 0; }
.call-name { font-size: 17px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-name.missed { color: #FF3B30; }
.call-sub { font-size: 14px; color: #8e8e93; }
.call-when { font-size: 15px; color: #8e8e93; margin: 0 8px; }
.call-info { color: var(--blue); display: flex; }
.ios-tabs {
  flex: none; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 7px 0 calc(28px + var(--safe-bottom));
  background: rgba(249, 249, 249, .96); border-top: .5px solid rgba(0, 0, 0, .18);
}
.ios-tabs span { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #999; }
.ios-tabs small { font-size: 10px; font-weight: 500; }
.ios-tabs .on { color: var(--blue); }
.contact-top { text-align: center; padding: 6px 0 16px; }
.contact-top .contact-av { width: 100px; height: 100px; margin: 0 auto; }
.contact-name { margin-top: 10px; font-size: 28px; font-weight: 600; letter-spacing: -.5px; }
.contact-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 16px 22px; }
.contact-actions span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 0 7px; border-radius: 12px; background: #fff; color: var(--blue); }
.contact-actions small { font-size: 11px; }
.group.call-day { padding: 12px 16px 10px; margin-bottom: 14px; }
.call-day-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.call-line { display: grid; grid-template-columns: 76px 1fr auto; gap: 8px; padding: 4px 0; font-size: 15px; }
.cl-time { color: #3c3c43; }
.cl-type.missed { color: #FF3B30; }
.cl-dur { color: #8e8e93; }
.call-total { margin-top: 6px; }

/* ───────── 카카오톡: 목록 ───────── */
.kk { background: #fff; }
.kk-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--sb-h) + var(--safe-top) + 4px) 18px 8px 20px;
}
.kk-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.kk-head-icons { display: flex; gap: 16px; color: #191919; }
.kk-list { padding-top: 4px; }
.kk-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 18px; text-align: left; }
.kk-row:active { background: #f2f2f2; }
.kk-av {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 38%; overflow: hidden;
  display: grid; place-items: end center; color: #fff; background: #9DB4CB;
}
.kk-av svg { width: 82%; height: 82%; margin-bottom: -8%; }
.kk-av.channel { background: #C9D3DC; }
.kk-av.group { background: transparent; overflow: visible; }
.kk-av.group > span {
  position: absolute; width: 23px; height: 23px; border-radius: 38%; overflow: hidden;
  display: grid; place-items: end center; background: #9DB4CB; color: #fff;
}
.kk-av.group > span svg { width: 84%; height: 84%; margin-bottom: -8%; }
.kk-av.n2 > span { width: 31px; height: 31px; }
.kk-av.n2 > span:nth-child(1) { left: 0; top: 0; }
.kk-av.n2 > span:nth-child(2) { right: 0; bottom: 0; box-shadow: 0 0 0 1.5px #fff; }
.kk-av.n3 > span:nth-child(1) { left: 12.5px; top: 0; }
.kk-av.n3 > span:nth-child(2) { left: 0; bottom: 0; }
.kk-av.n3 > span:nth-child(3) { right: 0; bottom: 0; }
.kk-av.n4 > span:nth-child(1) { left: 0; top: 0; }
.kk-av.n4 > span:nth-child(2) { right: 0; top: 0; }
.kk-av.n4 > span:nth-child(3) { left: 0; bottom: 0; }
.kk-av.n4 > span:nth-child(4) { right: 0; bottom: 0; }
.kk-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kk-name { display: flex; align-items: center; gap: 5px; font-size: 15px; min-width: 0; }
.kk-name b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.2px; }
.kk-name em { font-style: normal; color: #aaa; font-size: 14px; flex: none; }
.kk-prev { font-size: 13.5px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-side { align-self: flex-start; padding-top: 3px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.kk-time { font-size: 11.5px; color: #aaa; }
.kk-badge { min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; background: #F64B3C; color: #fff; font-size: 11.5px; font-weight: 600; display: grid; place-items: center; }
.kk-tabs {
  flex: none; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 10px 0 calc(30px + var(--safe-bottom)); background: #fff; border-top: .5px solid #e6e6e6;
}
.kk-tabs span { display: flex; justify-content: center; color: #c4c4c4; }
.kk-tabs .on { color: #191919; }

/* ───────── 카카오톡: 채팅방 ───────── */
.kk-room { background: #BACEE0; }
.kk-room-head {
  flex: none; display: grid; grid-template-columns: 40px 1fr auto; align-items: center;
  padding: calc(var(--sb-h) + var(--safe-top)) 14px 8px 6px; background: #BACEE0; color: #191919;
}
.kk-back { padding: 8px 10px; display: flex; }
.kk-room-title { display: flex; align-items: center; gap: 5px; font-size: 17px; min-width: 0; }
.kk-room-title b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-room-title em { font-style: normal; color: #56626e; font-size: 15px; flex: none; }
.kk-room-icons { display: flex; gap: 16px; }
.kk-msgs { padding: 0 10px 14px; user-select: text; -webkit-user-select: text; }
.kk-date { display: flex; justify-content: center; margin: 14px 0 6px; }
.kk-date span { padding: 4px 12px; border-radius: 12px; background: rgba(40, 55, 70, .18); color: #fff; font-size: 12px; }
.kk-msg { display: flex; margin-top: 4px; }
.kk-msg.first { margin-top: 10px; }
.kk-msg.me { justify-content: flex-end; }
.kk-msg.me .kk-line { max-width: 76%; }
.kk-av-s { flex: none; width: 40px; margin-right: 8px; }
.kk-av-s .kk-av { width: 40px; height: 40px; }
.kk-col { display: flex; flex-direction: column; gap: 5px; max-width: 70%; min-width: 0; }
.kk-sender { font-size: 12.5px; color: #4a5561; }
.kk-line { display: flex; align-items: flex-end; gap: 5px; min-width: 0; }
.kk-bub {
  position: relative; padding: 8px 11px; border-radius: 15px;
  background: #fff; color: #111; font-size: 15px; line-height: 1.4; letter-spacing: -.2px;
  word-break: break-word; overflow-wrap: anywhere;
}
.me .kk-bub { background: #FEE500; }
.them .kk-bub.tail { border-top-left-radius: 4px; }
.me .kk-bub.tail { border-top-right-radius: 4px; }
.kk-t { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: 10.5px; color: #55606c; white-space: nowrap; line-height: 1.3; }
.them .kk-t { align-items: flex-start; }
.kk-t i { font-style: normal; font-size: 11.5px; font-weight: 800; color: #F2BF00; }
.kk-bub.img { padding: 0; overflow: hidden; background: none; }
.kk-bub.img img { display: block; max-width: 220px; max-height: 300px; border-radius: 12px; }
.kk-bub.img.missing { width: 170px; height: 170px; background: #d5dde6; border-radius: 12px; display: grid; place-items: center; color: #7d8a97; font-size: 13px; }
.kk-bub.img.missing::after { content: '사진'; }
.kk-card { width: 252px; border-radius: 14px; overflow: hidden; background: #fff; }
.kk-card-head { padding: 12px 14px; background: #FEE500; font-size: 15px; font-weight: 700; }
.kk-card-body { padding: 13px 14px 14px; font-size: 14px; line-height: 1.45; }
.kk-card-body p { margin-bottom: 10px; }
.kk-card-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13.5px; }
.kk-card-row span { color: #888; flex: none; }
.kk-card-row b { font-weight: 500; text-align: right; }
.kk-card-btn { display: block; margin-top: 12px; padding: 10px; border-radius: 8px; background: #f2f2f2; text-align: center; font-size: 14px; }
.kk-input {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px calc(30px + var(--safe-bottom)); background: #fff; color: #999;
}
.kk-plus, .kk-hash { display: flex; }
.kk-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 14px; border-radius: 20px; background: #f3f3f3; color: #aaa; cursor: text; }
.kk-text { flex: 1; min-width: 0; height: 28px; border: 0; outline: 0; background: transparent; color: #191919; font-size: 16px; }
.kk-text::placeholder { color: #aaa; }
.kk-send { display: none; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #FEE500; color: #191919; place-items: center; }
.kk-input.has-text .kk-hash { display: none; }
.kk-input.has-text .kk-send { display: grid; }

/* ───────── 메시지 ───────── */
.msg-list { margin-top: 2px; }
.msg-row { display: flex; align-items: center; width: 100%; min-height: 78px; text-align: left; }
.msg-row:active { background: #e5e5ea; }
.msg-dot { flex: none; width: 22px; display: flex; justify-content: center; }
.msg-dot.on::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.msg-row .msg-av { width: 44px; height: 44px; margin-right: 12px; }
.msg-main { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 16px 10px 0; border-bottom: .5px solid #c6c6c8; }
.msg-row:last-child .msg-main { border-bottom: 0; }
.msg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.msg-top b { font-size: 17px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-top > span { flex: none; display: flex; align-items: center; gap: 7px; font-size: 15px; color: #8e8e93; }
.msg-prev { font-size: 15px; line-height: 1.3; color: #8e8e93; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.msg-thread { background: #fff; }
.im-head {
  flex: none; position: relative; display: flex; justify-content: center;
  padding: calc(var(--sb-h) + var(--safe-top) - 4px) 0 8px;
  background: rgba(249, 249, 249, .96); border-bottom: .5px solid rgba(0, 0, 0, .15);
}
.im-back { position: absolute; left: 8px; top: calc(var(--sb-h) + var(--safe-top) + 10px); padding: 6px 8px; color: var(--blue); display: flex; }
.im-back svg { height: 20px; width: auto; }
.im-who { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.im-who .msg-av { width: 50px; height: 50px; }
.im-name { display: flex; align-items: center; gap: 3px; font-size: 12px; }
.im-name svg { width: 6px; height: 10px; color: #8e8e93; }
.im-body { padding: 4px 14px 16px; user-select: text; -webkit-user-select: text; }
.im-stamp { margin: 14px 0 8px; text-align: center; font-size: 11.5px; font-weight: 500; color: #8e8e93; }
.im-msg { display: flex; margin-top: 2px; }
.im-msg.tail { margin-bottom: 8px; }
.im-msg.me { justify-content: flex-end; }
.im-bub { max-width: 74%; padding: 7px 12px; border-radius: 18px; font-size: 16.5px; line-height: 1.32; letter-spacing: -.2px; word-break: break-word; overflow-wrap: anywhere; }
.them .im-bub { background: #E9E9EB; color: #000; }
.imsg .me .im-bub { background: #0A84FF; color: #fff; }
.sms .me .im-bub { background: #34C759; color: #fff; }
.im-msg.tail.me .im-bub { border-bottom-right-radius: 5px; }
.im-msg.tail.them .im-bub { border-bottom-left-radius: 5px; }
.im-read { margin: -5px 4px 8px; text-align: right; font-size: 11.5px; font-weight: 500; color: #8e8e93; }
.im-input { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px calc(30px + var(--safe-bottom)); background: #fff; }
.im-cam { color: #8e8e93; display: flex; }
.im-field { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 6px 14px; border: 1px solid #d1d1d6; border-radius: 18px; color: #c7c7cc; font-size: 16px; }
.im-field svg { color: #8e8e93; }

/* ───────── 메모 ───────── */
.nt-tint { color: #E0A100 !important; }
.notes-app .page-head.has-large .nav-title { opacity: 0; }
.nt-section { margin: 4px 20px 8px; font-size: 20px; font-weight: 700; letter-spacing: -.4px; }
.notes-app .group { margin-bottom: 24px; }
.nt-row { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 16px; text-align: left; background: #fff; border-bottom: .5px solid #c6c6c8; }
.nt-row:last-child { border-bottom: 0; }
.nt-row:active { background: #e5e5ea; }
.nt-title { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-lock { color: #8e8e93; display: flex; flex: none; }
.nt-sub { font-size: 15px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-sub b { font-weight: 400; color: #48484a; margin-right: 4px; }
.nt-toolbar {
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 10px 18px calc(28px + var(--safe-bottom));
  background: rgba(242, 242, 247, .96); border-top: .5px solid rgba(0, 0, 0, .12);
}
.nt-toolbar > span:last-child { justify-self: end; display: flex; }
.nt-count { font-size: 11.5px; color: #3c3c43; }
.note-view { background: #fff; }
.note-view .plain-head { background: #fff; }
.nt-icons { display: flex; gap: 18px; }
.nt-body { padding: 0 20px 50px; user-select: text; -webkit-user-select: text; }
.nt-stamp { margin: 2px 0 14px; text-align: center; font-size: 13px; color: #8e8e93; }
.nt-h { margin-bottom: 10px; font-size: 27px; font-weight: 700; letter-spacing: -.5px; line-height: 1.25; }
.nt-p { font-size: 17px; line-height: 1.45; }
.nt-dash { display: flex; gap: 10px; padding: 1px 0; font-size: 17px; line-height: 1.45; }
.nt-dash span { flex: none; color: #3c3c43; }
.nt-check { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 17px; line-height: 1.35; }
.nt-check > span { flex: none; display: flex; color: #E0A100; }
.nt-check.done p { color: #8e8e93; }
.nt-gap { height: 10px; }
.nt-locked { display: flex; flex-direction: column; align-items: center; padding: 15cqh 30px 0; text-align: center; }
.nt-biglock { color: #8e8e93; }
.nt-lock-title { margin-top: 18px; font-size: 20px; font-weight: 600; }
.nt-lock-sub { margin-top: 6px; font-size: 15px; color: #8e8e93; }
.nt-view { margin-top: 22px; font-size: 17px; font-weight: 500; }
.nt-pw { display: flex; gap: 8px; width: 100%; max-width: 280px; margin-top: 22px; }
.nt-pw input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 0; outline: 0; border-radius: 10px; background: #F2F2F7; font-size: 17px; }
.nt-pw button { padding: 0 6px; font-size: 17px; font-weight: 600; }
.nt-pw.shake { animation: shake .45s; }
.nt-err { min-height: 18px; margin-top: 12px; font-size: 14px; color: #FF3B30; }

.kk-metag { flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #555; color: #fff; font-size: 10.5px; font-style: normal; font-weight: 600; }

/* 카톡 보이스톡 기록 */
.kk-call { display: flex; align-items: center; gap: 9px; padding: 9px 13px 9px 10px; }
.kk-call-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .08); color: #3C1E1E; }
.kk-call.missed .kk-call-ico { color: #F64B3C; }
.kk-call-txt { display: flex; flex-direction: column; line-height: 1.3; }
.kk-call-txt b { font-weight: 600; font-size: 14.5px; }
.kk-call-txt small { font-size: 12.5px; color: rgba(0, 0, 0, .55); }