.profile-page { min-height: calc(100vh - 150px); padding-top: 29px; padding-bottom: 72px; }
.profile-breadcrumb { margin: 0 0 19px; color: var(--muted); font-size: 11px; }
.profile-breadcrumb a { color: #d4c1ff; }
.profile-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); align-items: start; gap: 24px; }
.profile-sidebar, .profile-panel, .profile-card-header { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #191825, #14131e); }
.profile-sidebar { position: sticky; top: 92px; overflow: hidden; padding: 20px 15px 15px; }
.profile-sidebar-user { display: grid; justify-items: center; gap: 7px; padding: 7px 0 20px; border-bottom: 1px solid var(--line); text-align: center; }
.profile-avatar-large { display: grid; width: 74px; height: 74px; place-items: center; border: 1px solid #ffffff35; border-radius: 25px; background: linear-gradient(145deg, #a477ff, #714ad1); color: white; font-size: 24px; font-weight: 800; letter-spacing: -.04em; box-shadow: 0 8px 24px #8d69e33d; }
.profile-avatar-large[data-color="cyan"] { background: linear-gradient(145deg, #63dce3, #36839d); }
.profile-avatar-large[data-color="rose"] { background: linear-gradient(145deg, #ff88b9, #b84b81); }
.profile-avatar-large[data-color="amber"] { background: linear-gradient(145deg, #f2ce83, #b97935); }
.profile-sidebar-user strong { max-width: 100%; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.profile-sidebar-user > span { color: var(--muted); font-size: 10px; }
.profile-menu { display: grid; gap: 5px; padding: 15px 0; }
.profile-menu a { padding: 10px 11px; border: 1px solid transparent; border-radius: 9px; color: #bcb7c9; font-size: 11px; transition: .18s; }
.profile-menu a:hover { background: #ffffff08; color: white; }
.profile-menu a.active { border-color: #a477ff36; background: #a477ff17; color: #dfd2ff; font-weight: 700; }
.profile-logout { width: 100%; min-height: 35px; border: 1px solid #ffffff1b; border-radius: 9px; background: transparent; color: #aaa5b6; font: inherit; font-size: 10px; cursor: pointer; }
.profile-logout:hover { border-color: #ff8aaf65; color: #ff9fbe; }
.profile-main { display: grid; gap: 17px; min-width: 0; }
.profile-card-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 25px 28px; background: radial-gradient(ellipse at 90% 0, #9c76ff20, transparent 48%), linear-gradient(135deg, #1d1b2a, #15141f); }
.profile-card-header h1 { margin: 3px 0 7px; font-family: 'Noto Sans KR', sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -.045em; }
.profile-card-header p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.profile-avatar-preview { width: 62px; height: 62px; flex: 0 0 auto; border-radius: 20px; font-size: 19px; }
.profile-panel { padding: 23px 27px 26px; }
.profile-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.profile-panel-heading h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.profile-panel-heading p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.profile-section-icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid #a477ff36; border-radius: 10px; background: #a477ff15; color: #d5c2ff; }
.profile-form { display: grid; gap: 14px; padding: 19px 0 0; }
.profile-form input[readonly] { border-style: dashed; color: #a9a5b3; }
.profile-form textarea { width: 100%; min-height: 86px; resize: vertical; padding: 11px 12px; border: 1px solid #ffffff1c; border-radius: 9px; outline: none; background: #0d0c14; color: var(--text); font: inherit; font-size: 12px; line-height: 1.6; }
.profile-form textarea:focus { border-color: #a477ff99; box-shadow: 0 0 0 3px #a477ff1c; }
.profile-form textarea::placeholder { color: #706c7e; }
.avatar-color-options { display: flex; flex-wrap: wrap; gap: 13px; }
.avatar-color-options label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #bdb8c8; font-size: 10px; cursor: pointer; }
.avatar-color-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-color-swatch { width: 17px; height: 17px; border: 2px solid #ffffff44; border-radius: 50%; }
.avatar-color-swatch.violet { background: #9874ed; }
.avatar-color-swatch.cyan { background: #55becd; }
.avatar-color-swatch.rose { background: #e86e9d; }
.avatar-color-swatch.amber { background: #d39a4b; }
.avatar-color-options input:checked + .avatar-color-swatch { outline: 2px solid #eee4ff; outline-offset: 2px; }
.avatar-color-options input:focus-visible + .avatar-color-swatch { outline: 2px solid var(--cyan); outline-offset: 3px; }
.profile-form-actions { display: flex; justify-content: flex-end; padding-top: 2px; }
.profile-form-actions .button { min-width: 145px; }
.privacy-summary { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 14px; border: 1px solid #71e5ed24; border-radius: 11px; background: #71e5ed09; }
.privacy-summary > span { flex: 0 0 auto; font-size: 16px; }
.privacy-summary p { margin: 0; color: #b5c8cb; font-size: 10px; line-height: 1.75; }
.profile-member-since { margin: 16px 0 0; color: var(--muted); font-size: 10px; }
.profile-member-since time { margin-left: 7px; color: #d8d3e2; }
.profile-post-status { margin: 16px 0 8px; color: var(--muted); font-size: 11px; }
.profile-post-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.profile-post-item a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #ffffff12; border-radius: 10px; background: #ffffff04; transition: border-color .18s, background .18s; }
.profile-post-item a:hover { border-color: #a477ff55; background: #a477ff0c; }
.profile-post-category { padding: 5px 8px; border-radius: 999px; background: #a477ff1c; color: #d8c8ff; font-size: 9px; white-space: nowrap; }
.profile-post-item strong { overflow: hidden; color: #e6e2ec; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.profile-post-item time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.profile-avatar-image { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.profile-image-control { display: grid; gap: 7px; }
.profile-image-control input[type="file"] { width: 100%; padding: 10px; border: 1px solid #ffffff18; border-radius: 10px; background: #ffffff06; color: var(--muted); font: inherit; font-size: 11px; }
.profile-image-clear { justify-self: start; min-height: 34px; padding: 0 12px; font-size: 10px; }
.profile-details { display: grid; gap: 0; margin: 18px 0; }
.profile-details > div { display: grid; grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr); gap: 14px; padding: 14px 3px; border-bottom: 1px solid #ffffff12; }
.profile-details dt { color: var(--muted); font-size: 11px; }
.profile-details dd { min-width: 0; margin: 0; color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.profile-edit-link { min-width: 145px; }
.password-reset-intro { display: flex; align-items: center; gap: 15px; margin: 18px 0 14px; padding: 15px; border: 1px solid #ffffff12; border-radius: 10px; background: #ffffff04; }
.password-reset-mask { color: #e6e1f0; font-size: 15px; letter-spacing: 3px; white-space: nowrap; }
.password-reset-intro p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.password-reset-toggle { min-height: 36px; padding: 0 14px; font-size: 11px; }
.password-reset-form { display: grid; gap: 13px; margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff04; }
.password-reset-form[hidden] { display: none; }
.password-reset-form label { display: block; margin-bottom: 6px; color: #d8d3e2; font-size: 11px; font-weight: 600; }
.password-reset-form input { width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid #ffffff1c; border-radius: 9px; outline: none; background: #0d0c14; color: var(--text); font: inherit; font-size: 12px; }
.password-reset-form input:focus { border-color: #a477ff99; box-shadow: 0 0 0 3px #a477ff1c; }
.password-reset-form .field-hint { margin: 5px 0 0; color: #888396; font-size: 10px; }
.password-reset-form .auth-message { min-height: 17px; margin: 0; color: #ff93b7; font-size: 11px; line-height: 1.6; }
.password-reset-form .auth-message.success { color: #8de2c4; }
.password-reset-form > .button { justify-self: start; min-height: 38px; padding: 0 14px; font-size: 11px; }
.profile-view .profile-card-header { justify-content: flex-start; }
.profile-view .profile-avatar-preview { margin-left: auto; }
.profile-auth-required[hidden] { display: none; }
@media (max-width: 760px) {
  .profile-layout { grid-template-columns: 1fr; gap: 14px; }
  .profile-sidebar { position: static; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 13px; }
  .profile-sidebar-user { display: flex; justify-items: initial; justify-content: flex-start; gap: 10px; padding: 0; border: 0; text-align: left; }
  .profile-sidebar-user strong { max-width: 130px; }
  .profile-sidebar-user > span { display: none; }
  .profile-avatar-large { width: 42px; height: 42px; border-radius: 14px; font-size: 15px; }
  .profile-menu { grid-column: 1 / -1; display: flex; gap: 5px; padding: 6px 0 0; border-top: 1px solid var(--line); }
  .profile-menu a { flex: 1; text-align: center; }
  .profile-logout { width: auto; padding: 0 12px; }
  .profile-card-header, .profile-panel { padding: 20px; }
  .profile-details > div { grid-template-columns: 1fr; gap: 5px; }
  .profile-post-item a { grid-template-columns: auto minmax(0, 1fr); gap: 7px 10px; }
  .profile-post-item time { grid-column: 2; }
}
@media (max-width: 480px) {
  .profile-page { padding-top: 19px; padding-bottom: 45px; }
  .profile-card-header h1 { font-size: 21px; }
  .profile-avatar-preview { width: 52px; height: 52px; border-radius: 17px; }
  .profile-panel { padding: 18px 16px 20px; }
  .avatar-color-options { gap: 10px; }
  .avatar-color-options label { font-size: 9px; }
  .profile-form-actions .button { width: 100%; }
}