/*
 * 디지털 임대관리 앱 소개 페이지 전용: /app (두 앱 소개), /app/landlord-app (임대인 앱), /app/tenant-app (임차인 앱).
 * 모든 규칙은 .ap 안에 한정한다 — GNB·푸터(layout.css·gnb.css)에 영향을 주지 않는다.
 * 임대인 앱은 짙은 초록, 임차인 앱은 빨강으로 나눈다 (시안 색). 흰 글씨를 얹는 빨강은 대비를 위해 조금 짙게 쓴다.
 * 페이지 강조색(--ap-accent 등)은 main 의 .ap-landlord / .ap-tenant 가 바꾼다. 기본값은 /app 의 색.
 */
.ap {
  --ap-accent: var(--ap-deep);
  --ap-accent-hover: var(--ap-deep-hover);
  --ap-accent-line: var(--ap-deep-line);
  --ap-accent-ink: var(--ap-deep);
  --ap-accent-em: var(--ap-primary);
  --ap-accent-soft: #EAF6F1;
  --ap-accent-tint: #F5FBF8;
  --ap-icon-ink: var(--ap-deep);
  --ap-check: var(--ap-deep);
  --ap-eyebrow: #2D5A4D;
  --ap-mint-ink: #00A884;
  --ap-primary: #059E7A;
  --ap-deep: #115B46;
  --ap-deep-hover: #0B4A38;
  --ap-deep-line: #9CC9BC;
  --ap-mint: #03C9A4;
  --ap-red: #F2575C;
  --ap-red-strong: #D63A42;
  --ap-red-hover: #BF3038;
  --ap-red-line: #F3A3A6;
  --ap-ink: #171C26;
  --ap-text: #515D6D;
  --ap-muted: #6B7684;
  --ap-line: #E4EBED;
  --ap-mint-bg: #EDF9F5;
  --ap-pink-bg: #FEF2F2;
  --ap-radius: 16px;
  --ap-gutter: 20px;
  --ap-shadow: 0 6px 20px rgba(16, 62, 53, .06);
  color: var(--ap-text);
  letter-spacing: -.015em;
  overflow-x: clip;
}
.ap-landlord { --ap-accent-em: #0B6149; --ap-eyebrow: #1D6A53; }
.ap-tenant {
  --ap-accent: var(--ap-red-strong);
  --ap-accent-hover: var(--ap-red-hover);
  --ap-accent-line: var(--ap-red-line);
  --ap-accent-ink: #C8333B;   /* 분홍 바탕 위 작은 빨간 글씨 (대비 확보) */
  --ap-accent-em: #E9545B;    /* 큰 제목 강조 */
  --ap-accent-soft: #FDE8E7;
  --ap-accent-tint: #FFF7F7;
  --ap-icon-ink: var(--ap-red);
  --ap-check: var(--ap-red);
  --ap-eyebrow: #C8333B;
}
.ap em { font-style: normal; color: var(--ap-accent-em); }
/* 초기화는 :where 로 낮춰 둬서 아래 클래스 규칙이 이긴다 */
.ap :where(h1, h2, h3, p, dl, dd, figure) { margin: 0; }
.ap :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.ap :where(svg) { width: 1em; height: 1em; flex: none; }
.ap-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--ap-gutter); min-width: 0; }
@media (min-width: 768px) { .ap { --ap-gutter: 32px; } }
/* 줄바꿈: br-md 는 640px 이상에서만 */
.ap .br-md { display: none; }
@media (min-width: 640px) { .ap .br-md { display: inline; } }

/* 공통 머리 */
.ap-section { padding: 56px 0; }
@media (min-width: 1024px) { .ap-section { padding: 72px 0; } }
.ap-title { color: var(--ap-ink); font-size: 24px; font-weight: 800; line-height: 1.38; letter-spacing: -.03em; text-wrap: balance; }
.ap-sub { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--ap-text); text-wrap: pretty; }
.ap-head-center { text-align: center; }
.ap-head-center .ap-sub { text-wrap: balance; }
@media (min-width: 768px) { .ap-title { font-size: 30px; } .ap-sub { font-size: 17px; } }

/* 버튼 */
.ap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px; border-radius: 8px; border: 1.5px solid transparent;
  font-size: 15px; font-weight: 700; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s;
}
.ap-btn svg { font-size: 18px; }
.ap-btn-deep { background: var(--ap-deep); color: #fff; }
.ap-btn-deep:hover { background: var(--ap-deep-hover); }
.ap-btn-red { background: var(--ap-red-strong); color: #fff; }
.ap-btn-red:hover { background: var(--ap-red-hover); }
.ap-btn-line { background: #fff; color: var(--ap-deep); border-color: var(--ap-deep-line); }
.ap-btn-line:hover { background: #F5FBF8; border-color: var(--ap-deep); }
.ap-btn-red-line { background: #fff; color: var(--ap-red-strong); border-color: var(--ap-red-line); }
.ap-btn-red-line:hover { background: #FFF7F7; border-color: var(--ap-red-strong); }
@media (min-width: 768px) { .ap-btn { min-height: 56px; padding: 0 28px; font-size: 16px; } .ap-actions { gap: 14px; } }

/* 앱 아이콘 (집이 든 동그라미) */
.ap-appicon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px; color: #fff; font-size: 32px;
  background: linear-gradient(150deg, #22D8B5 0%, #00BD98 100%); box-shadow: 0 6px 14px rgba(3, 201, 164, .24);
}
.ap-appicon.is-tenant { background: linear-gradient(150deg, #FF777B 0%, #F04C53 100%); box-shadow: 0 6px 14px rgba(242, 87, 92, .24); }
.ap-appicon-lg { width: 56px; height: 56px; border-radius: 15px; font-size: 40px; }
@media (min-width: 1024px) { .ap-appicon-lg { width: 64px; height: 64px; border-radius: 17px; font-size: 46px; } }

/* 아이콘 원 */
.ap-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 56px; height: 56px; border-radius: 50%; background: var(--ap-accent-soft); color: var(--ap-icon-ink); font-size: 26px;
}
.ap-icon-lg { width: 64px; height: 64px; font-size: 30px; }
@media (min-width: 1024px) { .ap-icon { width: 72px; height: 72px; font-size: 32px; } .ap-icon-lg { width: 84px; height: 84px; font-size: 38px; } }

/* 체크 목록 */
.ap-checks { display: grid; gap: 12px; align-content: start; }
.ap-checks li { display: flex; align-items: center; gap: 10px; color: var(--ap-ink); font-size: 15px; font-weight: 500; }
.ap-checks svg { font-size: 22px; color: var(--ap-check); }
.is-tenant .ap-checks svg { color: var(--ap-red); }

/* ── 1. 히어로 ── */
.ap-hero { background: linear-gradient(100deg, #EAF8F2 0%, #EDF9F5 50%, #F3FBF8 100%); padding: 40px 0 32px; }
.ap-hero-inner { display: grid; gap: 36px; }
.ap-eyebrow { margin-bottom: 12px; color: var(--ap-eyebrow); font-size: 14px; font-weight: 600; }
.ap-hero h1 { color: var(--ap-ink); font-size: 32px; font-weight: 800; line-height: 1.28; letter-spacing: -.045em; text-wrap: balance; }
.ap-hero-lead { margin-top: 16px; font-size: 16px; line-height: 1.7; color: #3E4A5A; }
@media (max-width: 767px) { .ap-hero .ap-actions .ap-btn { flex: 1 1 100%; } }
@media (min-width: 768px) { .ap-hero h1 { font-size: 44px; } .ap-hero-lead { font-size: 18px; } .ap-eyebrow { font-size: 16px; } }
@media (min-width: 1024px) {
  .ap-hero { padding: 56px 0 28px; }
  .ap-hero-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
}
@media (min-width: 1200px) { .ap-hero h1 { font-size: 52px; } }

/* 두 휴대폰 */
.ap-hero-visual { justify-self: center; min-width: 0; }
.ap-devices { display: flex; gap: 14px; align-items: flex-start; }
@media (min-width: 600px) { .ap-devices { gap: 20px; } }
.ap-device { display: grid; gap: 14px; justify-items: center; min-width: 0; }
.ap-device-label { display: flex; align-items: center; gap: 10px; color: var(--ap-muted); font-size: 12px; line-height: 1.4; }
.ap-device-label strong { display: block; color: var(--ap-ink); font-size: 15px; font-weight: 800; }
.ap-device-label .ap-appicon { width: 38px; height: 38px; border-radius: 11px; font-size: 28px; }
@media (min-width: 1024px) {
  .ap-device-label { font-size: 13px; }
  .ap-device-label strong { font-size: 17px; }
  .ap-device-label .ap-appicon { width: 48px; height: 48px; border-radius: 13px; font-size: 34px; }
}
.ap-hero-visual figcaption { margin-top: 14px; text-align: center; color: var(--ap-muted); font-size: 12px; }

/* 휴대폰 안의 치수는 모두 em — .ap-phone 의 font-size 하나로 크기를 바꾼다.
   모바일은 두 대가 화면 폭에 맞게 나란히 서도록 폭에서 계산한다 (46.5em = 두 대 폭 + 사이 간격 여유) */
.ap-phone {
  font-size: calc((100vw - 2 * var(--ap-gutter) - 14px) / 46.5);
  width: 23em; height: 48em; padding: .85em; border-radius: 3.6em;
  background: #1C1F24; box-shadow: 0 2.4em 4.8em rgba(16, 40, 34, .18), inset 0 0 0 .22em #3A3F46;
}
@media (min-width: 600px) { .ap-phone { font-size: 10px; } }
@media (min-width: 1024px) { .ap-phone { font-size: 9.6px; } }
@media (min-width: 1200px) { .ap-phone { font-size: 10.6px; } }
.ap-phone-screen {
  position: relative; height: 100%; overflow: hidden; padding: 0 1.4em; border-radius: 2.8em; background: #fff;
  color: #1D2330; font-size: 1em; line-height: 1.4; letter-spacing: -.02em;
}
.ap-phone-screen::before { content: ""; position: absolute; top: 0; left: 50%; width: 8.4em; height: 2em; transform: translateX(-50%); border-radius: 0 0 1.2em 1.2em; background: #1C1F24; }
.ap-ph-status { display: flex; justify-content: space-between; align-items: center; height: 3em; padding: .5em .6em 0; font-size: 1.05em; font-weight: 700; }
.ap-ph-sys { display: inline-flex; align-items: flex-end; gap: .25em; }
.ap-ph-sys i { display: block; width: .3em; border-radius: .08em; background: currentColor; }
.ap-ph-sys i:nth-child(1) { height: .45em; } .ap-ph-sys i:nth-child(2) { height: .7em; }
.ap-ph-sys i:nth-child(3) { width: 1.5em; height: .75em; border-radius: .2em; margin-left: .2em; }
.ap-ph-head { position: relative; display: flex; justify-content: center; align-items: center; height: 3.1em; font-size: 1.25em; }
.ap-ph-head b { font-weight: 700; }
.ap-ph-head > svg { position: absolute; right: .1em; font-size: 1.05em; }
.ap-ph-h { color: #1D2330; font-size: 1.3em; font-weight: 800; }

/* 임대인 화면 */
.ap-ph-month { display: flex; justify-content: flex-end; align-items: center; gap: .7em; font-size: 1.05em; font-weight: 600; }
.ap-ph-month i { width: 0; height: 0; border-style: solid; border-width: .28em 0 .28em .42em; border-color: transparent transparent transparent #1D2330; }
.ap-ph-month i.is-prev { transform: scaleX(-1); }
.ap-ph-tabs { display: flex; gap: 1.1em; margin-top: .2em; border-bottom: .1em solid #EEF1F3; font-size: 1.1em; }
.ap-ph-tabs span { padding: .35em 0; color: #B4BBC4; }
.ap-ph-tabs .is-on { color: #1D2330; font-weight: 700; box-shadow: inset 0 -.16em 0 #1D2330; }
.ap-ph-banner { position: relative; margin-top: 1em; min-height: 5.2em; padding: 1.05em 1.1em; border-radius: .9em; background: var(--ap-mint); color: #fff; font-size: .95em; line-height: 1.5; }
.ap-ph-banner p { position: relative; z-index: 1; padding-right: 4.2em; }
.ap-ph-banner b { font-weight: 700; }
.ap-ph-page { position: absolute; top: .55em; right: .7em; padding: 0 .55em; border-radius: 1em; background: rgba(0, 0, 0, .14); font-size: .8em; }
.ap-ph-receipt { position: absolute; right: 1.5em; bottom: .8em; width: 2.4em; height: 3em; border-radius: .25em; background: #fff; box-shadow: 0 .2em .5em rgba(0, 0, 0, .12); }
.ap-ph-receipt::before { content: ""; position: absolute; left: .45em; right: .45em; top: .6em; height: 1.2em; background: repeating-linear-gradient(#D9E2E0 0 .14em, transparent .14em .4em); }
.ap-ph-receipt::after { content: ""; position: absolute; right: -.7em; bottom: -.3em; width: 1.6em; height: 1.6em; border-radius: 50%; background: #F7C948; box-shadow: inset 0 0 0 .2em #E8B530; }
.ap-ph-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.3em; }
.ap-ph-row small { color: #8A929C; font-size: .9em; }
.ap-ph-row small b { margin-left: .35em; color: #1D2330; font-weight: 700; }
.ap-ph-stats { display: flex; align-items: center; gap: 1.6em; margin-top: 1em; }
.ap-ph-donut { position: relative; flex: none; width: 8.2em; height: 8.2em; border-radius: 50%; background: conic-gradient(from -14deg, #4A7BE5 0 3%, var(--ap-mint) 3% 99%, #E3E8EC 99% 100%); }
.ap-ph-donut::before { content: ""; position: absolute; inset: 1.1em; border-radius: 50%; background: #fff; }
.ap-ph-donut > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8A929C; font-size: .85em; line-height: 1.2; }
.ap-ph-donut b { color: #1D2330; font-size: 2.1em; font-weight: 800; }
.ap-ph-donut b small { font-size: .5em; }
.ap-ph-legend { flex: 1; display: grid; gap: .85em; }
.ap-ph-legend li { display: flex; align-items: center; gap: .5em; color: #6F7782; font-size: .95em; }
.ap-ph-legend i { width: .55em; height: .55em; border-radius: 50%; background: #D5DBE0; }
.ap-ph-legend b { margin-left: auto; color: #1D2330; font-size: 1.3em; font-weight: 800; }
.ap-ph-legend .is-monthly { color: #00B894; } .ap-ph-legend i.is-monthly { background: var(--ap-mint); }
.ap-ph-legend .is-jeonse { color: #4A7BE5; } .ap-ph-legend i.is-jeonse { background: #4A7BE5; }
.ap-ph-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin-top: 1.2em; }
.ap-ph-pair span { display: flex; justify-content: space-between; align-items: center; padding: .65em .85em; border: .1em solid #E8ECEF; border-radius: .7em; color: #7D8590; font-size: .9em; }
.ap-ph-pair b { color: #1D2330; font-size: 1.35em; font-weight: 800; }
.ap-ph-sum { margin-top: .8em; padding: .3em 1em; border-radius: .8em; background: #F5F7F8; }
.ap-ph-sum div { display: flex; justify-content: space-between; padding: .6em 0; font-size: .95em; }
.ap-ph-sum dt { color: #6F7782; }
.ap-ph-sum dd { color: #1D2330; font-weight: 700; }
.ap-ph-sum dd::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .55em; border: solid #8A929C; border-width: 0 .12em .12em 0; transform: translateY(-.25em) rotate(45deg); }
.ap-ph-last { align-items: center; margin-top: 1.1em; }
.ap-ph-fab { display: inline-flex; align-items: center; justify-content: center; width: 3.3em; height: 3.3em; border-radius: .9em; background: var(--ap-mint); color: #fff; font-size: 1.1em; box-shadow: 0 .5em 1em rgba(3, 201, 164, .35); }

/* 임차인 화면 */
.ap-ph-title { margin-top: .4em; }
.ap-ph-contract { margin-top: .8em; padding: 1.1em 1.1em .9em; border: .1em solid #EEF0F2; border-radius: 1em; box-shadow: 0 .3em 1em rgba(0, 0, 0, .05); }
.ap-ph-place { display: flex; gap: .8em; align-items: flex-start; color: #7D8590; font-size: .9em; line-height: 1.5; }
.ap-ph-place b { display: block; color: #1D2330; font-size: 1.12em; font-weight: 700; }
.ap-ph-pin { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--ap-red); color: #fff; font-size: 1.15em; }
.ap-ph-term { margin-top: .9em; padding-top: .8em; border-top: .1em solid #F0F2F4; text-align: center; color: #8A929C; font-size: .85em; }
.ap-ph-contact { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin-top: 1em; }
.ap-ph-contact span { display: flex; align-items: center; justify-content: center; gap: .45em; height: 3.1em; border-radius: .8em; background: #FFF0F0; color: #E5484F; font-size: .92em; font-weight: 600; }
.ap-ph-contact svg { font-size: 1.15em; }
.ap-ph-bill { margin-top: 1em; padding: .5em 1.1em; border-radius: .9em; background: #F6F7F8; }
.ap-ph-bill div { display: flex; justify-content: space-between; align-items: center; padding: .55em 0; font-size: .95em; }
.ap-ph-bill dt { color: #5F6873; }
.ap-ph-bill dd { display: flex; align-items: center; gap: .6em; color: #1D2330; font-weight: 700; }
.ap-ph-bill small { padding: .1em .5em; border-radius: .3em; background: #C9CED4; color: #fff; font-size: .78em; font-weight: 600; }
.ap-ph-note { margin-top: .8em; color: #9AA1AA; font-size: .82em; line-height: 1.45; }
.ap-ph-next { margin: 1.1em -1.1em 0; padding: 1em 1.1em 0; border-top: .5em solid #F4F5F7; }

/* ── 2. 소개 ── */
.ap-intro-inner { display: grid; gap: 28px; }
.ap-points { display: grid; gap: 18px; }
.ap-points li { display: flex; align-items: center; gap: 16px; }
.ap-points h3 { color: var(--ap-ink); font-size: 16px; font-weight: 700; }
.ap-points p { margin-top: 2px; color: var(--ap-muted); font-size: 14px; line-height: 1.55; }
@media (min-width: 640px) {
  .ap-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ap-points li { flex-direction: column; gap: 14px; text-align: center; }
}
@media (min-width: 1024px) {
  .ap-intro-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 40px; }
  .ap-points { padding-left: 32px; border-left: 1px solid var(--ap-line); }
  .ap-points h3 { font-size: 17px; }
}

/* ── 3. 앱 고르기 ── */
.ap-choose { padding-top: 24px; }
@media (min-width: 1024px) { .ap-choose { padding-top: 32px; } }
.ap-app-grid { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 1024px) { .ap-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; } }
.ap-app { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 24px 20px; border-radius: var(--ap-radius); background: var(--ap-mint-bg); scroll-margin-top: 20px; }
.ap-app.is-tenant { background: var(--ap-pink-bg); }
.ap-app-body { display: grid; gap: 22px; }
@media (min-width: 640px) { .ap-app-body { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px; } }
/* 두 카드가 나란히 서는 1024~1199px 은 카드가 좁아 기능 목록을 제목 아래로 내린다 */
@media (min-width: 1024px) and (max-width: 1199px) { .ap-app-body { grid-template-columns: minmax(0, 1fr); } }
.ap-app-top { display: flex; align-items: center; gap: 12px; }
.ap-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 14px; background: var(--ap-deep); color: #fff; font-size: 13px; font-weight: 700; }
.ap-app.is-tenant .ap-badge { background: var(--ap-red-strong); }
.ap-app h3 { margin-top: 18px; color: var(--ap-ink); font-size: 22px; font-weight: 800; line-height: 1.4; letter-spacing: -.035em; }
.ap-app-desc { margin-top: 10px; font-size: 15px; line-height: 1.65; }
.ap-app .ap-checks { padding-top: 4px; }
/* width 0 + min-width 100%: 긴 안내 문구가 목록 칸을 넓히지 않고 목록 폭 안에서 줄바꿈한다 */
.ap-app-note { width: 0; min-width: 100%; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(214, 58, 66, .18); color: var(--ap-muted); font-size: 12.5px; line-height: 1.5; }
.ap-app-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ap-app-actions .ap-btn { padding: 0 12px; }
@media (min-width: 1024px) {
  .ap-app { padding: 32px; }
  .ap-app h3 { font-size: 24px; }
  .ap-app-actions { gap: 12px; }
  .ap-app .ap-checks li { font-size: 14.5px; }
}
@media (min-width: 1200px) { .ap-app { padding: 32px 36px; } .ap-app h3 { font-size: 26px; } .ap-app .ap-checks li { font-size: 15px; } }

/* ── 4. 함께 쓰면 ── */
.ap-together { background: linear-gradient(100deg, #EAF8F1 0%, #EFF9F5 100%); }
.ap-together-inner { display: grid; gap: 24px; }
@media (min-width: 1200px) { .ap-together-inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 32px; } }
.ap-pair { display: grid; gap: 10px; }
@media (min-width: 640px) { .ap-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; } }
.ap-pair-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--ap-radius); background: #fff; box-shadow: var(--ap-shadow); }
.ap-pair-card .ap-appicon { width: 52px; height: 52px; border-radius: 14px; font-size: 38px; }
.ap-pair-card h3 { color: var(--ap-deep); font-size: 16px; font-weight: 800; }
.ap-pair-card.is-tenant h3 { color: var(--ap-red-strong); }
.ap-checks-sm { gap: 6px; margin-top: 6px; }
.ap-checks-sm li { font-size: 13.5px; }
.ap-checks-sm svg { font-size: 17px; }
.ap-pair-link { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ap-muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
.ap-pair-link svg { font-size: 26px; color: var(--ap-primary); transform: rotate(90deg); }
.ap-pair-link br { display: none; }
@media (min-width: 640px) {
  .ap-pair-link { flex-direction: column; }
  .ap-pair-link svg { font-size: 32px; transform: none; }
  .ap-pair-link br { display: inline; }
}
.ap-note { margin-top: 14px; color: var(--ap-muted); font-size: 13px; line-height: 1.6; text-align: center; text-wrap: balance; }
@media (min-width: 1024px) { .ap-pair-card { padding: 20px 22px; } .ap-pair-card .ap-appicon { width: 60px; height: 60px; border-radius: 16px; font-size: 44px; } .ap-pair-card h3 { font-size: 17px; } }

/* ── 5. 시작 방법 ── */
.ap-steps { display: grid; gap: 20px; margin-top: 28px; }
.ap-steps li { display: flex; align-items: center; gap: 16px; }
.ap-step-no { display: block; color: var(--ap-ink); font-size: 14px; font-weight: 700; }
.ap-steps h3 { color: var(--ap-ink); font-size: 17px; font-weight: 800; }
.ap-steps p { margin-top: 4px; color: var(--ap-muted); font-size: 14px; line-height: 1.6; }
@media (min-width: 1024px) {
  .ap-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; }
  .ap-steps li { gap: 20px; padding: 4px 24px; }
  .ap-steps li:first-child { padding-left: 0; }
  .ap-steps li + li { border-left: 1px solid var(--ap-line); }
  .ap-step-no { font-size: 15px; }
  .ap-steps h3 { font-size: 18px; }
}
/* 1024~1199px 은 세 칸이 좁아 아이콘을 줄이고 설명의 강제 줄바꿈을 푼다 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .ap-steps .ap-icon-lg { width: 64px; height: 64px; font-size: 30px; }
  .ap-steps br { display: none; }
}
.ap-guide { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin-top: 32px; color: var(--ap-muted); font-size: 14px; text-align: center; }
.ap-guide span:first-child { flex-basis: 100%; }
@media (min-width: 768px) { .ap-guide span:first-child { flex-basis: auto; } }
.ap-guide a { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 1px; border-bottom: 1.5px solid currentColor; color: var(--ap-deep); font-size: 15px; font-weight: 700; }
.ap-guide a svg { font-size: 16px; }
.ap-guide a:hover { color: var(--ap-primary); }

/* ── 6. 자주 묻는 질문 ── */
.ap-faq { padding-top: 0; }
.ap-faq-inner { display: grid; gap: 20px; }
@media (min-width: 1024px) { .ap-faq-inner { grid-template-columns: 3fr 7fr; gap: 40px; align-items: start; } }
.ap-faq-list { display: grid; gap: 10px; }
.ap-faq-list details { border: 1px solid var(--ap-line); border-radius: 10px; background: #fff; }
.ap-faq-list details[open] { border-color: #CFE3DC; box-shadow: 0 2px 10px rgba(23, 28, 38, .04); }
.ap-faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px;
  color: var(--ap-ink); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none;
}
.ap-faq-list summary::-webkit-details-marker { display: none; }
.ap-faq-list summary::after { content: ""; flex: none; width: 8px; height: 8px; border: solid #66717E; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.ap-faq-list details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ap-faq-answer { padding: 0 16px 16px; color: var(--ap-muted); font-size: 14px; line-height: 1.7; }
.ap-faq-answer a { color: var(--ap-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 1024px) { .ap-faq-list summary { padding: 18px 22px; font-size: 16px; } .ap-faq-answer { padding: 0 22px 18px; font-size: 15px; } }

/* ── 7. 다운로드 ── */
.ap-download { padding: 48px 0; background: var(--ap-deep); }
.ap-download h2 { color: #fff; font-size: 22px; font-weight: 800; line-height: 1.4; letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.ap-dl-grid { display: grid; gap: 12px; margin-top: 24px; }
.ap-dl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; padding: 20px; border-radius: var(--ap-radius); background: #fff; }
.ap-dl-name { display: flex; align-items: center; gap: 14px; color: var(--ap-ink); font-size: 18px; font-weight: 800; }
.ap-dl-name .ap-appicon { width: 52px; height: 52px; border-radius: 14px; font-size: 38px; }
.ap-dl-stores { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-store {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px;
  border-radius: 8px; background: var(--ap-deep); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.ap-store svg { font-size: 18px; }
.ap-store:hover { background: var(--ap-deep-hover); }
.ap-dl.is-tenant .ap-store { background: var(--ap-red-strong); }
.ap-dl.is-tenant .ap-store:hover { background: var(--ap-red-hover); }
/* 휴대폰: 내 OS 스토어를 앞에 두고, 다른 스토어는 테두리 버튼으로 (app.js 가 data-ap-os · is-mine 을 단다) */
.ap-store.is-mine { order: -1; }
html[data-ap-os] .ap-store:not(.is-mine) { background: #fff; color: var(--ap-deep); box-shadow: inset 0 0 0 1.5px var(--ap-deep-line); }
html[data-ap-os] .ap-dl.is-tenant .ap-store:not(.is-mine) { background: #fff; color: var(--ap-red-strong); box-shadow: inset 0 0 0 1.5px var(--ap-red-line); }
@media (max-width: 639px) {
  .ap-dl-stores { width: 100%; }
  .ap-store { flex: 1 1 0; padding: 0 12px; }
}
@media (min-width: 1024px) {
  .ap-download { padding: 56px 0; }
  .ap-download h2 { font-size: 28px; }
  .ap-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
  .ap-dl { padding: 22px 28px; }
  .ap-dl-name { font-size: 19px; }
  .ap-dl-name .ap-appicon { width: 60px; height: 60px; border-radius: 16px; font-size: 44px; }
}

/* ── 8. 다른 서비스 ── */
.ap-more { padding: 32px 0; background: #F6F9F8; }
.ap-more-inner { display: grid; gap: 16px; }
.ap-more h2 { color: var(--ap-ink); font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.ap-more-links { display: grid; gap: 8px; }
.ap-more-links a {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px;
  border: 1px solid var(--ap-line); border-radius: 10px; background: #fff; color: var(--ap-ink); font-size: 15px; font-weight: 600;
  transition: border-color .15s, color .15s;
}
.ap-more-links a:hover { border-color: var(--ap-deep-line); color: var(--ap-deep); }
.ap-more-links svg { font-size: 20px; color: var(--ap-deep); }
.ap-more-links .ap-more-arrow { margin-left: auto; font-size: 16px; color: var(--ap-muted); }
@media (min-width: 768px) { .ap-more-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .ap-more { padding: 36px 0; }
  .ap-more-inner { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 40px; }
  .ap-more h2 { font-size: 24px; }
  .ap-more-links { grid-template-columns: repeat(3, auto); justify-content: end; gap: 12px; }
  .ap-more-links a { gap: 12px; min-height: 56px; padding: 0 22px; }
  .ap-more-links .ap-more-arrow { margin-left: 28px; }
}

/* ════════ 앱별 소개 페이지 (/app/landlord-app · /app/tenant-app) ════════
   두 페이지는 같은 부품을 쓰고, 색은 main 의 .ap-landlord / .ap-tenant 강조색을 따른다. */
.ap-tenant .ap-hero { background: linear-gradient(100deg, #FDEDED 0%, #FEF2F2 50%, #FFF7F6 100%); }
.ap-title-center { text-align: center; }
.ap-tight { padding-top: 0; }
.ap-fine { margin-top: 14px; color: var(--ap-muted); font-size: 13px; line-height: 1.6; }
/* 임차인 히어로 제목은 첫 줄이 길어서 한 단계 작게 */
@media (min-width: 768px) and (max-width: 1023px) { .ap-tenant .ap-hero h1 { font-size: 40px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .ap-tenant .ap-hero h1 { font-size: 34px; } }
@media (min-width: 1200px) { .ap-tenant .ap-hero h1 { font-size: 44px; } }

/* 버튼 추가분: 초록 상자 위의 흰 버튼·테두리 버튼, 밑줄 링크 */
.ap-btn-white { background: #fff; color: var(--ap-deep); }
.ap-btn-white:hover { background: #F0F8F4; }
.ap-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .75); }
.ap-btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.ap-textlink { display: inline-flex; align-items: center; min-height: 50px; padding: 0 6px; color: var(--ap-accent-ink); font-size: 15px; font-weight: 700; }
.ap-textlink > span { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 1.5px solid currentColor; }
.ap-textlink svg { font-size: 16px; }
.ap-textlink:hover { color: var(--ap-accent-hover); }
@media (min-width: 768px) { .ap-textlink { min-height: 56px; font-size: 16px; } }

/* "앱 다운로드" 스토어 고르기 메뉴 (details). 휴대폰에서는 app.js 가 내 OS 스토어로 바로 가는 링크로 바꾼다 */
.ap-get { position: relative; display: inline-flex; }
.ap-get > summary { list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
.ap-get > summary::-webkit-details-marker { display: none; }
.ap-get-pop {
  position: absolute; z-index: 25; top: calc(100% + 8px); left: 0; display: grid; gap: 4px; min-width: max(100%, 220px);
  padding: 8px; border: 1px solid var(--ap-line); border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(16, 40, 34, .16);
}
.ap-get-pop.is-up { top: auto; bottom: calc(100% + 8px); }
.ap-get-pop a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 8px; color: var(--ap-ink); font-size: 15px; font-weight: 700; white-space: nowrap; }
.ap-get-pop a:hover, .ap-get-pop a:focus-visible { background: var(--ap-accent-tint); color: var(--ap-accent-ink); }
.ap-get-pop svg { font-size: 18px; color: var(--ap-accent); }
@media (max-width: 767px) {
  .ap-hero .ap-actions > .ap-get, .ap-hero .ap-actions > .ap-textlink { flex: 1 1 100%; }
  .ap-hero .ap-actions > .ap-get > summary { width: 100%; }
  .ap-hero .ap-actions > .ap-textlink { justify-content: center; }
}

/* ── 휴대폰 화면 부품 추가분 (모두 em: 휴대폰 크기를 따라 커지고 작아진다) ── */
.ap-ph-tools { display: inline-flex; align-items: center; gap: .7em; }
.ap-ph-head .ap-ph-tools { position: absolute; right: .1em; font-size: 1em; }
.ap-ph-dot { position: relative; display: inline-flex; }
.ap-ph-dot::after { content: ""; position: absolute; top: 0; right: .02em; width: .34em; height: .34em; border-radius: 50%; background: var(--ap-red); box-shadow: 0 0 0 .08em #fff; }
.ap-ph-month.is-center { justify-content: center; margin-top: .3em; }
.ap-ph-tabs-ic { margin-left: auto; align-self: center; color: var(--ap-mint-ink); }
.ap-ph-tabs.is-split span { flex: 1; text-align: center; }
.ap-ph-tabbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: .6em .6em 1.2em; border-top: .1em solid #EEF0F2; background: #fff; color: #9AA1AA; font-size: .78em; }
.ap-ph-tabbar span { display: flex; flex-direction: column; align-items: center; gap: .25em; }
.ap-ph-tabbar svg { font-size: 1.7em; }
.ap-ph-tabbar .is-on { color: var(--ap-mint-ink); font-weight: 700; }
.ap-tenant .ap-ph-tabbar .is-on { color: #E5484F; }
/* 건물별 목록 (입주율 도넛·임대수익 막대·신규/만료/미납 표시) */
.ap-ph-sort { display: flex; align-items: center; gap: .9em; margin-top: .6em; padding: .5em .1em; color: #A3AAB3; font-size: .88em; }
.ap-ph-sort span:first-child { flex: 1; }
.ap-ph-sort b { color: var(--ap-mint-ink); font-weight: 700; }
.ap-ph-blist li { padding: .8em 0 .9em; border-top: .1em solid #F0F2F4; }
.ap-ph-bname { display: flex; align-items: center; gap: .4em; font-size: .98em; font-weight: 700; }
.ap-ph-star { margin-left: auto; width: 1.15em; height: 1.15em; background: #D9DEE3; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ap-ph-star.is-on { background: #F5B70A; }
.ap-ph-brow { display: flex; align-items: center; gap: .9em; margin-top: .55em; }
.ap-ph-mdonut { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 4.6em; height: 4.6em; border-radius: 50%; background: conic-gradient(var(--ap-mint) calc(var(--p) * 1%), #E3E8EC 0); }
.ap-ph-mdonut::before { content: ""; position: absolute; inset: .55em; border-radius: 50%; background: #fff; }
.ap-ph-mdonut b { position: relative; font-size: .92em; font-weight: 800; }
.ap-ph-rev { flex: 1; display: grid; gap: .25em; color: #8A929C; font-size: .8em; }
.ap-ph-rev b { color: #1D2330; font-size: 1.3em; font-weight: 800; }
.ap-ph-rev i { display: block; height: .45em; border-radius: .3em; background: linear-gradient(90deg, var(--ap-mint) var(--w), #E3E8EC var(--w)); }
.ap-ph-rev small { font-size: 1em; }
.ap-ph-rev small:last-child { text-align: right; }
.ap-ph-btags { display: grid; gap: .35em; min-width: 3.4em; }
.ap-ph-btags span { padding: .15em .5em; border-radius: .35em; background: #EEF0F2; color: #6F7782; font-size: .76em; font-weight: 700; text-align: center; }
.ap-ph-btags .is-new { background: #E2F7F1; color: var(--ap-mint-ink); }
.ap-ph-btags .is-late { background: #FDECEC; color: #E5484F; }
/* 건물 사진 대신 그린 작은 건물 */
.ap-ph-bthumb { position: relative; flex: none; width: 3.6em; height: 3.6em; overflow: hidden; border-radius: .5em; background: linear-gradient(180deg, #D7E6F3 0%, #EEF4F9 100%); }
.ap-ph-bthumb::before { content: ""; position: absolute; left: 26%; right: 26%; top: 16%; bottom: 0; border-radius: .15em .15em 0 0; background: repeating-linear-gradient(180deg, #7F8E9C 0 .22em, #C5D0DA .22em .6em); }
.ap-ph-bthumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: #B9C9B3; }
.ap-ph-bthumbs li { display: flex; align-items: center; gap: .9em; padding: .7em 0; border-top: .1em solid #F0F2F4; color: #8A929C; font-size: .85em; line-height: 1.5; }
.ap-ph-bthumbs li:first-child { border-top: 0; }
.ap-ph-bthumbs b, .ap-ph-bitem b { display: block; color: #1D2330; font-size: 1.12em; font-weight: 700; }
.ap-ph-bitem { display: flex; align-items: center; gap: .9em; margin-top: .7em; color: #8A929C; font-size: .82em; line-height: 1.5; }
/* 수납·지출·알림 목록 */
.ap-ph-total { display: flex; justify-content: space-between; align-items: center; margin-top: .7em; padding: .6em 0; color: #5F6873; font-size: .95em; }
.ap-ph-total b { color: #1D2330; font-size: 1.3em; font-weight: 800; }
.ap-ph-income li { display: grid; grid-template-columns: minmax(0, 1fr) 2.6em auto; align-items: center; gap: .6em; padding: .75em 0; border-top: .1em solid #F0F2F4; font-size: .92em; }
.ap-ph-income span:first-child { display: flex; align-items: center; gap: .45em; }
.ap-ph-income span:first-child::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.ap-ph-income b { text-align: center; font-weight: 700; }
.ap-ph-income span:last-child { text-align: right; color: #1D2330; font-weight: 700; }
.ap-ph-income .is-paid span:first-child, .ap-ph-income .is-paid b { color: var(--ap-mint-ink); }
.ap-ph-income .is-late span:first-child, .ap-ph-income .is-late b { color: #E5484F; }
.ap-ph-income .is-due span:first-child { color: #4A7BE5; }
.ap-ph-toggles li { display: flex; align-items: center; gap: .8em; padding: .7em 0; border-top: .1em solid #F0F2F4; }
.ap-ph-toggles li:first-child { border-top: 0; }
.ap-ph-radio { position: relative; flex: none; width: 1em; height: 1em; border: .14em solid var(--ap-mint-ink); border-radius: 50%; }
.ap-ph-radio::after { content: ""; position: absolute; inset: .17em; border-radius: 50%; background: var(--ap-mint-ink); }
.ap-ph-toggles span { flex: 1; color: #8A929C; font-size: .8em; line-height: 1.45; }
.ap-ph-toggles b { display: block; color: #1D2330; font-size: 1.15em; font-weight: 700; }
.ap-ph-sw { position: relative; flex: none; width: 2.6em; height: 1.5em; border-radius: .75em; background: var(--ap-mint-ink); }
.ap-ph-sw::after { content: ""; position: absolute; top: .2em; right: .2em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; }
.ap-ph-exp li { display: flex; justify-content: space-between; align-items: flex-start; padding: .55em 0; border-top: .1em solid #F0F2F4; color: #5F6873; font-size: .9em; }
.ap-ph-exp b { display: grid; justify-items: end; color: #1D2330; font-weight: 700; }
.ap-ph-exp small { color: #A3AAB3; font-size: .8em; font-weight: 500; }
.ap-ph-xbtn { margin-top: .7em; padding: .7em; border-radius: .7em; background: var(--ap-deep); color: #fff; text-align: center; font-size: .9em; font-weight: 700; }
/* 색 머리 (임차인 앱 빨강·임대인 앱 초록) + 겹쳐 올라오는 카드 */
.ap-ph-colortop { margin: 0 -1.4em; padding: 0 1.4em 2.4em; color: #fff; }
.ap-mphone .ap-ph-colortop { margin: 0 -1.3em; padding: 0 1.3em 2.4em; }
.ap-ph-colortop.is-red { background: #E65C62; }
.ap-ph-colortop.is-green { background: #146E54; }
.ap-ph-brandbar { display: flex; align-items: center; gap: .55em; height: 2.5em; font-size: 1.02em; font-weight: 800; }
.ap-ph-brandbar > :last-child { margin-left: auto; }
.ap-ph-burger { display: grid; gap: .2em; }
.ap-ph-burger i { display: block; width: 1em; height: .13em; border-radius: .1em; background: currentColor; }
.ap-ph-big { margin-top: .3em; font-size: 1.7em; font-weight: 800; line-height: 1.3; }
.ap-ph-tagline { margin-top: .15em; font-size: .85em; opacity: .9; }
.ap-ph-card { position: relative; margin-top: .75em; padding: .95em 1.05em; border-radius: 1em; background: #fff; box-shadow: 0 .3em 1.2em rgba(0, 0, 0, .07); }
.ap-ph-colortop + .ap-ph-card { margin-top: -1.6em; }
.ap-ph-card.is-line { box-shadow: none; border: .1em solid #EEF0F2; }
.ap-ph-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5em; font-size: 1.08em; }
.ap-ph-card-head b { font-weight: 800; }
.ap-ph-card-head small { color: #8A929C; font-size: .76em; font-weight: 500; }
.ap-ph-pill { padding: .15em .6em; border-radius: .4em; background: #FDE8E7; color: #E5484F; font-size: .72em; font-weight: 700; }
.ap-ph-home { margin-top: .5em; color: #8A929C; font-size: .82em; line-height: 1.5; }
.ap-ph-home b { display: block; color: #1D2330; font-size: 1.32em; font-weight: 800; }
.ap-ph-kv { display: grid; gap: .3em; margin-top: .6em; font-size: .86em; }
.ap-ph-kv div { display: grid; grid-template-columns: 5em 1fr; }
.ap-ph-kv dt { color: #8A929C; }
.ap-ph-kv dd { color: #1D2330; font-weight: 600; }
.ap-ph-due { margin-top: .45em; color: #3D4651; font-size: .84em; }
.ap-ph-due b { color: #E5484F; font-weight: 800; }
.ap-ph-paid { display: flex; align-items: center; gap: .55em; margin-top: .55em; padding: .5em .75em; border-radius: .7em; background: #FFF1F1; font-size: .86em; }
.ap-ph-paid svg { font-size: 1.5em; color: #E5484F; }
.ap-ph-paid b { margin-left: auto; color: #E5484F; font-weight: 800; }
.ap-ph-notice li { display: flex; align-items: center; gap: .55em; padding: .3em 0; color: #3D4651; font-size: .86em; }
.ap-ph-notice li::before { content: ""; flex: none; width: .55em; height: .55em; border: .15em solid #E5484F; border-radius: 50%; }
.ap-ph-notice span { margin-left: auto; color: #A3AAB3; font-size: .9em; }
.ap-ph-notice.is-boxed li { padding: .85em .2em; border-bottom: .1em solid #F0F2F4; }
.ap-ph-sched li { display: flex; align-items: center; gap: .65em; padding: .35em 0; font-size: .86em; }
.ap-ph-sched li::before { content: ""; flex: none; width: .5em; height: .5em; margin: 0 .15em; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .16em #fff, 0 0 0 .3em currentColor; }
.ap-ph-sched .is-red { color: #E5484F; }
.ap-ph-sched .is-amber { color: #F2A516; }
.ap-ph-sched .is-blue { color: #4A7BE5; }
.ap-ph-sched span { color: #3D4651; }
.ap-ph-sched b { margin-left: auto; color: #1D2330; font-weight: 700; }
/* 커뮤니티 */
.ap-ph-scope { display: flex; align-items: center; gap: .5em; margin-top: .5em; font-size: 1.1em; }
.ap-ph-scope b { font-weight: 800; }
.ap-ph-chev { width: .5em; height: .5em; border: solid #1D2330; border-width: 0 .14em .14em 0; transform: translateY(-.15em) rotate(45deg); }
.ap-ph-scope .ap-ph-tools { margin-left: auto; font-size: .95em; }
.ap-ph-rule { display: flex; align-items: center; gap: .6em; margin-top: .75em; padding: .7em .9em; border: .1em solid #EEF0F2; border-radius: .8em; font-size: .9em; font-weight: 700; }
.ap-ph-rule svg { color: #E5484F; font-size: 1.2em; }
.ap-ph-go { margin-left: auto; width: .45em; height: .45em; border: solid #8A929C; border-width: .14em .14em 0 0; transform: rotate(45deg); }
.ap-ph-posts li { padding: .75em 0; border-bottom: .1em solid #F0F2F4; }
.ap-ph-ptitle { display: flex; align-items: center; gap: .45em; font-size: .92em; }
.ap-ph-ptitle b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.ap-ph-ptag { flex: none; padding: .1em .45em; border-radius: .3em; font-size: .8em; font-weight: 700; }
.ap-ph-ptag.is-share { background: #FFF2D6; color: #B7791F; }
.ap-ph-ptag.is-info { background: #E6EEFC; color: #3B6BD6; }
.ap-ph-ptag.is-talk { background: #E2F7F1; color: #0F9F78; }
.ap-ph-ptag.is-ask { background: #F1ECFB; color: #7650C2; }
.ap-ph-ptext { margin-top: .3em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #8A929C; font-size: .82em; }
.ap-ph-pmeta { display: flex; align-items: center; gap: .7em; margin-top: .4em; color: #A3AAB3; font-size: .76em; }
.ap-ph-pstat { display: inline-flex; gap: .7em; margin-left: auto; }
.ap-ph-pstat span { display: inline-flex; align-items: center; gap: .2em; }
.ap-ph-fab.is-float { position: absolute; right: 1.1em; bottom: 1.3em; border-radius: 50%; }
.ap-ph-fab.is-red { background: var(--ap-red); box-shadow: 0 .5em 1em rgba(242, 87, 92, .35); }

/* 기능 카드 속 휴대폰: 위쪽만 보이고 아래는 카드 끝에서 잘린다 */
.ap-mphone { font-size: 8.4px; width: 21em; height: 23em; padding: .8em .8em 0; border-radius: 2.8em 2.8em 0 0; background: #1C1F24; box-shadow: 0 1.2em 3em rgba(16, 40, 34, .14); }
@media (min-width: 1024px) { .ap-mphone { font-size: 9px; } }
@media (min-width: 1200px) { .ap-mphone { font-size: 10px; } }
.ap-mphone .ap-phone-screen { border-radius: 2em 2em 0 0; padding: 0 1.3em; }
.ap-mphone:not(.has-notch) .ap-phone-screen::before { display: none; }
.ap-mph-head { display: flex; align-items: center; gap: .6em; height: 3.3em; color: #1D2330; font-size: 1.12em; }
.ap-mph-head b { font-weight: 800; }
.ap-mph-head > .ap-ph-tools, .ap-mph-head > small { margin-left: auto; }
.ap-mph-head small { color: #8A929C; font-size: .72em; }

/* ── 임대인: 핵심 기능 세 줄 ── */
.ap-strip { padding: 32px 0; border-bottom: 1px solid var(--ap-line); }
.ap-strip-list { display: grid; gap: 20px; }
.ap-strip-list li { display: flex; align-items: center; gap: 16px; }
.ap-strip-list h3 { color: var(--ap-ink); font-size: 16px; font-weight: 800; }
.ap-strip-list p { margin-top: 4px; color: var(--ap-muted); font-size: 14px; line-height: 1.6; text-wrap: pretty; }
@media (min-width: 1024px) {
  .ap-strip { padding: 36px 0; }
  .ap-strip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .ap-strip-list li { padding: 0 24px; }
  .ap-strip-list li:first-child { padding-left: 0; }
  .ap-strip-list li + li { border-left: 1px solid var(--ap-line); }
  .ap-strip .ap-icon { width: 64px; height: 64px; font-size: 30px; }
  .ap-strip-list h3 { font-size: 17px; }
}

/* ── 임차인: 이용 대상 안내 ── */
.ap-target { padding: 28px 0 0; }
.ap-target-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 20px; border-radius: var(--ap-radius); background: #FFF3F3; text-align: center; }
.ap-target-box strong { color: var(--ap-ink); font-size: 17px; font-weight: 800; text-wrap: balance; }
.ap-target-box > span:last-child { color: var(--ap-text); font-size: 15px; }
@media (min-width: 768px) {
  .ap-target-box { flex-wrap: nowrap; padding: 20px 32px; }
  .ap-target-box strong { font-size: 19px; }
  .ap-target-box > span:last-child { padding-left: 20px; border-left: 1px solid rgba(214, 58, 66, .22); font-size: 16px; }
}

/* ── 주요 기능 카드 2×2 ── */
.ap-feat-grid { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 1024px) { .ap-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; } }
.ap-feat { display: grid; overflow: hidden; border-radius: var(--ap-radius); background: #F7FAF9; }
.ap-feat.is-mint { background: #EEF8F3; }
.ap-feat.is-pink { background: #FDF3F2; }
.ap-tenant .ap-feat.is-pink { background: #FEF6F6; }
.ap-feat-copy { padding: 24px 22px 22px; }
.ap-feat h3 { color: var(--ap-ink); font-size: 19px; font-weight: 800; line-height: 1.4; letter-spacing: -.03em; }
.ap-feat-copy > p { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.ap-feat-copy > .ap-feat-top { margin-top: 0; }
.ap-feat-copy > .ap-fine { margin-top: 10px; font-size: 13px; }
.ap-feat .ap-checks { margin-top: 16px; gap: 10px; }
.ap-feat .ap-checks li { font-size: 14.5px; }
.ap-feat .ap-checks svg { font-size: 20px; }
.ap-feat .ap-mphone { justify-self: center; }
.ap-feat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ap-feat-top .ap-icon { width: 60px; height: 60px; font-size: 28px; }
.ap-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 15px; background: var(--ap-accent-soft); color: var(--ap-accent-ink); font-size: 13px; font-weight: 700; }
@media (min-width: 640px) {
  .ap-feat { grid-template-columns: minmax(0, 1fr) auto; align-items: end; min-height: 250px; }
  .ap-feat-copy { align-self: start; padding: 28px 12px 28px 28px; }
  .ap-feat .ap-mphone { margin-right: 24px; }
}
@media (min-width: 1200px) { .ap-feat h3 { font-size: 21px; } .ap-feat-copy { padding: 32px 12px 32px 32px; } .ap-feat .ap-mphone { margin-right: 28px; } }

/* ── 임대인: 자동 수납·알림 ── */
.ap-auto { background: linear-gradient(100deg, #EAF8F1 0%, #EFF9F5 100%); }
.ap-auto-inner { display: grid; gap: 28px; }
.ap-auto .ap-title { color: var(--ap-deep); }
.ap-panels { display: grid; gap: 12px; }
.ap-panel { padding: 1.3em 1.5em 1em; border-radius: var(--ap-radius); background: #fff; box-shadow: var(--ap-shadow); color: #1D2330; font-size: 13px; line-height: 1.4; }
.ap-panel-title { margin-bottom: .4em; font-size: 1.15em; font-weight: 800; }
.ap-panel .ap-ph-income li { padding: 1.2em 0; }
@media (min-width: 640px) { .ap-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ap-auto-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 40px; } }

/* ── 임차인: 임대인과 연결 ── */
.ap-connect { background: linear-gradient(100deg, #FDEFEF 0%, #FEF4F3 100%); }
.ap-connect-inner { display: grid; gap: 28px; grid-template-areas: "copy" "visual" "cards" "fine"; }
.ap-connect-copy { grid-area: copy; }
.ap-connect-visual { grid-area: visual; position: relative; display: flex; justify-content: center; gap: 2.2em; height: 21em; overflow: hidden; font-size: 8px; }
.ap-connect-visual .ap-mphone { font-size: 1em; width: 19em; height: 24em; }
.ap-connect-visual::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3em; background: linear-gradient(rgba(254, 242, 242, 0), #FEF2F2); }
.ap-connect-swap { position: absolute; z-index: 1; left: 50%; top: 42%; display: flex; align-items: center; justify-content: center; width: 5.6em; height: 5.6em; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 .6em 1.6em rgba(229, 72, 79, .18); color: #E5484F; }
.ap-connect-swap svg { font-size: 2.6em; }
.ap-connect-cards { grid-area: cards; display: grid; gap: 12px; }
.ap-connect-cards li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--ap-radius); background: #fff; box-shadow: var(--ap-shadow); }
.ap-connect-cards .ap-icon { width: 56px; height: 56px; font-size: 24px; }
.ap-connect-cards h3 { color: var(--ap-ink); font-size: 16px; font-weight: 800; }
.ap-connect-cards p { margin-top: 4px; color: var(--ap-muted); font-size: 14px; line-height: 1.55; }
.ap-connect .ap-fine { grid-area: fine; margin-top: -12px; }
@media (min-width: 768px) {
  .ap-connect-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy visual" "cards cards" "fine fine"; align-items: center; }
  .ap-connect-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-connect .ap-fine { text-align: right; }
}
@media (min-width: 1200px) {
  .ap-connect-inner { grid-template-columns: minmax(0, .9fr) auto minmax(0, 1fr); grid-template-areas: "copy visual cards" ". . fine"; gap: 24px 32px; }
  .ap-connect-cards { grid-template-columns: 1fr; }
  .ap-connect-visual { font-size: 8.6px; }
}

/* ── 시작 방법 3단계 (번호 원이 아이콘 원 위에 걸친다) ── */
.ap-flow { display: grid; gap: 22px; margin-top: 28px; }
.ap-flow li { position: relative; display: flex; align-items: center; gap: 16px; }
.ap-flow .ap-icon { width: 64px; height: 64px; font-size: 28px; }
.ap-flow-no { position: absolute; left: -6px; top: -8px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ap-accent-soft); box-shadow: 0 0 0 3px #fff; color: var(--ap-accent-ink); font-size: 12.5px; font-weight: 800; }
.ap-flow h3 { color: var(--ap-ink); font-size: 17px; font-weight: 800; }
.ap-flow p { margin-top: 4px; color: var(--ap-muted); font-size: 14px; line-height: 1.6; }
.ap-flow-fine { text-align: center; }
@media (min-width: 1024px) {
  .ap-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; margin-top: 32px; }
  .ap-flow li + li::before { content: ""; position: absolute; left: -30px; top: 50%; width: 10px; height: 10px; border: solid #B6BEC6; border-width: 1.5px 1.5px 0 0; transform: translateY(-50%) rotate(45deg); }
  .ap-flow .ap-icon { width: 72px; height: 72px; font-size: 30px; }
  .ap-flow-no { width: 34px; height: 34px; font-size: 13px; }
  .ap-flow-fine { margin-top: 24px; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .ap-flow br { display: none; } }

/* ── 임대인: 추천 대상 ── */
.ap-who-list { display: grid; gap: 12px; margin-top: 24px; }
.ap-who-list li { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--ap-radius); background: #F6F7F8; }
.ap-who-list .ap-icon { width: 60px; height: 60px; font-size: 26px; background: #E5F1EA; }
.ap-who-list h3 { color: var(--ap-deep); font-size: 16px; font-weight: 800; }
.ap-who-list p { margin-top: 4px; color: var(--ap-muted); font-size: 14px; line-height: 1.6; }
@media (min-width: 1024px) { .ap-who-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; } .ap-who-list li { padding: 24px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .ap-who-list br { display: none; } }

/* ── 자주 묻는 질문 (앱별 페이지) ── */
.ap-qna-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.ap-seeall { display: inline-flex; align-items: center; gap: 4px; color: var(--ap-accent-ink); font-size: 14px; font-weight: 700; }
.ap-seeall svg { font-size: 16px; }
.ap-seeall:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap-qna .ap-faq-list { margin-top: 20px; }
@media (min-width: 1024px) {
  .ap-qna .ap-faq-list { margin-top: 24px; }
  .ap-qna-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 20px; }
}

/* ── 마지막 안내: 임대인은 초록 상자, 임차인은 분홍 띠 ── */
.ap-endcta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 639px) {
  .ap-endcta-actions { width: 100%; }
  .ap-endcta-actions > * { flex: 1 1 100%; }
  .ap-endcta-actions summary { width: 100%; }
}
.ap-endcta { padding: 8px 0 56px; }
.ap-endcta-box { display: grid; justify-items: center; gap: 20px; padding: 32px 24px; border-radius: 20px; background: var(--ap-deep); text-align: center; }
.ap-endcta-box h2 { color: #fff; font-size: 22px; font-weight: 600; line-height: 1.45; letter-spacing: -.03em; }
.ap-endcta-box h2 strong { font-weight: 800; }
.ap-endcta-box .ap-appicon { width: 64px; height: 64px; border-radius: 18px; font-size: 48px; box-shadow: none; }
@media (min-width: 1024px) {
  .ap-endcta { padding: 8px 0 72px; }
  .ap-endcta-box { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 28px; padding: 28px 48px; text-align: left; }
  .ap-endcta-box h2 { font-size: 26px; }
  .ap-endcta-box .ap-appicon { width: 84px; height: 84px; border-radius: 22px; font-size: 62px; }
  .ap-endcta-actions { justify-content: flex-end; }
}
.ap-endband { padding: 40px 0; background: linear-gradient(100deg, #FDEEEE 0%, #FEF3F2 100%); }
.ap-endband-inner { display: grid; gap: 20px; }
.ap-endband .ap-endcta-actions { justify-content: flex-start; }
.ap-endband .ap-eyebrow { margin-bottom: 6px; }
.ap-endband h2 { color: var(--ap-ink); font-size: 22px; font-weight: 800; line-height: 1.4; letter-spacing: -.03em; text-wrap: balance; }
@media (min-width: 1024px) {
  .ap-endband { padding: 44px 0; }
  .ap-endband-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ap-endband h2 { font-size: 30px; }
}