/* ── 래퍼 ── */
.cr-wrap { padding-top: 20px; padding-bottom: calc(100px + env(safe-area-inset-bottom)); min-height: 100vh; }

/* ── 프로필 ── */
.cr-profile { display: flex; align-items: flex-start; gap: 28px; padding: 20px 0 16px; border-bottom: 1px solid var(--line); }
.cr-avatar { width: 86px; height: 86px; border-radius: 50%; overflow: hidden; background: var(--gray2); border: 2px solid var(--line); flex-shrink: 0; }
.cr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cr-avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: var(--mid); }
.cr-profile-meta { flex: 1; min-width: 0; }
.cr-profile-row1 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cr-profile-name { font-size: 17px; font-weight: 800; color: var(--logo); }
.cr-dm-btn { font-size: 12px; padding: 5px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--white); color: var(--my-text-mid); cursor: pointer; white-space: nowrap; transition: all .15s; }
.cr-dm-btn:hover { border-color: var(--ink); color: var(--ink); }
.cr-profile-stats { display: flex; gap: 20px; margin-bottom: 10px; }
.cr-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cr-stat-num { font-size: 15px; font-weight: 800; color: var(--logo); }
.cr-stat-lbl { font-size: 11px; color: var(--mid); }
.cr-profile-bio { font-size: 13px; color: var(--my-text-mid); line-height: 1.55; margin-bottom: 8px; }
.cr-profile-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cr-tag { font-size: 11px; padding: 3px 10px; border-radius: 20px; background: var(--ink3); color: var(--ink); font-weight: 600; text-decoration: none; transition: background .15s; }
.cr-tag:hover { background: var(--ink); color: var(--white); }

/* ── 프로필 액션 ── */
.cr-profile-actions { display: flex; gap: 8px; align-items: center; }

/* ── 팔로우 버튼 ── */
.cr-follow-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--ink, #4285F4); background: var(--ink, #4285F4); color: #fff; transition: background .15s, color .15s, border-color .15s; }
.cr-follow-btn:hover { opacity: .85; }
.cr-follow-btn.is-following { background: #fff; color: var(--my-text-mid, #888); border-color: var(--line, #ddd); }
.cr-follow-btn.is-following:hover { border-color: var(--ink, #4285F4); color: var(--ink, #4285F4); }
.cr-follow-btn.loading { opacity: .6; pointer-events: none; }

/* ── 한줄소개 ── */
.cr-bio-wrap { margin-bottom: 4px; min-height: 22px; }
.cr-bio-view { display: flex; align-items: center; gap: 5px; min-height: 22px; }
.cr-bio-text { font-size: 13px; color: var(--my-text-mid); line-height: 1.5; }
.cr-bio-edit-icon { background: none; border: none; color: var(--mid); cursor: pointer; padding: 0 2px; font-size: 10px; transition: color .1s; flex-shrink: 0; }
.cr-bio-edit-icon:hover { color: var(--ink); }
.cr-bio-edit-wrap { display: flex; flex-direction: column; gap: 6px; }
.cr-bio-input { width: 100%; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; outline: none; color: var(--logo); background: var(--white); box-sizing: border-box; }
.cr-bio-input:focus { border-color: var(--ink); }
.cr-bio-edit-actions { display: flex; align-items: center; gap: 6px; }
.cr-bio-counter { font-size: 11px; color: var(--mid); margin-right: auto; }
.cr-bio-save-btn { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 5px; border: none; background: var(--ink); color: #fff; cursor: pointer; }
.cr-bio-save-btn:hover { opacity: .85; }
.cr-bio-cancel-btn { font-size: 12px; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--line); background: var(--white); color: var(--mid); cursor: pointer; }

/* ── 팔로워/팔로잉 모달 ── */
.cr-stat-link { cursor: pointer; }
.cr-stat-link:hover .cr-stat-num { text-decoration: underline; }
.cr-follow-modal-box { background: var(--white); border-radius: 14px; width: 320px; max-width: 90vw; margin: 80px auto 0; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; }
.cr-follow-modal-hdr { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--logo); }
.cr-follow-modal-list { overflow-y: auto; flex: 1; padding: 8px 0; }
.cr-follow-loading { padding: 24px; text-align: center; font-size: 13px; color: var(--mid); }
.cr-follow-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.cr-follow-item:hover { background: var(--gray1, #fafafa); }
.cr-follow-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gray2); overflow: hidden; flex-shrink: 0; }
.cr-follow-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cr-follow-avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--mid); }
.cr-follow-nick { font-size: 13px; font-weight: 600; color: var(--logo); text-decoration: none; }
.cr-follow-nick:hover { text-decoration: underline; }
.cr-follow-empty { padding: 32px; text-align: center; font-size: 13px; color: var(--mid); }

.cr-follow-list-btn { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 5px; border: 1px solid var(--line); background: var(--white); color: var(--mid); cursor: pointer; white-space: nowrap; transition: all .15s; flex-shrink: 0; }
.cr-follow-list-btn:hover { border-color: var(--ink); color: var(--ink); }
.cr-follow-list-btn-del:hover { border-color: var(--red, #e53e3e); color: var(--red, #e53e3e); }

/* ── 탭 ── */
.cr-tab-bar { display: flex; border-bottom: 1px solid var(--line); }
.cr-tab { flex: 1; padding: 12px 0; font-size: 13px; font-weight: 700; color: var(--mid); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all .15s; }
.cr-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.cr-tab-cnt { font-size: 10px; font-weight: 700; background: var(--ink3); color: var(--mid); padding: 1px 5px; border-radius: 10px; margin-left: 3px; }
.cr-tab.active .cr-tab-cnt { background: var(--ink); color: var(--white); }

/* ── 상품 그리드 ── */
.cr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 2px; }
.cr-item-card { display: block; text-decoration: none; min-width: 0; }
.cr-item-thumb { aspect-ratio: 1; width: 100%; display: block; background: var(--gray2); overflow: hidden; position: relative; }
.cr-item-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.cr-item-card:hover .cr-item-thumb img { transform: scale(1.04); }
.cr-item-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--mid); font-size: 28px; }
.cr-item-info { padding: 6px 4px 10px; }
.cr-item-name { font-size: 12px; color: var(--logo); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-item-price { font-size: 12px; color: var(--mid); margin-top: 2px; }
.cr-empty { grid-column: 1/-1; padding: 40px 0; text-align: center; color: var(--mid); font-size: 13px; }

/* ── 정보 탭 패널 ── */
.cr-tab-panel[data-panel="info"] { padding: 0 16px; }
.cr-info-block { padding: 4px 0 24px; display: flex; flex-direction: column; gap: 0; }
.cr-info-section { padding: 10px 0 4px; }
.cr-info-section + .cr-info-section { border-top: 1px solid var(--line); margin-top: 10px; }
.cr-info-section-title { font-size: 11px; font-weight: 700; color: var(--mid); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; display: flex; align-items: center; gap: 5px; }
.cr-info-section-title .ti { font-size: 14px; }
.cr-edit-btn { font-size: 12px; font-weight: 700; color: var(--mid); border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: all .15s; }
.cr-edit-btn:hover { color: var(--ink); border-color: var(--ink); }
.cr-info-bio { font-size: 14px; color: var(--my-text); line-height: 1.7; white-space: pre-line; }

/* ── 소셜 카드 ── */
.cr-sns-grid { display: flex; flex-direction: column; gap: 6px; }
.cr-sns-card { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); text-decoration: none; transition: border-color .15s, background .15s; }
.cr-sns-card:hover { border-color: var(--ink2, #bbb); background: var(--gray1, #fafafa); }
.cr-sns-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; }
.cr-sns-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-sns-label { font-size: 11px; font-weight: 700; color: var(--mid); }
.cr-sns-handle { font-size: 13px; font-weight: 600; color: var(--logo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-sns-arrow { font-size: 15px; color: var(--mid); flex-shrink: 0; }

/* ── 미디어 쿼리 ── */
@media (max-width: 640px) {
    .cr-wrap { padding-top: 12px; }
    .cr-profile { gap: 14px; padding: 14px 10px 12px; }
    .cr-avatar { width: 68px; height: 68px; }
    .cr-profile-name { font-size: 15px; }
    .cr-profile-stats { gap: 14px; }
    .cr-stat-num { font-size: 14px; }
    .cr-grid { grid-template-columns: repeat(3, 1fr); gap: 1px; }
    .cr-item-info { padding: 4px 2px 8px; }
    .cr-item-name { font-size: 11px; }
    .cr-item-price { font-size: 11px; }
}

@media (max-width: 380px) {
    .cr-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .cr-grid { grid-template-columns: repeat(4, 1fr); gap: 2px; }
}

@media (min-width: 640px) {
    .cr-tab-panel[data-panel="info"] { padding: 0; }
    .cr-fare-row { flex-direction: row; align-items: center; gap: 12px; }
    .cr-fare-row-top { flex: 0 0 auto; min-width: 200px; }
    .cr-fare-booth-num { margin-left: 0; }
    .cr-fare-row-sub { flex: 1; }
    .cr-fare-item-names { width: auto; margin-top: 0; }
    .cr-sns-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

@media (min-width: 1024px) {
    .cr-profile { padding: 28px 0 20px; gap: 36px; }
    .cr-avatar { width: 100px; height: 100px; }
    .cr-profile-name { font-size: 20px; }
    .cr-profile-stats { gap: 28px; }
    .cr-profile-bio { font-size: 14px; }
    .cr-stat-num { font-size: 17px; }
    .cr-stat-lbl { font-size: 12px; }
    .cr-tab { font-size: 14px; padding: 14px 0; }
    .cr-grid { grid-template-columns: repeat(5, 1fr); gap: 3px; }
    .cr-item-info { padding: 8px 6px 12px; }
    .cr-item-name { font-size: 13px; }
    .cr-item-price { font-size: 13px; }
    .cr-info-bio { font-size: 15px; }
    .cr-sns-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .cr-sns-card { padding: 13px 16px; }
    .cr-sns-icon { width: 42px; height: 42px; font-size: 22px; }
    .cr-sns-handle { font-size: 14px; }
}