/* Host profile — 4a layout (templates/character.html).
 * Spec: design_handoff_web_app_4a/README.md "호스트 프로필". Colors only from --c4a-* tokens. */

/* ---------- App bar (52) ---------- */
.header.profile-appbar {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    height: 52px;
    min-height: 52px;
    padding: 0 8px;
    background: var(--c4a-surface);
    border-bottom: 1px solid var(--c4a-list-divider);
    justify-content: space-between;
}
.profile-appbar-actions { display: flex; }
.profile-appbar-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--c4a-radius-btn);
    background: none;
    color: var(--c4a-ink);
    text-decoration: none;
    cursor: pointer;
}
.profile-appbar-btn:focus-visible,
.profile-4a button:focus-visible,
.profile-4a a:focus-visible,
.profile-cta button:focus-visible {
    outline: 2px solid var(--c4a-ink);
    outline-offset: 2px;
}

/* ---------- Page ---------- */
/* PC 에서도 하단 CTA(480)와 같은 폭의 한 단으로 보인다. */
.profile-4a {
    box-sizing: border-box;
    max-width: 480px;
    margin: 0 auto;
    padding: 20px 20px 0;
    background: var(--c4a-surface);
    color: var(--c4a-ink);
    font-family: var(--c4a-font-text);
}
.profile-4a button { font-family: inherit; }

/* Header row: 96 avatar + name / status / waiting status */
.profile-head { display: flex; align-items: center; gap: 16px; }
.profile-avatar { position: relative; flex: none; width: 96px; height: 96px; }
.profile-avatar img, .profile-avatar-fallback { width: 96px; height: 96px; border-radius: 99px; object-fit: cover; display: block; }
.profile-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c4a-surface-alt);
    color: var(--c4a-text-secondary);
    font: 800 34px/1 var(--c4a-font);
}
.profile-status-dot {
    position: absolute;
    right: 2px;
    bottom: 2px;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border-radius: 99px;
    border: 3px solid var(--c4a-surface);
    background: var(--c4a-text-tertiary);
}
.profile-status-dot[data-tone="green"] { background: var(--c4a-green); }
.profile-status-dot[data-tone="amber"] { background: var(--c4a-amber); }
.profile-head-text { flex: 1; min-width: 0; }
.profile-name {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font: 800 24px/1.2 var(--c4a-font);
    letter-spacing: -.02em;
    color: var(--c4a-ink);
}
.profile-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-verified { flex: none; width: 20px; height: 20px; }
.profile-status { margin: 6px 0 0; font: 500 13px/1.3 var(--c4a-font-text); color: var(--c4a-text-secondary); }
.profile-status[data-tone="green"] { color: var(--c4a-green); }
.profile-status[data-tone="amber"] { color: var(--c4a-amber-text); }
.profile-waiting { margin: 4px 0 0; font: 400 13px/1.3 var(--c4a-font-text); color: var(--c4a-text-secondary); word-break: break-word; }

/* Stats bar */
.profile-stats { display: flex; margin-top: 18px; padding: 14px 0; background: var(--c4a-surface-alt); border-radius: 16px; }
.profile-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.profile-stat + .profile-stat { border-left: 1px solid var(--c4a-btn-border); }
.profile-stat > strong { font: 800 18px/1 var(--c4a-font); font-variant-numeric: tabular-nums; }
.profile-stat > span { font: 400 12px/1 var(--c4a-font-text); color: var(--c4a-text-secondary); }

/* First-call-free banner */
.profile-4a .first-trial-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: none;
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--c4a-green-soft);
    border-radius: 14px;
    color: var(--c4a-green);
}
.profile-4a .first-trial-banner .ms { font-size: 22px; }
.profile-4a .first-trial-banner p { flex: 1; margin: 0; font: 600 14px/1.3 var(--c4a-font-text); }

/* Voice card */
.profile-voice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--c4a-ink);
    border-radius: 18px;
    color: var(--c4a-surface);
}
.profile-voice-play {
    flex: none;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: var(--c4a-surface);
    color: var(--c4a-ink);
    cursor: pointer;
}
.profile-voice-play.loading { opacity: .6; cursor: progress; }
.profile-voice-icon { display: flex; }
.profile-voice-icon .ms { font-size: 28px; }
.profile-voice-icon .icon-pause, .profile-voice-icon.playing .icon-play { display: none; }
.profile-voice-icon.playing .icon-pause { display: inline-block; }
.profile-voice-body { flex: 1; min-width: 0; }

/* Two stacked bar rows: the outer row is 28% white, the inner row (inside
 * #slideProgressFill, whose width the audio script sets) is solid white.
 * Both rows take the wave's width via container query units so they line up. */
.profile-wave { position: relative; height: 28px; overflow: hidden; container-type: inline-size; cursor: pointer; }
.profile-wave-bars { display: flex; align-items: center; justify-content: space-between; width: 100%; width: 100cqw; height: 28px; }
.profile-wave-bars i { flex: none; display: block; width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.profile-wave-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; overflow: hidden; }
.profile-wave-fill .profile-wave-bars i { background: var(--c4a-surface); }
.profile-voice-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font: 500 12px/1 var(--c4a-font-text);
    color: rgba(255, 255, 255, .6);
}
.profile-voice-time { font-variant-numeric: tabular-nums; }
.profile-voice .audio-error-msg { flex-basis: 100%; }

/* Description */
.profile-4a .profile-desc {
    margin-top: 18px;
    font: 400 15px/1.65 var(--c4a-font-text);
    color: var(--c4a-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.profile-4a .profile-desc a { color: var(--c4a-green); }

/* Gallery 88 */
.profile-gallery { display: flex; gap: 8px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; }
.profile-gallery::-webkit-scrollbar { display: none; }
/* 88px 기준, 390 폭(내용 350)에서 3장 + "+N" 4칸이 한 줄에 들어가도록 72px 까지 줄어든다. */
.profile-gallery-tile {
    flex: 0 1 88px;
    min-width: 72px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--c4a-surface-alt);
    cursor: pointer;
}
.profile-gallery-tile[hidden] { display: none; }
.profile-gallery-tile img, .profile-gallery-fallback { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-gallery-fallback { display: flex; align-items: center; justify-content: center; color: var(--c4a-text-secondary); }
.profile-gallery-more {
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 13px/1 var(--c4a-font-text);
    color: var(--c4a-text-secondary);
}

/* Secondary buttons (알림 · 팬클럽) */
.profile-actions { display: flex; gap: 8px; margin-top: 18px; }
.profile-action-btn {
    flex: 1;
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid var(--c4a-btn-border);
    border-radius: var(--c4a-radius-btn);
    background: var(--c4a-surface);
    color: var(--c4a-ink);
    font: 600 14px/1 var(--c4a-font-text);
    cursor: pointer;
}
.profile-action-btn .ms { font-size: 20px; }
.profile-action-btn.following { color: var(--c4a-green); }
.profile-action-btn:disabled { opacity: .6; cursor: progress; }

/* Sections */
.profile-section { margin-top: 26px; }
.profile-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.profile-section-head h2 { margin: 0; font: 700 15px/1.2 var(--c4a-font-text); color: var(--c4a-ink); }
.profile-count { color: var(--c4a-text-secondary); font-weight: 500; }
.profile-section-aside,
.profile-section-link {
    font: 400 13px/1 var(--c4a-font-text);
    color: var(--c4a-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

/* Concept list card */
.profile-list-card { border: 1px solid var(--c4a-line); border-radius: var(--c4a-radius-card); overflow: hidden; }
.profile-list-card .concept-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--c4a-list-divider);
    background: var(--c4a-surface);
    color: var(--c4a-ink);
    text-align: left;
    cursor: pointer;
}
.profile-list-card .concept-card:last-child { border-bottom: 0; }
.profile-list-card .concept-card:hover { background: var(--c4a-row-bg); }
.concept-card .concept-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.concept-card .concept-title { font: 600 15px/1.2 var(--c4a-font-text); }
.concept-card .concept-meta { font: 400 12.5px/1.3 var(--c4a-font-text); color: var(--c4a-text-secondary); }
.concept-card .concept-price { font: 700 15px/1 var(--c4a-font-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.concept-card .concept-price small { font: 400 12px/1 var(--c4a-font-text); color: var(--c4a-text-secondary); }

/* Small ink button (호스트 본인 글쓰기) */
.profile-ink-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 99px;
    background: var(--c4a-ink);
    color: var(--c4a-surface);
    font: 600 13px/1 var(--c4a-font-text);
    cursor: pointer;
}
.profile-ink-btn .ms { font-size: 18px; }

/* Feed rows, sheet and write modal: css/feed-4a.css */
.profile-more-btn {
    width: 100%;
    height: 44px;
    margin-top: 10px;
    border: 1px solid var(--c4a-btn-border);
    border-radius: var(--c4a-radius-btn);
    background: var(--c4a-surface);
    color: var(--c4a-ink);
    font: 600 14px/1 var(--c4a-font-text);
    cursor: pointer;
}

/* Reviews (rows rendered by character-page-review.js as .review-item) */
.profile-reviews .btn-write-review {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    margin-bottom: 10px;
    border: 1px solid var(--c4a-btn-border);
    border-radius: var(--c4a-radius-btn);
    background: var(--c4a-surface);
    color: var(--c4a-ink);
    font: 600 14px/1 var(--c4a-font-text);
    cursor: pointer;
}
.profile-reviews .btn-write-review .ms { font-size: 18px; }
.profile-reviews .btn-write-review:disabled { color: var(--c4a-text-secondary); cursor: not-allowed; }
.profile-reviews .review-eligibility-notice {
    border-radius: var(--c4a-radius-btn);
    background: var(--c4a-surface-alt);
    color: var(--c4a-text-secondary);
}
.profile-reviews .review-eligibility-notice.insufficient { background: var(--c4a-amber-soft); color: var(--c4a-amber-text); }
.profile-reviews .reviews-list { gap: 0; }
.profile-reviews .review-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--c4a-list-divider);
    border-radius: 0;
    background: none;
}
.profile-reviews .review-item::before {
    content: "";
    grid-row: 1 / span 2;
    width: 32px;
    height: 32px;
    border-radius: 99px;
    background: var(--c4a-surface-alt);
}
.profile-reviews .review-content { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 2px; }
.profile-reviews .review-comment { font: 400 14px/1.5 var(--c4a-font-text); color: var(--c4a-ink); }
.profile-reviews .review-stars { font-size: 12px; color: var(--c4a-text-secondary); }
.profile-reviews .review-header { grid-column: 2; grid-row: 2; margin: 5px 0 0; }
.profile-reviews .review-user-name, .profile-reviews .review-date { font: 400 12px/1 var(--c4a-font-text); color: var(--c4a-text-tertiary); }
.profile-reviews .review-info-left { gap: 0; }
.profile-reviews .review-user-name::after { content: "\00a0·\00a0"; }

/* Footer text links (신고 · 차단 · SNS) */
.profile-footer-links { display: flex; justify-content: center; gap: 16px; padding: 22px 0 20px; }
.profile-footer-links button,
.profile-footer-links a {
    padding: 4px 2px;
    border: 0;
    background: none;
    font: 500 13px/1 var(--c4a-font-text);
    color: var(--c4a-text-secondary);
    text-decoration: none;
    cursor: pointer;
}

/* ---------- Fixed bottom CTA (offset rules: style.css / character-modal.css / redesign-1-5.css) ---------- */
.fixed-bottom-cta.profile-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 16px;
    background: var(--c4a-surface);
    border-top: 1px solid var(--c4a-line);
}
.profile-cta .cta-main,
.profile-cta .cta-square {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--c4a-radius-cta);
    font: 600 16px/1 var(--c4a-font-text);
    cursor: pointer;
}
.profile-cta .cta-main { flex: 1; min-width: 0; padding: 0 16px; border: 0; background: var(--c4a-ink); color: var(--c4a-surface); }
.profile-cta .cta-main > span:not(.ms):not(.cta-free-badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-cta .cta-main .ms { font-size: 20px; }
.profile-cta .cta-main.cta-soft { background: var(--c4a-surface-alt); color: var(--c4a-text-secondary); }
.profile-cta .cta-main.cta-soft.active { color: var(--c4a-green); }
.profile-cta .cta-square {
    flex: none;
    width: 52px;
    padding: 0;
    border: 1px solid var(--c4a-btn-border);
    background: var(--c4a-surface);
    color: var(--c4a-ink);
}
.profile-cta .cta-square.active { color: var(--c4a-green); }
.profile-cta .cta-free-badge {
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--c4a-green);
    color: var(--c4a-surface);
    font: 600 11px/1 var(--c4a-font-text);
    white-space: nowrap;
}

/* 마이크 권한 확인 중 (character-page-call.js setCallButtonsBusy) */
.profile-cta .is-loading, .profile-cta button:disabled { opacity: .6; cursor: progress; }
.profile-cta .own-character-notice {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    border-radius: var(--c4a-radius-cta);
    background: var(--c4a-surface-alt);
    color: var(--c4a-text-secondary);
    font: 500 14px/1.3 var(--c4a-font-text);
}
.profile-cta .own-character-notice .ms { font-size: 20px; }

/* ---------- More sheet ---------- */
.profile-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .4);
}
.profile-sheet-overlay[hidden] { display: none; }
.profile-sheet {
    width: 100%;
    max-width: 480px;
    padding: 8px 20px calc(16px + env(safe-area-inset-bottom));
    background: var(--c4a-surface);
    border-radius: 20px 20px 0 0;
}
.profile-sheet-grip { display: block; width: 36px; height: 4px; margin: 0 auto 8px; border-radius: 99px; background: var(--c4a-line); }
.profile-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 56px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--c4a-list-divider);
    background: none;
    color: var(--c4a-ink);
    font: 500 15px/1 var(--c4a-font-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.profile-sheet-item .ms { font-size: 22px; color: var(--c4a-text-secondary); }
.profile-sheet-item.is-danger, .profile-sheet-item.is-danger .ms { color: var(--c4a-danger); }
.profile-sheet-cancel {
    width: 100%;
    height: 52px;
    margin-top: 12px;
    border: 0;
    border-radius: var(--c4a-radius-cta);
    background: var(--c4a-surface-alt);
    color: var(--c4a-ink);
    font: 600 16px/1 var(--c4a-font-text);
    cursor: pointer;
}