/* 프로필 페이지 공용 스타일 */
.md-typeset:has(.pp, .cr, .cl) > h1 { margin: 0; text-align: center; }
.pp { max-width: 560px; margin: 0 auto; }
.pp-loading { text-align: center; padding: 2rem; color: var(--md-default-fg-color--light); font-size: .875rem; }
.pp-noauth { text-align: center; padding: 2rem; }
.pp-noauth h2 { font-size: 1.1rem; margin-bottom: .5rem; }
.pp-login { display: inline-block; padding: .5rem 1.25rem; background: var(--md-primary-fg-color); color: #fff; border-radius: 6px; text-decoration: none; font-size: .875rem; margin-top: .5rem; }

.pp-field { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--md-default-fg-color--lightest); font-size: .875rem; }
.pp-field:last-child { border-bottom: none; }
.pp-label { font-size: .7rem; color: var(--md-default-fg-color--light); text-transform: uppercase; margin-bottom: .1rem; }
.pp-val { word-break: break-all; }
.pp-left { flex: 1; min-width: 0; }
.pp-right { margin-left: .75rem; flex-shrink: 0; }

.pp-btn, .pp-btn-link { padding: .25rem .6rem; border-radius: 4px; font-size: .75rem; cursor: pointer; text-decoration: none; border: 1px solid var(--md-primary-fg-color); background: transparent; color: var(--md-primary-fg-color); }
.pp-btn:hover, .pp-btn-link:hover { background: var(--md-primary-fg-color); color: #fff; }
.pp-btn-danger { padding: .25rem .6rem; border-radius: 4px; font-size: .75rem; cursor: pointer; text-decoration: none; border: 1px solid #f44336; background: transparent; color: #f44336; }
.pp-btn-danger:hover { background: #f44336; color: #fff; }

.pp-edit { display: none; margin-top: .25rem; }
.pp-edit.active { display: flex; gap: .4rem; align-items: center; }
.pp-input { flex: 1; padding: .3rem .5rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; font-size: .8rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); outline: none; }
.pp-input:focus { border-color: var(--md-primary-fg-color); }

.pp-sm { padding: .25rem .5rem; font-size: .7rem; border-radius: 4px; cursor: pointer; border: none; }
.pp-save { background: var(--md-primary-fg-color); color: #fff; }
.pp-cancel { background: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color); }

.pp-expand { display: none; margin-top: .5rem; padding: .75rem; background: var(--md-code-bg-color); border-radius: 6px; }
.pp-expand.active { display: block; }
.pp-fg { margin-bottom: .5rem; }
.pp-fg label { display: block; font-size: .7rem; color: var(--md-default-fg-color--light); margin-bottom: .15rem; }
.pp-fg input { width: 100%; padding: .35rem .5rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; font-size: .8rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); box-sizing: border-box; }
.pp-pw { position: relative; }
.pp-pw input { padding-right: 2rem; }
.pp-pw-eye { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0; color: var(--md-default-fg-color--light); display: flex; align-items: center; }
.pp-pw-eye:hover { color: var(--md-default-fg-color); }
.pp-pw-eye svg { width: 16px; height: 16px; }
.pp-fa { display: flex; gap: .4rem; margin-top: .5rem; }

.pp-msg { padding: .35rem .6rem; border-radius: 4px; font-size: .8rem; margin-top: .35rem; }
.pp-msg.ok { background: rgba(76,175,80,.1); color: #4caf50; }
.pp-msg.err { background: rgba(244,67,54,.1); color: #f44336; }

.pp-gh-user { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--md-default-fg-color); }
.pp-gh-user:hover { color: var(--md-primary-fg-color); }
.pp-gh-avatar { width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; }

/* API Keys */
.pp-section { font-size: .8rem; font-weight: 600; color: var(--md-default-fg-color); margin-top: 1.5rem; margin-bottom: .25rem; padding-bottom: .25rem; border-bottom: 2px solid var(--md-primary-fg-color); }
.pp-key-meta { font-size: .65rem; color: var(--md-default-fg-color--light); margin-top: .15rem; }
.pp-key-new { margin: .5rem 0; padding: .75rem; background: var(--md-code-bg-color); border-radius: 6px; border-left: 3px solid #ff9800; }
.pp-key-warn { font-size: .75rem; color: #ff9800; margin-bottom: .5rem; }
.pp-key-box { display: flex; align-items: center; gap: .5rem; }
.pp-key-box code { flex: 1; font-size: .7rem; word-break: break-all; padding: .35rem .5rem; background: var(--md-default-bg-color); border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; }
.pp-fg select { width: 100%; padding: .35rem .5rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; font-size: .8rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); box-sizing: border-box; }

/* API Key Modal */
.pp-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 999; }
.pp-modal { background: var(--md-default-bg-color); border-radius: 8px; padding: 1.25rem; max-width: 480px; width: 90%; box-shadow: 0 4px 24px rgba(0,0,0,.2); }
.pp-modal-title { font-size: .9rem; font-weight: 600; margin-bottom: .75rem; }
.pp-modal-key { display: block; font-size: .7rem; word-break: break-all; padding: .5rem .6rem; background: var(--md-code-bg-color); border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; margin-bottom: .75rem; user-select: all; }
.pp-modal-actions { display: flex; gap: .5rem; justify-content: space-between; }
.pp-gh-desc { font-size: .7rem; color: var(--md-default-fg-color--light); margin-top: .15rem; }