/* 마이 > 태그: Soft Mint 그룹/필 */
#favoriteTagsSection,
.profile-v2-tags-section {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 프로필 설정 (트위터 스타일: 리스트형 행 + 얇은 구분선, 박스 최소화) */
.profile-settings-list {
    padding: 0;
}
/* 로그인 정보(이메일) 박스: 상단 탭과 간격 */
.profile-account-section {
    margin-top: 0.5rem;
    padding: 0 0.5rem;
}
.profile-account-section:empty {
    margin-top: 0;
    padding: 0;
}
.profile-v2 .profile-account-section {
    margin-top: 0;
    padding: 0;
}
.profile-settings-header {
    background: #fff;
}
.profile-v2 .profile-settings-header {
    background: transparent;
}
/* 저장/취소 없을 때: 헤더 줄 높이 최소화 (녹색 박스 ↔ 소개 간격) */
#settingsTabContentProfile .profile-settings-header {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
}
#settingsTabContentProfile .profile-settings-header.profile-settings-header--active {
    min-height: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom-color: #f1f5f9;
}
.profile-settings-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fff;
}
/* 제목 왼쪽, 내용 오른쪽 배치 + 제목·입력 세로 중앙 정렬 */
.profile-settings-row-between {
    align-items: center;
    gap: 1rem;
}
.profile-settings-row-between .profile-settings-label,
.profile-settings-row-between .profile-settings-label-wrap {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0;
    min-width: 4.5rem;
}
.profile-settings-row-between .profile-settings-field {
    flex: 1 1 auto;
    min-width: 0;
}
.profile-settings-birthdate-input {
    text-align: right;
}
.profile-settings-field-end {
    flex: 0 0 auto;
    margin-left: auto;
}
.profile-settings-label-top {
    padding-top: 0.25rem;
}
.profile-settings-value {
    display: inline-block;
    text-align: right;
}
.profile-settings-input-inline {
    width: auto;
    min-width: 8rem;
    max-width: 100%;
}
.profile-settings-nickname-input {
    text-align: right;
}
.profile-settings-field-same {
    flex: 1 1 auto;
    min-width: 0;
}
.profile-settings-label {
    flex: 0 0 100%;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.25rem;
}
.profile-settings-field {
    flex: 1 1 100%;
    min-width: 0;
}
/* 소개/라이프 스타일 제목 줄: 라벨+연필은 붙여서(왼쪽), 글자수만 제목 줄 오른쪽 */
.profile-settings-label-row .profile-settings-label {
    flex: 0 1 auto !important;
    min-width: 0;
    margin-bottom: 0 !important;
}
/* 설정 프로필 연필 — 기준 대비 약 70% 크기 */
.settings-pencil-icon {
    font-size: 0.65rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}
/* 소개·라이프스타일: 기본 행(좌우 1rem)보다 패딩만 줄여 입력 폭 확대 — 음수 마진·calc 폭은 body clip과 충돌 가능 */
.profile-settings-row--bio-wide {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}
@media (min-width: 640px) {
    .profile-settings-row--bio-wide {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
.profile-settings-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1e293b;
    background: #f1f5f9;
    border: none;
    border-bottom: 2px solid #94a3b8;
    border-radius: 0;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.profile-settings-input::placeholder {
    color: #94a3b8;
}
.profile-settings-input:focus {
    background: #f8fafc;
    border-bottom-color: #475569;
    box-shadow: 0 2px 0 0 #475569;
}
/* 닉네임 인라인(계정 카드): 하단 2px만, 라운드 없음 */
.profile-settings-nickname-inline {
    border: none !important;
    border-bottom: 2px solid #94a3b8 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff;
}
.profile-settings-nickname-inline:focus {
    background: #f8fafc;
    border-bottom-color: #475569 !important;
    box-shadow: none !important;
    outline: none;
}
/* 생년월일 인라인 편집: 닉네임과 동일한 밑줄 입력 스타일 재사용 */
#settingBirthdateEdit .profile-settings-nickname-inline {
    box-sizing: border-box;
}
/* 소개 textarea: 포커스 시 하단 2px만(이중 라인 방지) */
.profile-settings-textarea--bottomline:focus {
    box-shadow: none !important;
    border-bottom: 2px solid #475569;
}
/* 생년월일 + 성별 한 줄: 회색 영역 안에 입력란과 남/여 스위치 */
.profile-settings-birthdate-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    background: #f1f5f9;
    border-bottom: 2px solid #94a3b8;
    min-height: 2.5rem;
    box-sizing: border-box;
}
.profile-settings-birthdate-row .profile-settings-birthdate-input {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0.5rem;
}
.profile-settings-birthdate-row .profile-settings-birthdate-input:focus {
    background: transparent;
    border: none;
    box-shadow: none;
}
/* 계정 카드 등 컴팩트 생년월일 줄 + 성별 스위치 */
.profile-settings-birthdate-row--compact {
    padding: 0.2rem 0.35rem;
    min-height: auto;
    gap: 0.5rem;
}
.profile-settings-birthdate-row--compact .profile-settings-input:focus {
    box-shadow: none !important;
    border-bottom: 2px solid #475569 !important;
}
/* 생년월일 줄: 바깥 박스 언더라인 제거 — 입력칸 하단 2px만 */
.profile-settings-birthdate-row--input-line-only {
    border-bottom: none !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: auto !important;
    padding: 0 !important;
}
.profile-settings-birthdate-row--input-line-only .profile-settings-input {
    background: #fff;
}
.setting-gender-switch--compact .setting-gender-btn {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 0.7rem;
    line-height: 1.2;
}
.profile-settings-textarea {
    min-height: 4rem;
    resize: vertical;
    line-height: 1.5;
}
.profile-settings-hint {
    font-size: 0.75rem;
    color: #94a3b8;
}
.profile-settings-btn {
    padding: 0.25rem 0;
    border-radius: 0.25rem;
    transition: color 0.15s, background 0.15s;
}
.profile-avatar {
    border: 1px solid #e2e8f0;
    box-shadow: var(--avatar-shadow);
}
.profile-avatar--initial,
#textPreview.profile-avatar {
    background: var(--avatar-fallback-bg, #e2e8f0) !important;
    color: var(--avatar-fallback-fg, #334155) !important;
    font-family: var(--avatar-fallback-font) !important;
    font-size: 1.25rem !important; /* text-base(1rem) 대비 두 단계 */
    font-weight: 700 !important;
    line-height: 1;
}
.profile-lifestyle-chip {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    background: var(--app-page-bg);
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.profile-lifestyle-chip:hover,
.profile-lifestyle-chip:focus {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
/* 라이프스타일 칩: 선택 시 초록 채움 (시안 v2) */
.profile-settings-list .settings-lifestyle-btn.bg-emerald-600,
.profile-settings-list .profile-lifestyle-chip.bg-emerald-600,
#profileFieldEditModal .profile-lifestyle-chip.bg-emerald-600,
#profileFieldEditModal .profile-field-edit-lifestyle-btn.bg-emerald-600,
.settings-lifestyle-btn.selected,
.profile-lifestyle-chip.selected,
.settings-lifestyle-btn.active,
.profile-lifestyle-chip.active {
    background: var(--green) !important;
    border-color: var(--green) !important;
    color: #fff !important;
}
.profile-settings-footer {
    background: transparent;
}
.profile-settings-footer-btn {
    transition: background 0.15s;
}
.profile-logout-btn {
    border-radius: 6px;
}
.profile-settings-action {
    transition: background 0.15s;
}

/* ========== 프로필(마이) 시안 v2 ========== */
#settingsView .settings-view-content.profile-v2-scroll,
#settingsView .profile-v2 {
    background: var(--page-deep, #faf6f2);
}
.profile-v2-identity {
    text-align: left;
    padding: 18px 16px 16px;
    margin: 8px 0 14px;
    background: var(--card, #fff);
    border: 1px solid var(--line);
    border-radius: 16px;
}
.profile-v2-identity-main {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}
.profile-v2-identity-intro {
    min-width: 0;
}
.profile-v2-avatar-hit {
    position: relative;
    width: 112px;
    margin: 0 0 22px;
}
.profile-v2-avatar-btn {
    display: block;
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    /* 그림자는 버튼에 — 아바타 overflow:hidden에 잘리지 않음 */
    box-shadow: var(--avatar-shadow-profile, 0 1px 2px rgba(100, 116, 139, 0.38));
}
/*
 * 카메라 배지(.profile-v2-avatar-edit)는 원형 버튼의 우하단 "밖"에 걸쳐 있고 pointer-events:none이라,
 * 배지를 정확히 눌러도 border-radius:50% 원 바깥이면 클릭이 아무 데도 닿지 않고 버려졌다
 * (배지 면적의 절반이 사각지대 — 손가락이 자연히 가는 바깥쪽 절반이 전부 죽어 있음).
 * 배지까지 덮는 사각 히트영역을 버튼에 덧대 어디를 눌러도 버튼이 받게 한다.
 */
.profile-v2-avatar-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
}
.profile-v2-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: none;
    line-height: 1;
    overflow: hidden;
    border: 1px solid var(--line);
    box-sizing: border-box;
}
.profile-v2-avatar--initial {
    background: var(--avatar-fallback-bg);
    color: var(--avatar-fallback-fg);
    font-family: var(--avatar-fallback-font);
    font-size: 34px;
    font-weight: 700;
}
.profile-v2-avatar--photo {
    background-size: cover;
    background-position: center;
    color: transparent;
}
.profile-v2-avatar-edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
    pointer-events: none;
}
.profile-v2-photo-delete {
    position: absolute;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    white-space: nowrap;
}
.profile-v2-identity-name {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}
.profile-v2-identity-bio {
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-2);
    max-width: 100%;
    width: 100%;
    margin: 0 0 14px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.profile-v2-identity-bio--empty {
    color: var(--muted);
    white-space: normal;
}
.profile-v2-identity-actions {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.profile-v2-name-row { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: 0 0 6px; }
.profile-v2-name-row .profile-v2-identity-name { margin: 0; }
.profile-style-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.profile-style-level { display: inline-block; border-radius: 8px; padding: 3px 7px; background: var(--green-soft); color: var(--green-deep); font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.profile-style-candidate-name { justify-content: center; }
.profile-character-title.profile-style-name-row, .profile-character-style-name.profile-style-name-row { display: flex; }
.profile-character-level { padding: 10px 12px; margin: 0 0 14px; border-radius: 10px; background: var(--green-soft); }
.profile-character-section { width: 100%; text-align: left; margin: 0 0 12px; }
.profile-character-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 17px; padding: 13px; margin-bottom: 10px; }
.profile-character-section > .profile-character-card:last-child { margin-bottom: 0; }
.profile-character-section > section.profile-character-card { padding: 18px 16px 16px; border-radius: 16px; }
.profile-character-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.profile-character-heading h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink-2); }
.profile-character-heading .profile-character-refresh { padding: 5px 0 5px 8px; border: 0; background: transparent; color: var(--muted); font-size: 12px; min-height: 36px; white-space: nowrap; }
.profile-character-note.profile-style-aggregate-note { margin-top: 10px; font-size: 12px; }
.profile-character-summary { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 0; }
.profile-character-bust { width: 112px; height: auto; min-height: 148px; max-height: 190px; align-self: start; border: 1px solid var(--line); box-sizing: border-box; border-radius: 12px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; background: var(--page-deep, #faf6f2); }
.profile-character-copy { min-width: 0; flex: 1; padding-top: 2px; }
.profile-character-eyebrow { font-size: 11px; color: var(--muted); line-height: 1.5; }
.profile-character-title { display: block; font-size: 20px; margin: 0 0 4px; line-height: 1.4; }
.profile-character-caption { font-size: 16px; font-weight: 700; letter-spacing: -0.025em; color: color-mix(in srgb, var(--ink-2) 70%, var(--muted)); line-height: 1.5; margin: 10px 0 14px; padding-left: 10px; border-left: 3px solid var(--green); word-break: keep-all; overflow-wrap: anywhere; }
.profile-character-card .profile-style-level { font-size: 12px; padding: 3px 8px; }
.profile-character-card .profile-character-card-actions { gap: 8px; }
.profile-character-card .profile-character-card-actions > button { background: transparent; border: 1px solid var(--line); font-weight: 600; }
.profile-character-card .profile-style-aggregate-note { padding-top: 10px; border-top: 1px solid var(--line); }
/* 프로필 사진 시트 — 미리보기 + 고르기 타일 3개 + 적용 하나 */
#accountAvatarModal .account-avatar-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 0 16px; }
#accountAvatarModal .account-avatar-sheet-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.account-avatar-sheet-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.account-avatar-sheet-close:hover { background: var(--line); color: var(--ink-2); }
.account-avatar-sheet-close svg { width: 20px; height: 20px; }
.account-avatar-preview-wrap { position: relative; width: 112px; height: 112px; margin: 0 auto 14px; }
.account-avatar-preview { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: var(--green-soft); box-shadow: 0 0 0 1px var(--line); }
.account-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
#accountAvatarModalIcon { font-size: 44px; line-height: 1; }
.account-avatar-preview img.is-pixel, .account-avatar-source-thumb img.is-pixel { image-rendering: pixelated; }
.account-avatar-edit-btn { position: absolute; right: -4px; bottom: -4px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-2); box-shadow: 0 2px 8px rgba(0,0,0,.12); cursor: pointer; }
.account-avatar-edit-btn.hidden { display: none; }
.account-avatar-edit-btn svg { width: 16px; height: 16px; }
.account-avatar-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 300px; margin: 0 auto; }
.account-avatar-source { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 9px 4px 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink-2); font: inherit; cursor: pointer; }
.account-avatar-source.hidden { display: none; }
.account-avatar-source:hover:not(:disabled) { border-color: var(--green); }
.account-avatar-source[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green); }
.account-avatar-source-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green-soft); color: var(--green-deep); font-size: 18px; font-weight: 700; }
.account-avatar-source-thumb img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.account-avatar-source-thumb--add { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); }
.account-avatar-source-thumb--add svg { width: 20px; height: 20px; }
/* 지금 쓰는 쪽 표시 — 테두리(고른 쪽)와 따로 간다 */
.account-avatar-source[data-current="true"] .account-avatar-source-thumb::after { content: '✓'; position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: var(--green); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
.account-avatar-source-label { font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.account-avatar-gender { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.account-avatar-gender.hidden { display: none; }
.account-avatar-gender button { min-height: 32px; padding: 4px 2px; border: 0; background: transparent; color: var(--green-deep); font: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#accountAvatarModal.is-photo-pending .account-avatar-sources,
#accountAvatarModal.is-photo-pending .account-avatar-gender { display: none; }
#accountAvatarApplyModeBtn:disabled { opacity: .45; box-shadow: none; cursor: default; }
.profile-character-refresh-tools { display: flex; align-items: center; gap: 6px; }
.profile-character-refresh-help { position: relative; }
.profile-character-refresh-help summary { display: flex; align-items: center; justify-content: center; width: 24px; height: 28px; font-size: 12px; color: var(--muted); cursor: pointer; list-style: none; }
.profile-character-refresh-help summary::-webkit-details-marker { display: none; }
.profile-character-refresh-help summary:focus-visible { outline: 2px solid var(--green); border-radius: 6px; }
.profile-character-refresh-help p { position: absolute; right: 0; top: 28px; z-index: 2; width: min(240px, calc(100vw - 72px)); margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card, #fff); box-shadow: 0 4px 16px rgba(0,0,0,.12); color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.profile-character-card-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.profile-character-card-actions > button { width: auto; padding: 5px 10px; min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1.4; }
.profile-character-card-actions > .profile-character-button--primary { color: var(--ink-2); background: transparent; border-color: var(--line); font-weight: 500; }
.profile-character-card-actions > button:hover:not(:disabled) { border-color: var(--green); }
.profile-character-style-dialog { width: min(410px, calc(100vw - 24px)); max-height: min(88dvh, 720px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--card, #fff); color: var(--ink-2); box-shadow: 0 16px 60px rgba(0,0,0,.18); overflow-y: auto; text-align: left; z-index: 500; }
.profile-character-style-dialog::backdrop { background: rgba(30,25,20,.4); }
.profile-character-style-content { padding: 20px; }
.profile-character-style-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.profile-character-style-heading h3 { margin: 0; font-size: 17px; }
.profile-character-style-close { border: 0; border-radius: 50%; width: 40px; height: 40px; flex-shrink: 0; background: var(--green-soft); color: var(--ink-2); font-size: 26px; line-height: 1; cursor: pointer; }
.profile-character-style-hero { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.profile-character-style-hero > img { width: 132px; height: 132px; max-width: 42%; object-fit: contain; image-rendering: pixelated; border-radius: 14px; }
.profile-character-style-name { display: block; margin: 0 0 6px; color: var(--green-deep); font-size: 20px; font-weight: 700; }
.profile-character-style-dialog .profile-character-choices { gap: 10px; margin: 14px 0 10px; }
.profile-character-style-dialog .profile-character-choices img { width: 100px; height: 100px; max-width: 100%; object-fit: contain; }
.profile-character-style-dialog .profile-character-reasons { margin: 6px 0 10px; line-height: 1.65; }
.profile-character-style-content > strong { font-size: 13px; }
.profile-character-recommendations-dialog { width: min(430px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: visible; }
.profile-character-recommendations-dialog .profile-character-style-content { padding: 16px; }
.profile-character-recommendations-dialog .profile-character-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.profile-character-recommendations-dialog .profile-character-choices > button { padding: 10px; min-width: 0; gap: 4px; }
.profile-character-recommendations-dialog .profile-character-choices > button:only-child { grid-column: 1 / -1; max-width: 210px; width: 100%; justify-self: center; }
.profile-character-recommendations-dialog .profile-character-choices img { width: 100%; height: clamp(60px, 19dvh, 128px); object-fit: contain; border-radius: 8px; }
.profile-character-recommendations-dialog .profile-style-candidate-name { font-size: 16px; font-weight: 700; gap: 4px; }
.profile-recommendation-caption { font-size: 13px; font-weight: 400; line-height: 1.45; word-break: keep-all; color: var(--ink-2); }
.profile-character-recommendations-dialog .profile-character-choices small { font-size: 12px; }
.profile-recommendation-days { font-size: 12px; margin-top: 3px; }
.profile-character-recommendations-dialog progress { display: block; width: 100%; height: 4px; margin: 2px 0; accent-color: var(--green); }
.profile-recommendation-reasons { padding: 10px 12px; border-radius: 10px; background: var(--green-soft); }
.profile-recommendation-reasons > strong { font-size: 13px; }
.profile-character-recommendations-dialog .profile-character-reasons { font-size: 13px; line-height: 1.5; margin: 5px 0 0; }
.profile-character-recommendations-dialog .profile-character-note { font-size: 12px; }
.profile-character-recommendations-dialog .profile-character-avatar-footer > button { font-size: 14px; }
@media (max-height: 620px) {
    .profile-character-recommendations-dialog .profile-character-style-content { padding: 12px; }
    .profile-character-recommendations-dialog .profile-character-style-heading { margin-bottom: 8px; }
    .profile-character-recommendations-dialog .profile-character-choices img { height: 64px; }
    .profile-character-recommendations-dialog .profile-character-choices > button { padding: 7px; gap: 2px; }
    .profile-character-recommendations-dialog .profile-character-choices { margin-bottom: 8px; }
    .profile-recommendation-reasons { padding: 7px 9px; }
}
@media (min-width: 500px) and (max-height: 450px) {
    .profile-character-recommendations-dialog { width: min(650px, calc(100vw - 24px)); }
    .profile-character-recommendations-dialog .profile-character-style-content { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 12px; }
    .profile-character-recommendations-dialog .profile-character-style-heading { grid-column: 1 / -1; }
    .profile-character-recommendations-dialog .profile-character-choices { grid-column: 1; grid-row: 2 / 5; margin: 0; }
    .profile-character-recommendations-dialog .profile-recommendation-reasons,
    .profile-character-recommendations-dialog .profile-character-note,
    .profile-character-recommendations-dialog .profile-character-avatar-footer { grid-column: 2; }
}
.profile-character-avatar-footer { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: 12px; }
.profile-character-avatar-footer > button { min-height: 38px; padding: 8px; }
.profile-character-button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (max-width: 360px) {
    .profile-v2-identity-main, .profile-character-summary { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
    .profile-v2-avatar-hit { width: 92px; }
    .profile-v2-avatar { width: 92px; height: 92px; }
    .profile-character-bust { width: 92px; min-height: 124px; max-height: 180px; }
    .profile-v2-identity-name, .profile-character-title { font-size: 18px; }
}
.profile-character-note, .profile-character-loading { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 4px 0; overflow-wrap: anywhere; }
.profile-character-button { font: inherit; font-size: 12px; font-weight: 600; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--card, #fff); color: var(--ink-2); cursor: pointer; }
.profile-character-button:disabled { opacity: .6; cursor: wait; }
.profile-character-button--primary { color: #fff; background: var(--green); border-color: var(--green); }
.profile-character-button[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green); }
.profile-character-gender-hint { display: block; padding: 4px 0; min-height: 28px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; text-align: left; }
.profile-character-gender-hint:hover:not(:disabled) { color: var(--green-deep); text-decoration: underline; }
.profile-character-card > .profile-character-button { margin-top: 10px; }
.profile-character-details { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.profile-character-details > strong, .profile-character-picker > strong, .profile-character-level > strong { font-size: 13px; }
.profile-character-reasons { padding-left: 18px; margin: 8px 0 12px; font-size: 12px; line-height: 1.8; color: var(--ink-2); }
.profile-character-choices, .profile-character-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.profile-character-choices > button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.profile-character-choices img { width: 60px; height: 60px; image-rendering: pixelated; border-radius: 8px; }
.profile-character-choices small { font-size: 11px; color: var(--muted); }
.profile-character-section progress, .profile-character-level progress { display: block; appearance: none; width: 100%; height: 5px; border: 0; border-radius: 5px; overflow: hidden; margin: 10px 0; background: var(--line); }
.profile-character-section progress::-webkit-progress-bar, .profile-character-level progress::-webkit-progress-bar { background: var(--line); }
.profile-character-section progress::-webkit-progress-value, .profile-character-level progress::-webkit-progress-value { background: var(--green); }
.profile-character-section progress::-moz-progress-bar, .profile-character-level progress::-moz-progress-bar { background: var(--green); }
.profile-v2-identity-actions > button {
    min-height: 40px;
    white-space: nowrap;
}
.profile-v2-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.profile-v2-edit-btn:hover {
    background: var(--green-soft);
}
.profile-v2-edit-btn .lucide {
    width: 13px;
    height: 13px;
}
#profileFieldEditPanelNickname:not(.hidden) + #profileFieldEditPanelBirthdate + .profile-field-edit-bio {
    margin-top: 20px;
}
.profile-v2-identity-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: var(--green);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(45, 159, 116, 0.16);
}
.profile-v2-identity-cta:hover {
    background: var(--green-deep);
}
.profile-v2-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.profile-v2-stat {
    text-align: center;
}
.profile-v2-stat strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.profile-v2-stat span {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}
.profile-v2-section-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.02em;
    margin: 4px 2px 8px;
}
.profile-v2-row-card {
    background: var(--card);
    border: 1px solid var(--line, #d0c6ba);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(43, 40, 37, 0.06), 0 6px 18px rgba(43, 40, 37, 0.07);
    overflow: hidden;
}
.profile-v2-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 14px;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
}
.profile-v2-row:last-child {
    border-bottom: 0;
}
.profile-v2-row:disabled {
    cursor: default;
}
.profile-v2-row__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    width: 72px;
    flex-shrink: 0;
}
.profile-v2-row__value {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-v2-row__value--muted {
    color: var(--muted);
    font-weight: 500;
}
#accountEditBioBtn.profile-v2-row {
    align-items: flex-start;
}
#accountEditBioBtn .profile-v2-row__label,
#accountEditBioBtn .profile-v2-row__chev {
    margin-top: 0.15rem;
}
#profileV2BioValue.profile-v2-row__value {
    white-space: pre-wrap;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.45;
}
.profile-v2-row__chev {
    color: var(--muted, #7a7268);
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.profile-v2-row__chev.lucide,
.profile-v2-row [data-lucide="chevron-right"] {
    width: 1rem;
    height: 1rem;
    stroke-width: 1.5;
}
.profile-v2-row:disabled .profile-v2-row__chev {
    display: none;
}
.profile-v2-life {
    background: var(--card);
    border: 1px solid var(--line, #d0c6ba);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
    padding: 14px;
}
.profile-v2-life__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.profile-v2-life__head strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}
.profile-v2-life__edit {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 6px;
}
.profile-v2-life__edit:hover {
    color: var(--ink-2);
}
.profile-v2-chips .profile-lifestyle-chip {
    padding: 6px 12px;
    font-size: 12.5px;
}
.profile-v2-foot {
    margin-top: 16px;
    padding: 4px 0 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.profile-v2-foot__logout {
    margin-bottom: 4px;
}
.profile-v2-logout-btn {
    display: block;
    width: 100%;
    border: 1px solid var(--line, #d0c6ba);
    background: #fff;
    color: var(--ink-2, #4f4841);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 13px 16px;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(36, 31, 28, 0.04);
}
.profile-v2-logout-btn:active {
    background: #faf7f3;
}
.profile-v2-logout-btn--home {
    border-color: var(--green-mute, #b4e2cd);
    color: var(--green-deep, #2d9f74);
    background: var(--green-soft, #eaf8f2);
}
.profile-v2-ghost-btn {
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 12px;
    cursor: pointer;
}
.profile-v2-ghost-btn--home {
    color: var(--green-deep);
}
.profile-v2-danger-btn {
    border: 0;
    background: transparent;
    color: #b91c1c;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    opacity: 0.75;
}
.profile-v2-ver {
    margin: 18px 0 14px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    text-align: center;
}
.profile-v2-danger-zone {
    margin-top: 4px;
    padding: 14px 12px 6px;
    border-top: 1px dashed #e5ddd4;
    text-align: center;
}
.profile-v2-danger-zone__hint {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 500;
    color: #a39a90;
    line-height: 1.4;
}
.profile-v2-danger-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: #b91c1c;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 10px;
    cursor: pointer;
    opacity: 0.55;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.profile-v2-danger-link:active {
    opacity: 0.85;
}
.profile-v2-guest {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 16px 24px;
    background: var(--card);
    border: 1px solid var(--line, #d0c6ba);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(43, 40, 37, 0.06), 0 6px 18px rgba(43, 40, 37, 0.07);
}
.profile-v2-guest__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--avatar-fallback-bg);
    color: var(--avatar-fallback-fg);
    display: grid;
    place-items: center;
    font-size: 22px;
    margin-bottom: 12px;
}
.profile-v2-guest__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 6px;
}
.profile-v2-guest__desc {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
    margin: 0 0 16px;
    max-width: 260px;
}
.profile-v2-guest__login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: var(--green);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(45, 159, 116, 0.28);
}
.profile-v2-panel-card {
    background: var(--card);
    border: 1px solid var(--line, #d0c6ba);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 1px 0 rgba(43, 40, 37, 0.06), 0 6px 18px rgba(43, 40, 37, 0.07);
}
.profile-v2-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
}
.profile-v2-panel-desc {
    margin: 0 0 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.45;
}
.profile-v2-push-list {
    box-shadow: none;
}

.profile-v2-memo-input {
    width: 100%;
    min-height: 140px;
    border: 1px solid var(--line);
    background: var(--page);
    border-radius: 12px;
    padding: 12px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    resize: vertical;
}
.profile-v2-memo-input:focus {
    outline: none;
    border-color: var(--green-mute);
    box-shadow: 0 0 0 3px rgba(60, 184, 137, 0.14);
}
.profile-v2-memo-input::placeholder {
    color: var(--muted);
}
.profile-v2-memo-save {
    width: 100%;
    margin-top: 10px;
    border: 0;
    background: var(--cta-mint-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 12px;
    border-radius: var(--cta-btn-r, 16px);
    cursor: pointer;
    box-shadow: var(--cta-mint-shadow);
    transition: filter 0.14s ease, transform 0.12s ease;
}
.profile-v2-memo-save:hover {
    filter: brightness(1.02);
}
.profile-v2-memo-save:active {
    filter: brightness(0.96);
    transform: scale(0.98);
}

/* 사용자 설정 페이지 슬라이드 애니메이션 */
#settingsPage {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#settingsPage.settings-open {
    transform: translateX(0);
}

#settingsPage.hidden {
    transform: translateX(100%);
}

/* 사용자 설정 페이지 스크롤바 스타일 - 얇고 흰색으로 눈에 띄지 않게 */
#settingsPage ::-webkit-scrollbar {
    width: 3px;
}

#settingsPage ::-webkit-scrollbar-track {
    background: transparent;
}

#settingsPage ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

#settingsPage ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Firefox 스크롤바 스타일 */
#settingsPage {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.tag-manage-item { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 6px 10px; 
    background: var(--app-page-bg); 
    border-radius: 6px; 
    border: 1px solid #e2e8f0; 
    margin-right: 4px; 
    margin-bottom: 4px; 
}
.tag-delete-btn { 
    margin-left: 6px; 
    color: #cbd5e1; 
    cursor: pointer; 
}
@keyframes toastSlideUp { 
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}
.animate-toast { 
    animation: toastSlideUp 0.3s ease-out forwards; 
}

/* 가로 다이얼(range) — 만족도/포만감 */
.mealog-dial {
    -webkit-appearance: none;
    appearance: none;
    height: 36px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e2e8f0 0%, #e2e8f0 100%);
    outline: none;
}
.mealog-dial::-webkit-slider-runnable-track {
    height: 36px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e2e8f0 0%, #e2e8f0 100%);
}
.mealog-dial::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 36px;
    height: 36px;
    margin-top: -11px; /* (thumb - track)/2 */
    border-radius: 999px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.mealog-dial::-moz-range-track {
    height: 36px;
    border-radius: 999px;
    background: #e2e8f0;
}
.mealog-dial::-moz-range-thumb {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* 세로 휠 다이얼 (갤럭시 타이머 느낌) */
.mealog-wheel {
    position: relative;
    height: 132px; /* 44px * 3줄 */
    border-radius: 18px;
    background: #f1f5f9; /* slate-100: 주변(비선택) 영역 */
    border: 1px solid #e2e8f0; /* slate-200 */
    overflow: hidden;
}
.mealog-wheel__indicator {
    position: absolute;
    left: 50%;
    width: 172px; /* 만족도·포만감 공통 중앙 윈도우 너비 */
    margin-left: -86px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    border-radius: 14px;
    background: #ffffff; /* 중앙(선택) 영역 */
    border: 1px solid #e2e8f0; /* slate-200 */
    pointer-events: none;
}
.mealog-wheel__scroller {
    height: 100%;
    /* 고르는 칸이지 읽는 글이 아니다 — 끌어 돌릴 때 글자가 잡히면 안 된다 */
    -webkit-user-select: none;
    user-select: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px;
    scrollbar-width: none;
}
.mealog-wheel__scroller::-webkit-scrollbar {
    display: none;
}
.mealog-wheel__pad {
    height: 44px; /* 위/아래 여백: 중앙 정렬 */
}
.mealog-wheel__item {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    font-weight: 900;
    color: #94a3b8; /* slate-400 */
    transition: transform 120ms ease, color 120ms ease, opacity 120ms ease;
    opacity: 0.55;
}
.mealog-wheel__item.mealog-wheel__item--active {
    color: #0f172a; /* slate-900 */
    opacity: 1;
    transform: scale(1.05);
}
.mealog-wheel__stars i {
    color: #facc15; /* yellow-400 */
    font-size: 16px;
    margin: 0 1px;
}
.mealog-wheel__stars {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
}
.mealog-wheel__item.mealog-wheel__item--active .mealog-wheel__stars i {
    font-size: 18px;
}