/* ============================================================
   집사넷 마이홈피 — 공통 스타일
   컨셉: 화이트 베이스 + 옅은 로즈 액센트
   기준: 노안 대응 17px 본문, 진한 텍스트 컬러
   ============================================================ */

/* 폰트 옵션 웹폰트 — Google Fonts (한 번에 4개 family 로드) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;700&family=Gowun+Batang:wght@400;700&family=Jua&family=Gaegu:wght@300;400;700&display=swap');

:root {
    --hp-primary:        #c89cae;   /* 옅은 로즈 (메인) */
    --hp-primary-dark:   #a87889;   /* 진한 로즈 (강조) */
    --hp-primary-soft:   #f7ecf0;   /* 옅은 배경 톤 */
    --hp-primary-line:   #e6cfd6;   /* 보더 */

    --hp-text:           #1a1a1a;
    --hp-text-sub:       #3f3f3f;
    --hp-text-mute:      #4a4a4a;
    --hp-text-hint:      #666;
    --hp-text-light:     #888;

    --hp-bg:             #ffffff;
    --hp-bg-soft:        #fafafa;
    --hp-bg-cover:       #faf3f5;

    --hp-border:         #ebebeb;
    --hp-border-soft:    #f0f0f0;

    --hp-radius:         0;
    --hp-radius-sm:      0;
    --hp-radius-lg:      0;

    --hp-shadow-1:       0 1px 3px rgba(0,0,0,0.08);
    --hp-shadow-2:       0 2px 6px rgba(0,0,0,0.10);
    --hp-shadow-3:       0 3px 12px rgba(0,0,0,0.12);
    --hp-shadow-color-soft: 0 2px 6px rgba(200,156,174,0.18);
    --hp-shadow-color:   0 4px 12px rgba(200,156,174,0.32);

    --hp-pad:            16px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--hp-bg);
    color: var(--hp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
                 "Malgun Gothic", "맑은 고딕", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

/* ===== 레이아웃 ===== */
.hp-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--hp-pad);
    padding-bottom: 60px;
    min-height: 100vh;
    background: var(--hp-bg);
}

.hp-home {
    padding: 0 0 60px 0;
}

/* ===== 페이지 헤더 ===== */
.hp-page-head {
    text-align: center;
    padding: 28px 0 20px;
    border-bottom: 1px solid var(--hp-border-soft);
    margin-bottom: 20px;
}
.hp-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--hp-text);
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}
.hp-page-desc {
    font-size: 15px;
    color: var(--hp-text-hint);
    margin: 0;
}

/* ===== 관리자 헤더 (뒤로 + 제목) ===== */
.hp-admin-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hp-border-soft);
    margin-bottom: 16px;
    background: #fff;
    /* [스티키 해제 2026-07-07] 헤더가 상단에 붙지 않고 전체 스크롤과 함께 올라가도록.
       복구하려면 아래 3줄 주석 해제: */
    /* position: sticky; top: 0; z-index: 10; */
}
.hp-back-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--hp-text-sub);
    border-radius: 0;
    transition: background 0.15s;
}
.hp-back-btn:active { background: var(--hp-bg-soft); }
.hp-admin-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--hp-text);
    letter-spacing: -0.2px;
    flex: 1;
    min-width: 0;
}

/* ===== 버튼 ===== */
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 22px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 0;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    line-height: 1;
    background: var(--hp-bg);
    color: var(--hp-text);
    min-height: 44px;
    box-sizing: border-box;
    font-family: inherit;
}
.hp-btn-primary {
    background: var(--hp-primary);
    color: #fff;
    border-color: var(--hp-primary);
    box-shadow: var(--hp-shadow-color-soft);
}
.hp-btn-primary:active {
    background: var(--hp-primary-dark);
    border-color: var(--hp-primary-dark);
    box-shadow: 0 1px 3px rgba(200,156,174,0.20);
}
.hp-btn-line {
    background: #fff;
    border-color: var(--hp-border);
    color: var(--hp-text-sub);
}
.hp-btn-line:active {
    background: var(--hp-bg-soft);
}
.hp-btn-danger {
    color: #c0392b;
    border-color: #f0d0cc;
}
.hp-btn-sm   { padding: 9px 16px; font-size: 15px; min-height: 36px; }
.hp-btn-xs   { padding: 7px 12px; font-size: 14px; min-height: 30px; }
.hp-btn-block{ display: flex; width: 100%; }

/* ===== 개설 카드 (홈피 없는 사람) ===== */
.hp-create-card {
    background: linear-gradient(135deg, #fff 0%, var(--hp-primary-soft) 100%);
    border: 1px solid var(--hp-primary-line);
    border-radius: 0;
    padding: 32px 22px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--hp-shadow-color-soft);
}
.hp-create-icon {
    font-size: 40px;
    margin-bottom: 10px;
}
.hp-create-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--hp-text);
    margin: 0 0 10px;
}
.hp-create-desc {
    font-size: 15px;
    color: var(--hp-text-mute);
    line-height: 1.6;
    margin: 0 0 20px;
}

/* ===== 내 홈피 카드 ===== */
.hp-my-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--hp-primary-soft);
    border: 1px solid var(--hp-primary-line);
    border-radius: 0;
    padding: 14px 16px;
    margin-bottom: 24px;
}
.hp-my-label {
    font-size: 13px;
    color: var(--hp-primary-dark);
    font-weight: 600;
    margin-bottom: 2px;
}
.hp-my-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--hp-text);
    letter-spacing: -0.2px;
}

/* ===== 섹션 타이틀 ===== */
.hp-section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--hp-text);
    margin: 0 0 12px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.hp-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--hp-text-light);
}

/* ===== 홈피 목록 (그리드) ===== */
/* 가로 목록형 — 썸네일 왼쪽, 정보 오른쪽 */
.hp-list {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    overflow: hidden;
}
.hp-list-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--hp-border-soft);
    color: inherit;
    text-decoration: none;
    transition: background 0.12s;
}
.hp-list-item:last-child {
    border-bottom: none;
}
.hp-list-item:active {
    background: var(--hp-bg-soft);
}
.hp-list-cover {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 0;
    background: var(--hp-bg-cover);
    background-size: cover;
    background-position: center;
}
.hp-list-cover-placeholder {
    display: none;
}
.hp-list-body {
    flex: 1;
    min-width: 0;
}
.hp-list-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hp-text);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.2px;
}
.hp-list-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: var(--hp-text-light);
}
.hp-list-owner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.hp-list-date {
    flex-shrink: 0;
    font-size: 13px;
}

/* ===== 빈 상태 ===== */
.hp-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--hp-text-light);
    font-size: 15px;
}
.hp-empty-lg {
    padding: 60px 16px;
}
.hp-empty-icon {
    font-size: 48px;
    margin-bottom: 14px;
    opacity: 0.5;
}
.hp-empty-text {
    font-size: 16px;
    color: var(--hp-text-hint);
}

/* ===== 페이지네이션 ===== */
.hp-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.hp-page-num {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    font-size: 15px;
    color: var(--hp-text-sub);
    background: #fff;
    border: 1px solid var(--hp-border);
}
.hp-page-num.current {
    background: var(--hp-primary);
    color: #fff;
    border-color: var(--hp-primary);
    font-weight: 600;
}

/* ============================================================
   개인 홈피 대문 (home.php)
   ============================================================ */
.hp-cover {
    /* 16:9 영역 강제 (padding-top 트릭 - 모든 브라우저 호환) */
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    position: relative;
    background: var(--hp-bg-cover);
    overflow: hidden;
}
/* is-empty는 같은 비율이라 추가 처리 불필요 */
.hp-cover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hp-cover-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hp-cover-emoji {
    font-size: 64px;
    opacity: 0.6;
}
.hp-cover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 16px 16px;
    background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
    color: #fff;
}
.hp-cover-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.hp-cover-owner {
    font-size: 14px;
    opacity: 0.95;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.hp-intro {
    margin: 16px 16px 0;
    padding: 14px 16px;
    background: var(--hp-primary-soft);
    border-radius: 0;
    font-size: 15px;
    color: var(--hp-text-sub);
    line-height: 1.6;
}

.hp-admin-bar {
    margin: 14px 16px 0;
    text-align: right;
}

.hp-menu {
    margin: 18px 16px 0;
}
.hp-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    margin-bottom: 7px;
    transition: background 0.15s;
}
.hp-menu-item:active { background: var(--hp-bg-soft); }
.hp-menu-item.disabled { opacity: 0.55; }
.hp-menu-icon {
    font-size: 28px;
    width: 36px;
    text-align: center;
}
.hp-menu-body { flex: 1; min-width: 0; }
.hp-menu-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--hp-text);
    margin-bottom: 2px;
    letter-spacing: -0.2px;
}
.hp-menu-count {
    font-size: 14px;
    color: var(--hp-text-hint);
}
.hp-menu-arrow {
    font-size: 22px;
    color: var(--hp-text-light);
    font-weight: 300;
}
.hp-soon {
    display: inline-block;
    padding: 2px 7px;
    font-size: 11px;
    color: var(--hp-text-light);
    background: var(--hp-bg-soft);
    border-radius: 0;
    font-weight: 500;
    margin-left: 4px;
    vertical-align: middle;
}

.hp-foot-meta {
    text-align: center;
    margin: 28px 16px 16px;
    font-size: 13px;
    color: var(--hp-text-light);
}

.hp-back {
    text-align: center;
    margin-top: 16px;
    padding: 0 16px;
}
.hp-link-back {
    font-size: 15px;
    color: var(--hp-text-hint);
    padding: 8px 16px;
    display: inline-block;
}

/* ============================================================
   관리자 페이지 (admin)
   ============================================================ */
.hp-welcome {
    background: linear-gradient(135deg, #fff, var(--hp-primary-soft));
    border: 1px solid var(--hp-primary-line);
    border-radius: 0;
    padding: 24px 20px;
    text-align: center;
    margin-bottom: 22px;
    box-shadow: var(--hp-shadow-color-soft);
}
.hp-welcome-icon { font-size: 36px; margin-bottom: 8px; }
.hp-welcome-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--hp-text);
    margin: 0 0 10px;
}
.hp-welcome-desc {
    font-size: 15px;
    color: var(--hp-text-sub);
    line-height: 1.65;
    margin: 0 0 12px;
}
.hp-welcome-note {
    font-size: 14px;
    color: var(--hp-primary-dark);
    line-height: 1.6;
    margin: 0;
    padding: 10px 12px;
    background: #fff;
    border-radius: 0;
}

.hp-admin-section {
    margin-bottom: 22px;
}
.hp-admin-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hp-text-sub);
    margin: 0 0 10px;
    padding-left: 2px;
}

.hp-admin-info-card {
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    padding: 14px 16px;
}
.hp-info-row {
    display: flex;
    gap: 14px;
    padding: 8px 0;
    font-size: 15px;
    border-bottom: 1px dashed var(--hp-border-soft);
}
.hp-info-row:last-of-type { border-bottom: none; margin-bottom: 8px; }
.hp-info-label {
    color: var(--hp-text-hint);
    min-width: 50px;
    flex-shrink: 0;
}
.hp-info-value {
    color: var(--hp-text);
    word-break: break-all;
    flex: 1;
}

.hp-board-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    margin-bottom: 8px;
}
.hp-board-row.disabled { opacity: 0.55; }
.hp-board-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--hp-text);
    margin-bottom: 2px;
}
.hp-board-count {
    font-size: 13px;
    color: var(--hp-text-hint);
}
.hp-board-actions {
    display: flex;
    gap: 6px;
}

.hp-help-list {
    margin: 0;
    padding: 14px 16px 14px 32px;
    background: var(--hp-bg-soft);
    border-radius: 0;
    font-size: 14px;
    color: var(--hp-text-mute);
    line-height: 1.8;
}
.hp-help-list li { margin-bottom: 2px; }

/* ============================================================
   다이어리 목록 (diary/list.php)
   ============================================================ */
.hp-list-info {
    font-size: 14px;
    color: var(--hp-text-hint);
    padding: 0 4px 12px;
}
.hp-list-info strong {
    color: var(--hp-primary-dark);
}

.hp-diary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hp-border);
}
.hp-diary-list li {
    border-bottom: 1px solid var(--hp-border-soft);
}
.hp-diary-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 4px;
    transition: background 0.15s;
}
.hp-diary-row:active { background: var(--hp-bg-soft); }
.hp-diary-no {
    font-size: 13px;
    color: var(--hp-text-light);
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.hp-diary-title {
    flex: 1;
    font-size: 17px;
    font-weight: 500;
    color: var(--hp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.2px;
}
.hp-diary-date {
    font-size: 14px;
    color: var(--hp-text-hint);
    flex-shrink: 0;
}

/* FAB (글쓰기 플로팅 버튼) */
.hp-fab-area {
    position: fixed;
    bottom: 20px;
    right: 50%;
    transform: translateX(312px);
    z-index: 50;
}
@media (max-width: 632px) {
    .hp-fab-area { right: 16px; transform: none; }
}
.hp-fab {
    width: 54px;
    height: 54px;
    border-radius: 0;
    background: var(--hp-primary);
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--hp-shadow-color);
    transition: all 0.15s;
}
.hp-fab:active {
    transform: scale(0.95);
    background: var(--hp-primary-dark);
}

/* ============================================================
   다이어리 상세 (diary/view.php)
   ============================================================ */
.hp-diary-article {
    padding: 8px 0 24px;
}
.hp-diary-article-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--hp-text);
    margin: 0 0 8px;
    line-height: 1.4;
    letter-spacing: -0.3px;
}
.hp-diary-article-meta {
    font-size: 14px;
    color: var(--hp-text-hint);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hp-border-soft);
    margin-bottom: 20px;
}

.hp-diary-photos {
    margin-bottom: 24px;
}
.hp-diary-photo {
    margin: 0 0 18px;
}
.hp-diary-photo img {
    width: 100%;
    border-radius: 0;
    background: var(--hp-bg-soft);
}
.hp-diary-photo figcaption {
    margin-top: 10px;
    padding: 0;
    font-size: 17px;
    color: var(--hp-text);
    line-height: 1.75;
    text-align: left;
    font-style: normal;
    word-break: break-word;
}

.hp-diary-body {
    font-size: 17px;
    line-height: 1.75;
    color: var(--hp-text);
    word-break: break-word;
}

.hp-action-bar {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--hp-border-soft);
}

/* ============================================================
   폼 (작성/수정)
   ============================================================ */
.hp-form { padding-bottom: 30px; }

.hp-field {
    margin-bottom: 18px;
}
.hp-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-text-sub);
    margin-bottom: 8px;
}
.hp-hint {
    font-size: 13px;
    color: var(--hp-text-light);
    font-weight: 400;
    margin-left: 4px;
}

.hp-input,
.hp-textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--hp-text);
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    box-sizing: border-box;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.hp-input:focus,
.hp-textarea:focus {
    outline: none;
    border-color: var(--hp-primary);
    box-shadow: 0 0 0 3px rgba(200,156,174,0.15);
}
.hp-textarea {
    resize: vertical;
    min-height: 200px;
}

/* 업로드 영역 */
.hp-upload-area {
    border: 2px dashed var(--hp-primary-line);
    border-radius: 0;
    background: var(--hp-primary-soft);
    transition: all 0.15s;
}
.hp-upload-area.hidden { display: none; }
.hp-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    color: var(--hp-primary-dark);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    gap: 6px;
}
.hp-upload-icon { font-size: 28px; }

.hp-preview-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.hp-preview-item {
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    padding: 10px;
    display: flex;
    gap: 10px;
}
.hp-preview-thumb {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--hp-bg-soft);
}
.hp-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hp-preview-num {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    width: 20px;
    height: 20px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hp-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    border-radius: 0;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hp-preview-caption {
    flex: 1;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--hp-text);
    background: #fff;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
    min-height: 90px;
}
.hp-preview-caption:focus {
    outline: none;
    border-color: var(--hp-primary);
}
.hp-image-count {
    margin-top: 8px;
    font-size: 13px;
    color: var(--hp-text-hint);
    text-align: right;
}

/* 기존 이미지 (수정 폼) */
.hp-existing-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.hp-existing-item {
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    padding: 10px;
    display: flex;
    gap: 10px;
    transition: all 0.2s;
}
.hp-existing-item.marked-delete {
    background: #fdf2f0;
    border-color: #f0d0cc;
    opacity: 0.6;
}
.hp-existing-thumb {
    width: 90px;
    height: 90px;
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--hp-bg-soft);
    position: relative;
}
.hp-existing-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hp-existing-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hp-delete-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #c0392b;
    cursor: pointer;
}
.hp-delete-check input { margin: 0; }

/* 버튼 행 */
.hp-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}
.hp-btn-row .hp-btn { flex: 1; }

/* 알림 */
.hp-alert {
    padding: 12px 14px;
    background: #fdf2f0;
    border: 1px solid #f0d0cc;
    border-radius: 0;
    color: #b03a2e;
    font-size: 15px;
    margin-bottom: 16px;
}

/* ============================================================
   대문 사진 편집 카드 (admin/index.php)
   ============================================================ */
.hp-cover-edit-card {
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    padding: 14px;
}
.hp-cover-preview {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: var(--hp-bg-cover);
    background-size: cover;
    background-position: center;
    border-radius: 0;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--hp-border-soft);
}
.hp-cover-preview .hp-cover-empty {
    position: absolute;
    inset: 0;
}
.hp-cover-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--hp-text-light);
}
.hp-cover-empty-icon {
    font-size: 36px;
    opacity: 0.6;
}
.hp-cover-empty-text {
    font-size: 14px;
}
.hp-cover-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.hp-cover-actions .hp-btn {
    flex: 1;
    min-width: 0;
}
.hp-cover-hint {
    margin: 10px 2px 0;
    font-size: 13px;
    color: var(--hp-text-hint);
    line-height: 1.5;
}

/* ============================================================
   결과 메시지 (flash)
   ============================================================ */
.hp-flash {
    padding: 12px 14px;
    border-radius: 0;
    font-size: 15px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.hp-flash-ok {
    background: var(--hp-primary-soft);
    border: 1px solid var(--hp-primary-line);
    color: var(--hp-primary-dark);
}
.hp-flash-err {
    background: #fdf2f0;
    border: 1px solid #f0d0cc;
    color: #b03a2e;
}

/* 폼 필드 아래 안내 텍스트 */
.hp-field-hint {
    margin-top: 6px;
    font-size: 13px;
    color: var(--hp-text-hint);
    line-height: 1.5;
    padding: 0 2px;
}

/* ============================================================
   본문 폰트 옵션 — 4가지 웹폰트
   ============================================================ */

/* 바탕 (보통 명조) */
body.hp-font-serif,
body.hp-font-serif input,
body.hp-font-serif textarea,
body.hp-font-serif button,
body.hp-font-serif .hp-input,
body.hp-font-serif .hp-textarea,
body.hp-font-serif .hp-btn {
    font-family: "Noto Serif KR",
                 "AppleMyungjo", "Apple Myungjo",
                 "Nanum Myeongjo", "나눔명조",
                 "바탕", "Batang",
                 serif;
}

/* 고운 바탕 (우아한 명조) */
body.hp-font-elegant,
body.hp-font-elegant input,
body.hp-font-elegant textarea,
body.hp-font-elegant button,
body.hp-font-elegant .hp-input,
body.hp-font-elegant .hp-textarea,
body.hp-font-elegant .hp-btn {
    font-family: "Gowun Batang",
                 "Noto Serif KR",
                 "AppleMyungjo", "Apple Myungjo",
                 serif;
}

/* 둥근 (부드러운 sans) */
body.hp-font-rounded,
body.hp-font-rounded input,
body.hp-font-rounded textarea,
body.hp-font-rounded button,
body.hp-font-rounded .hp-input,
body.hp-font-rounded .hp-textarea,
body.hp-font-rounded .hp-btn {
    font-family: "Jua",
                 "Apple SD Gothic Neo",
                 "Malgun Gothic", "맑은 고딕",
                 sans-serif;
}

/* 손글씨 (일기장 감성) */
body.hp-font-handwriting,
body.hp-font-handwriting input,
body.hp-font-handwriting textarea,
body.hp-font-handwriting button,
body.hp-font-handwriting .hp-input,
body.hp-font-handwriting .hp-textarea,
body.hp-font-handwriting .hp-btn {
    font-family: "Gaegu",
                 "Apple SD Gothic Neo",
                 "Malgun Gothic", "맑은 고딕",
                 sans-serif;
    /* Gaegu는 글자 폭이 좁아서 살짝 키움 */
    font-size: 18px;
}

/* ============================================================
   settings.php — 폰트 선택 라디오
   ============================================================ */
.hp-font-radios {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hp-font-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid var(--hp-border);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s;
}
.hp-font-radio:active { background: var(--hp-bg-soft); }
.hp-font-radio.active {
    border-color: var(--hp-primary);
    background: var(--hp-primary-soft);
    box-shadow: var(--hp-shadow-color-soft);
}
.hp-font-radio input[type="radio"] {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--hp-primary);
    flex-shrink: 0;
}
.hp-font-radio-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-text-sub);
    flex-shrink: 0;
    min-width: 80px;
}
.hp-font-radio.active .hp-font-radio-name {
    color: var(--hp-primary-dark);
}
.hp-font-radio-sample {
    font-size: 17px;
    color: var(--hp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
/* 미리보기별 폰트 적용 */
.hp-font-radio-sample.serif {
    font-family: "Noto Serif KR", "AppleMyungjo", serif;
    font-weight: 500;
}
.hp-font-radio-sample.elegant {
    font-family: "Gowun Batang", "Noto Serif KR", serif;
    font-weight: 500;
}
.hp-font-radio-sample.rounded {
    font-family: "Jua", "Apple SD Gothic Neo", sans-serif;
}
.hp-font-radio-sample.handwriting {
    font-family: "Gaegu", "Apple SD Gothic Neo", sans-serif;
    font-weight: 700;
    font-size: 19px;
}

/* ============================================================
   색상 테마 — 회색 (body.hp-theme-gray)
   기본은 핑크 (:root에 정의됨)
   ============================================================ */
body.hp-theme-gray {
    --hp-primary:        #7a7a7a;   /* 중간 회색 */
    --hp-primary-dark:   #555;      /* 진한 회색 */
    --hp-primary-soft:   #f3f3f3;   /* 옅은 배경 */
    --hp-primary-line:   #d8d8d8;   /* 보더 */
    --hp-bg-cover:       #f0f0f0;   /* 대문 빈 상태 배경 */
    --hp-shadow-color-soft: 0 2px 6px rgba(122,122,122,0.18);
    --hp-shadow-color:      0 4px 12px rgba(122,122,122,0.32);
}

/* 회색 테마에서 대문 그라디언트도 무채색으로 */
body.hp-theme-gray .hp-cover {
    background: linear-gradient(135deg, #f3f3f3, #fff);
}
body.hp-theme-gray .hp-create-card,
body.hp-theme-gray .hp-welcome {
    background: linear-gradient(135deg, #fff 0%, #f3f3f3 100%);
}

/* 색상 테마 라디오 — 색 견본 */
.hp-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 0;
    border: 1.5px solid var(--hp-border);
    flex-shrink: 0;
    box-shadow: var(--hp-shadow-1);
}

/* ============================================================
   다이어리 댓글
   집사넷 댓글 표준: 박스 X, 라인 구분, 14px 여유, 점선 X
   아바타 제거 (미니멀 컨셉)
   답글: 왼쪽 2px 선 들여쓰기
   ============================================================ */
.hp-comments {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--hp-border);
}

/* 토글 헤더 (디폴트 접힘) */
.hp-comments-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 4px 2px;
    font-size: 17px;
    font-weight: 700;
    color: var(--hp-text);
    cursor: pointer;
    font-family: inherit;
    min-height: 32px;
}
.hp-comments-toggle:active { color: var(--hp-primary-dark); }
.hp-comments-arrow {
    display: inline-block;
    font-size: 11px;
    color: var(--hp-text-light);
    transition: transform 0.2s;
    font-weight: 400;
    margin-left: 2px;
    line-height: 1;
}
.hp-comments-toggle.open .hp-comments-arrow {
    transform: rotate(180deg);
}

/* 펼치는 영역 */
.hp-comments-body {
    display: none;
    margin-top: 14px;
}
.hp-comments-body.open { display: block; }

/* 작성 폼 */
.hp-comment-form {
    margin-bottom: 18px;
}
.hp-comment-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--hp-text);
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    resize: vertical;
    min-height: 70px;
    box-sizing: border-box;
    font-family: inherit;
}
.hp-comment-form textarea:focus {
    outline: none;
    border-color: var(--hp-primary);
    box-shadow: 0 0 0 3px rgba(200,156,174,0.15);
}
.hp-comment-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
body.hp-theme-gray .hp-comment-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(122,122,122,0.15);
}

/* 댓글 목록 */
.hp-comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hp-comment {
    padding: 14px 0;
    border-bottom: 1px solid var(--hp-border-soft);
}
.hp-comment:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.hp-comment-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.hp-comment-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-text);
}
.hp-comment-name.is-owner {
    color: var(--hp-primary-dark);
}
.hp-comment-time {
    font-size: 14px;
    color: var(--hp-text-light);
}
.hp-comment-content {
    font-size: 17px;
    line-height: 1.6;
    color: var(--hp-text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* 액션 버튼 */
.hp-comment-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    margin-left: -8px;
}
.hp-comment-btn {
    padding: 4px 8px;
    font-size: 14px;
    color: var(--hp-text-hint);
    background: none;
    border: none;
    cursor: pointer;
    min-height: 28px;
    border-radius: 0;
    font-family: inherit;
}
.hp-comment-btn:active { background: var(--hp-bg-soft); }
.hp-comment-btn:hover  { color: var(--hp-text-sub); }
.hp-comment-btn.danger:hover { color: #c0392b; }
.hp-comment-btn.primary {
    color: var(--hp-primary-dark);
    font-weight: 600;
}

/* 빈 상태 */
.hp-comment-empty {
    padding: 18px 0;
    text-align: center;
    font-size: 15px;
    color: var(--hp-text-light);
    list-style: none;
}

/* 답글 영역 (홈피 주인만 작성) */
.hp-comment-replies {
    margin-top: 12px;
    padding-left: 14px;
    border-left: 2px solid var(--hp-primary-line);
    list-style: none;
}
.hp-comment-reply {
    padding: 10px 0;
    border-bottom: 1px solid var(--hp-border-soft);
}
.hp-comment-reply:first-child { padding-top: 4px; }
.hp-comment-reply:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}

/* 답글 작성 폼 (인라인) */
.hp-reply-form {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--hp-bg-soft);
    border-radius: 0;
}
.hp-reply-form textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--hp-text);
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
    font-family: inherit;
}
.hp-reply-form-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 6px;
}

/* 인라인 수정 모드 */
.hp-comment-edit {
    margin-top: 6px;
}
.hp-comment-edit textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.55;
    border: 1px solid var(--hp-primary);
    border-radius: 0;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    box-sizing: border-box;
    color: var(--hp-text);
}
.hp-comment-edit textarea:focus { outline: none; }
.hp-comment-edit-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 6px;
}

/* ============================================================
   속마음 (postscript) — 본문 뒤 이탤릭 부속글
   ============================================================ */
.hp-diary-postscript {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed var(--hp-border-soft);
    font-size: 16px;
    line-height: 1.7;
    color: var(--hp-text-light);
    font-style: italic;
    text-align: center;
    white-space: pre-wrap;
    word-break: keep-all;
}

/* 작은 textarea (속마음 입력칸용) */
.hp-textarea-sm {
    min-height: 80px;
}

/* ============================================================
   위험 영역 — 홈피 삭제
   ============================================================ */
.hp-danger-zone {
    margin-top: 28px;
    padding: 18px;
    background: #fff8f8;
    border: 1px solid #f5d0d0;
    border-radius: 0;
}
.hp-danger-zone h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #c0392b;
}
.hp-danger-zone p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--hp-text-sub);
}
.hp-danger-zone .hp-input {
    margin-bottom: 10px;
}
.hp-btn-danger-strong {
    background: #c0392b;
    color: #fff;
    border: 1px solid #c0392b;
    padding: 10px 18px;
    border-radius: 0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    min-height: 40px;
}
.hp-btn-danger-strong:active {
    background: #a93020;
}
.hp-btn-danger-strong:disabled {
    background: #e0a8a0;
    border-color: #e0a8a0;
    cursor: not-allowed;
}

/* ============================================================
   사이트 메인으로 돌아가는 링크 (마이홈피 첫화면 상단)
   ============================================================ */
.hp-site-back {
    margin: 4px 0 14px;
}
.hp-site-back-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px 6px 4px;
    font-size: 14px;
    color: var(--hp-text-hint);
    text-decoration: none;
    border-radius: 0;
    transition: background 0.15s, color 0.15s;
    min-height: 28px;
}
.hp-site-back-link:active {
    background: var(--hp-bg-soft);
    color: var(--hp-text-sub);
}

/* ============================================================
   방명록
   - 헤더: ← 뒤로 / 가운데 제목 / 우측 더미
   - 폼: textarea + 등록 버튼
   - 목록: 다이어리 댓글 스타일과 거의 동일 (재활용)
   ============================================================ */

/* 헤더 — 가운데 제목 */
.hp-gb-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 18px;
}
.hp-gb-title {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--hp-text);
    letter-spacing: -0.3px;
}
.hp-gb-head-spacer {
    width: 36px;
    flex-shrink: 0;
}

/* 작성 폼 */
.hp-gb-form {
    margin: 0 0 22px;
}
.hp-gb-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--hp-text);
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    resize: vertical;
    min-height: 90px;
    box-sizing: border-box;
    font-family: inherit;
}
.hp-gb-form textarea:focus {
    outline: none;
    border-color: var(--hp-primary);
    box-shadow: 0 0 0 3px rgba(200,156,174,0.15);
}
body.hp-theme-gray .hp-gb-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(122,122,122,0.15);
}
.hp-gb-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* 방명록 목록 */
.hp-gb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hp-border);
}
.hp-gb-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--hp-border-soft);
}
.hp-gb-item:last-child {
    border-bottom: none;
}
.hp-gb-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.hp-gb-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-text);
}
.hp-gb-time {
    font-size: 14px;
    color: var(--hp-text-light);
}
.hp-gb-content {
    font-size: 17px;
    line-height: 1.6;
    color: var(--hp-text);
    white-space: pre-wrap;
    word-break: break-word;
}
.hp-gb-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    margin-left: -8px;
}

/* 빈 상태 */
.hp-gb-empty {
    padding: 32px 0;
    text-align: center;
    font-size: 15px;
    color: var(--hp-text-light);
    list-style: none;
}

/* ============================================================
   메인 목록 — 새 글 인디케이터 (작은 점)
   24시간 이내 다이어리 작성된 홈피에 표시
   ============================================================ */
.hp-list-new-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #c89cae;  /* 시그니처 옅은 로즈 */
    border-radius: 0;
    margin-left: 5px;
    vertical-align: 2px;
}

/* ============================================================
   1:1 메신저 — 저널 스타일 (좌측 시간 컬럼)
   ============================================================ */

/* 안 읽은 뱃지 */
.hp-msg-badge {
    display: inline-block;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    font-size: 12px; font-weight: 700; line-height: 18px;
    color: #fff; background: #c89cae;
    border-radius: 0; text-align: center;
    box-sizing: border-box; margin-left: 6px; vertical-align: 2px;
}
.hp-msg-badge-total {
    display: inline-block;
    min-width: 22px; height: 22px;
    padding: 0 7px;
    font-size: 13px; font-weight: 700; line-height: 22px;
    color: #fff; background: #c89cae;
    border-radius: 0; margin-left: 8px; vertical-align: 3px;
}
body.hp-theme-gray .hp-msg-badge,
body.hp-theme-gray .hp-msg-badge-total { background: #7a7a7a; }

/* 빈 상태 */
.hp-msg-empty {
    padding: 40px 0;
    text-align: center;
    font-size: 15px; color: var(--hp-text-light);
    list-style: none;
}

/* ===== 스레드 목록 ===== */
.hp-msg-thread-list {
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--hp-border);
}
.hp-msg-thread-list > li { border-bottom: 1px solid var(--hp-border-soft); }
.hp-msg-thread-item {
    display: block; padding: 16px 4px;
    color: inherit; text-decoration: none;
    transition: background 0.15s;
}
.hp-msg-thread-item:active { background: var(--hp-bg-soft); }
.hp-msg-thread-item.has-unread { background: rgba(200, 156, 174, 0.06); }
body.hp-theme-gray .hp-msg-thread-item.has-unread { background: rgba(122, 122, 122, 0.06); }
.hp-msg-thread-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 4px;
}
.hp-msg-thread-name { font-size: 16px; font-weight: 600; color: var(--hp-text); }
.hp-msg-thread-item.has-unread .hp-msg-thread-name { font-weight: 700; }
.hp-msg-thread-time { font-size: 13px; color: var(--hp-text-light); flex-shrink: 0; }
.hp-msg-thread-bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.hp-msg-thread-preview {
    flex: 1; font-size: 14px; color: var(--hp-text-mute);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-msg-thread-item.has-unread .hp-msg-thread-preview { color: var(--hp-text); }

/* ===== 대화창 (저널 스타일) ===== */
.hp-msg-list {
    list-style: none;
    margin: 0 calc(var(--hp-pad) * -1) 90px;
    padding: 8px 0 0;
    display: flex; flex-direction: column;
}

/* 한 메시지 = 한 행. 좌측 시간 컬럼 + 본문 */
.hp-msg {
    display: flex;
    gap: 14px;
    padding: 10px var(--hp-pad);
    position: relative;
}

/* 좌측 시간 컬럼 (40px 고정) */
.hp-msg-time-col {
    flex-shrink: 0;
    width: 40px;
    font-size: 12px;
    color: var(--hp-text-light);
    padding-top: 3px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 본문 영역 = 좌측 색깔 줄 + 닉네임 + 사진/텍스트 + 푸터 */
.hp-msg-body {
    flex: 1;
    min-width: 0;
    border-left: 2px solid var(--hp-border);
    padding-left: 12px;
}
.hp-msg.mine .hp-msg-body {
    border-left-color: #F4C0D1;
}
body.hp-theme-gray .hp-msg.mine .hp-msg-body {
    border-left-color: #999;
}

/* 닉네임 */
.hp-msg-author {
    font-size: 14px;
    font-weight: 700;
    color: var(--hp-text);
    margin-bottom: 4px;
    line-height: 1.3;
}
.hp-msg.mine .hp-msg-author { color: #993556; }
body.hp-theme-gray .hp-msg.mine .hp-msg-author { color: #444; }

/* 같은 발신자 연속이면 닉네임/시간 살짝 흐리고 마진 줄임 */
.hp-msg + .hp-msg.mine.same-sender,
.hp-msg + .hp-msg.theirs.same-sender {
    margin-top: -4px;
    padding-top: 4px;
}

/* 본문 텍스트 */
.hp-msg-text {
    font-size: 16px;
    line-height: 1.5;
    color: var(--hp-text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* 사진 */
.hp-msg-image-link {
    display: block;
    margin-bottom: 6px;
}
.hp-msg-image {
    max-width: 240px;
    max-height: 320px;
    width: auto;
    height: auto;
    border-radius: 0;
    display: block;
    background: var(--hp-bg-soft);
}

/* 푸터 (수정/삭제) */
.hp-msg-foot {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    min-height: 0;
}
.hp-msg-foot:empty { margin-top: 0; }
.hp-msg-btn {
    padding: 2px 6px;
    font-size: 12px;
    color: var(--hp-text-hint);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 0;
    font-family: inherit;
    min-height: 22px;
}
.hp-msg-btn:active { background: var(--hp-bg-soft); }
.hp-msg-btn:hover  { color: var(--hp-text-sub); }
.hp-msg-btn.danger:hover { color: #c0392b; }
.hp-msg-btn.primary {
    color: var(--hp-primary-dark);
    font-weight: 600;
}

/* 인라인 수정 */
.hp-msg-edit { width: 100%; margin: 4px 0; }
.hp-msg-edit textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--hp-text);
    background: #fff;
    border: 1px solid var(--hp-primary);
    border-radius: 0;
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
    font-family: inherit;
}
.hp-msg-edit textarea:focus { outline: none; }
.hp-msg-edit-actions {
    display: flex; gap: 4px;
    justify-content: flex-end;
    margin-top: 6px;
}

/* 작성 폼 (하단 sticky) */
.hp-msg-form {
    position: sticky;
    bottom: 0;
    background: #fff;
    margin: 0 calc(var(--hp-pad) * -1);
    padding: 10px var(--hp-pad);
    border-top: 1px solid var(--hp-border-soft);
    display: flex;
    gap: 6px;
    align-items: center;
}
.hp-msg-form textarea {
    flex: 1;
    padding: 8px 10px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--hp-text);
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    resize: none;
    min-height: 36px;
    max-height: 100px;
    box-sizing: border-box;
    font-family: inherit;
}
.hp-msg-form textarea:focus {
    outline: none;
    border-color: var(--hp-primary);
}
.hp-msg-form button { flex-shrink: 0; }

/* 사진 첨부 버튼 */
.hp-msg-photo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: var(--hp-text-light);
    cursor: pointer;
    border-radius: 0;
    transition: all 0.15s;
}
.hp-msg-photo-btn:hover {
    color: var(--hp-primary-dark);
    background: var(--hp-bg-soft);
}
.hp-msg-photo-btn:active {
    transform: scale(0.95);
}

/* 사진 미리보기 */
.hp-msg-photo-preview {
    position: sticky;
    bottom: 60px;
    background: #fff;
    margin: 0 calc(var(--hp-pad) * -1);
    padding: 8px var(--hp-pad);
    border-top: 1px solid var(--hp-border-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}
.hp-msg-photo-preview img {
    max-width: 60px;
    max-height: 60px;
    border-radius: 0;
    border: 1px solid var(--hp-border);
    object-fit: cover;
}
.hp-msg-photo-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: var(--hp-bg-soft);
    color: var(--hp-text);
    border-radius: 0;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.hp-msg-photo-remove:hover {
    background: #c0392b;
    color: #fff;
}


/* ============================================================
   메인 목록 — 헤더 (제목 + 정렬 탭)
   ============================================================ */
.hp-list-header {
    margin-bottom: 12px;
}
.hp-list-header .hp-section-title {
    margin-bottom: 10px;
}
.hp-sort-tabs {
    display: flex;
    gap: 6px;
}
.hp-sort-tab {
    display: inline-block;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    color: var(--hp-text-light);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.12s;
}
.hp-sort-tab:hover {
    color: var(--hp-text);
    border-color: var(--hp-text-light);
}
.hp-sort-tab.active {
    color: var(--hp-primary-dark);
    background: var(--hp-primary-soft);
    border-color: var(--hp-primary);
    font-weight: 700;
}
body.hp-theme-gray .hp-sort-tab.active {
    color: #1a1a1a;
    background: #ededed;
    border-color: #999;
}
.hp-sort-sep { display: none; }  /* 알약 형태에선 구분자 불필요 */

/* ============================================================
   마이홈피 메인 목록 페이지 — 회색 톤 (다른 페이지 영향 X)
   ============================================================ */
/*
 * 메인 페이지의 "내 홈피" 카드와 정렬 탭 등은
 * body에 부여된 본인 홈피 테마(hp-theme-gray 또는 기본 핑크)에 따라
 * --hp-primary 변수로 자동 색이 결정됨.
 * (본인 홈피 없으면 기본 핑크 변수)
 */

/* 새 글 점 숨김 — 어차피 최근 글순이라 의미 없음 */
body.hp-page-list .hp-list-new-dot {
    display: none;
}

/* 페이지 헤더 아래 구분선 제거 (메인 페이지만) */
body.hp-page-list .hp-page-head {
    border-bottom: none;
    padding-bottom: 8px;
    margin-bottom: 14px;
}

/* ============================================================
   다이어리 작성 — 임시저장 + 맞춤법 검사
   ============================================================ */

/* 이어 쓰기 안내 박스 */
.hp-draft-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--hp-bg-soft);
    border: 1px solid var(--hp-border);
    border-radius: 0;
}
.hp-draft-notice-text strong {
    display: block;
    font-size: 15px;
    color: var(--hp-text);
    margin-bottom: 2px;
}
.hp-draft-time {
    font-size: 13px;
    color: var(--hp-text-light);
}
.hp-draft-discard {
    flex-shrink: 0;
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    font-size: 13px;
    color: var(--hp-text-light);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}
.hp-draft-discard:hover {
    background: #fff;
    border-color: #c0392b;
    color: #c0392b;
}

/* 라벨 행 (라벨 + 도구 버튼) */
.hp-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.hp-label-row .hp-label { margin-bottom: 0; }

/* 도구 버튼 (맞춤법 등) */
.hp-tool-btn {
    padding: 5px 10px;
    background: none;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    font-size: 13px;
    color: var(--hp-text-light);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}
.hp-tool-btn:hover {
    background: var(--hp-bg-soft);
    color: var(--hp-text);
    border-color: var(--hp-text-light);
}
.hp-tool-btn:active {
    transform: scale(0.98);
}

/* 임시저장 상태 메시지 */
.hp-draft-status {
    margin-top: 8px;
    font-size: 13px;
    color: var(--hp-text-light);
    text-align: center;
    min-height: 18px;
}

/* ============================================================
   다이어리 목록 — 작성 중인 글 (임시저장) 카드
   ============================================================ */
.hp-draft-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--hp-primary-soft);
    border: 1px solid var(--hp-primary);
    border-radius: 0;
    text-decoration: none;
    transition: all 0.12s;
}
.hp-draft-card:hover {
    background: #f7d8e3;
}
body.hp-theme-gray .hp-draft-card {
    background: #f0ede7;
    border-color: #999;
}
body.hp-theme-gray .hp-draft-card:hover {
    background: #e6e3dc;
}
.hp-draft-card-info {
    flex: 1;
    min-width: 0;
}
.hp-draft-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--hp-primary-dark);
    margin-bottom: 4px;
}
body.hp-theme-gray .hp-draft-card-label { color: #1a1a1a; }
.hp-draft-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--hp-text);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hp-draft-card-time {
    font-size: 12px;
    color: var(--hp-text-light);
}
.hp-draft-card-arrow {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--hp-primary-dark);
}
body.hp-theme-gray .hp-draft-card-arrow { color: #555; }

/* ============================================================
   마이홈피 메인 — 공지사항
   ============================================================ */
.hp-notice-block {
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    padding: 10px 14px 6px;
    margin-bottom: 16px;
}
.hp-notice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--hp-border-soft);
}
.hp-notice-head-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hp-text);
}
.hp-notice-toggle {
    padding: 5px 10px;
    background: #555;
    color: #fff;
    border: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    min-height: 28px;
    transition: background 0.12s;
}
.hp-notice-toggle:hover { background: #1a1a1a; }

/* 공지 목록 */
.hp-notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hp-notice-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--hp-border-soft);
}
.hp-notice-item:last-child { border-bottom: none; }
.hp-notice-content {
    font-size: 15px;
    line-height: 1.6;
    color: var(--hp-text);
    word-break: break-word;
    margin-bottom: 4px;
}
.hp-notice-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}
.hp-notice-date { color: var(--hp-text-light); }
.hp-notice-actions { display: inline-flex; gap: 4px; }
.hp-notice-btn-mini {
    padding: 3px 8px;
    background: none;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    font-size: 12px;
    color: var(--hp-text-light);
    cursor: pointer;
    font-family: inherit;
    min-height: 24px;
    transition: all 0.12s;
}
.hp-notice-btn-mini:hover {
    color: var(--hp-text);
    border-color: var(--hp-text-light);
}
.hp-notice-btn-mini.danger:hover {
    color: #c0392b;
    border-color: #c0392b;
}

/* 등록/수정 폼 */
.hp-notice-form,
.hp-notice-edit-form {
    margin-top: 8px;
    margin-bottom: 8px;
}
.hp-notice-form textarea,
.hp-notice-edit-form textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--hp-text);
    background: #fff;
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
    font-family: inherit;
}
.hp-notice-form textarea:focus,
.hp-notice-edit-form textarea:focus {
    outline: none;
    border-color: #555;
}
.hp-notice-form-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 6px;
}
.hp-notice-btn {
    padding: 5px 12px;
    background: none;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    font-size: 13px;
    color: var(--hp-text-light);
    cursor: pointer;
    font-family: inherit;
    min-height: 28px;
}
.hp-notice-btn:hover {
    background: var(--hp-bg-soft);
    color: var(--hp-text);
}
.hp-notice-btn.primary {
    background: #555;
    color: #fff;
    border-color: #555;
    font-weight: 600;
}
.hp-notice-btn.primary:hover { background: #1a1a1a; }

/* ============================================================
   INFO 페이지 — 자기소개
   ============================================================ */
.hp-info-page {
    padding: 4px 0 40px;
}
.hp-info-image-wrap {
    margin-bottom: 20px;
    text-align: center;
}
.hp-info-image {
    max-width: 100%;
    max-height: 480px;
    width: auto;
    height: auto;
    border-radius: 0;
    display: inline-block;
}
.hp-info-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--hp-text);
    white-space: pre-wrap;
    word-break: break-word;
    padding: 4px 2px;
}
.hp-info-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--hp-text-light);
    font-size: 15px;
    line-height: 1.7;
}

/* 편집 시 현재 사진 + 삭제 체크박스 */
.hp-info-current-image {
    position: relative;
    margin-bottom: 10px;
    display: inline-block;
}
.hp-info-current-image img {
    max-width: 240px;
    max-height: 240px;
    border-radius: 0;
    border: 1px solid var(--hp-border);
    display: block;
}
.hp-info-image-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 12px;
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hp-info-image-delete input[type="checkbox"] {
    accent-color: #fff;
    cursor: pointer;
}

/* 헤더 액션 (편집 버튼) */
.hp-admin-action {
    flex-shrink: 0;
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    color: var(--hp-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.12s;
}
.hp-admin-action:hover {
    background: var(--hp-bg-soft);
    border-color: var(--hp-text-light);
}
.hp-admin-action-spacer {
    width: 50px;
    flex-shrink: 0;
}

/* ============================================================
   설정 - 토글 스위치 (메뉴 사용 여부)
   ============================================================ */
.hp-toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--hp-bg-soft);
    border: 1px solid var(--hp-border);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.12s;
}
.hp-toggle-row:hover {
    background: #fff;
}
.hp-toggle-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.hp-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #d8d6cf;
    border-radius: 0;
    flex-shrink: 0;
    transition: background 0.18s;
}
.hp-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 0;
    transition: transform 0.18s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.hp-toggle-row input[type="checkbox"]:checked ~ .hp-toggle-slider {
    background: var(--hp-primary);
}
.hp-toggle-row input[type="checkbox"]:checked ~ .hp-toggle-slider::after {
    transform: translateX(20px);
}
.hp-toggle-text {
    flex: 1;
    line-height: 1.4;
}
.hp-toggle-text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-text);
    margin-bottom: 2px;
}
.hp-toggle-text small {
    display: block;
    font-size: 13px;
    color: var(--hp-text-light);
}

/* INFO 페이지 - 비활성 안내 (본인 전용) */
.hp-flash-soft {
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--hp-bg-soft);
    border: 1px solid var(--hp-border);
    border-radius: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--hp-text-sub);
}
.hp-link-inline {
    color: var(--hp-primary-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}
.hp-link-inline:hover { text-decoration: underline; }

/* ============================================================
   사용자 정의 게시판 — admin 페이지의 +개설 버튼 영역
   ============================================================ */
.hp-board-add {
    margin-top: 8px;
    padding: 10px 0 4px;
}
.hp-board-add .hp-btn {
    width: 100%;
    border-style: dashed;
}
.hp-btn-danger-line {
    background: #fff;
    color: #c45a5a;
    border: 1px solid #e8c4c4;
    padding: 5px 10px;
    border-radius: 0;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
}
.hp-btn-danger-line:hover {
    background: #fef5f5;
    border-color: #c45a5a;
}

/* ============================================================
   다이어리 글 선택 모드 (일괄 이동)
   ============================================================ */
/* 평소: 체크박스 숨김, li 안 a 태그가 전체 영역 차지 */
.hp-diary-check {
    display: none;
}
/* 선택 모드 활성: 체크박스 표시 */
body.hp-select-active .hp-diary-check {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 12px 0 16px;
    cursor: pointer;
    user-select: none;
}
body.hp-select-active .hp-diary-li {
    display: flex;
    align-items: stretch;
}
body.hp-select-active .hp-diary-li .hp-diary-row {
    flex: 1;
    min-width: 0;
}
.hp-diary-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.hp-diary-check-box {
    width: 20px;
    height: 20px;
    border: 2px solid var(--hp-border);
    border-radius: 0;
    background: #fff;
    position: relative;
    transition: all 0.12s;
    flex-shrink: 0;
}
.hp-diary-check input[type="checkbox"]:checked + .hp-diary-check-box {
    background: var(--hp-primary);
    border-color: var(--hp-primary);
}
.hp-diary-check input[type="checkbox"]:checked + .hp-diary-check-box::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* 선택 모드 액션 바 (하단 고정) */
.hp-select-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 568px;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    z-index: 100;
}
.hp-select-count {
    font-size: 14px;
    color: var(--hp-text-sub);
}
.hp-select-count strong {
    color: var(--hp-primary-dark);
    font-weight: 700;
    font-size: 16px;
    margin-right: 2px;
}
.hp-select-actions {
    display: flex;
    gap: 8px;
}

/* 모달 (게시판 선택) */
.hp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.hp-modal-card {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.hp-modal-head {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--hp-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hp-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--hp-text);
}
.hp-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--hp-text-light);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.hp-modal-board-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
}
.hp-modal-board-list li {
    margin: 0;
}
.hp-modal-board-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 12px 18px;
    font-size: 15px;
    color: var(--hp-text);
    cursor: pointer;
    transition: background 0.12s;
    font-family: inherit;
}
.hp-modal-board-btn:hover {
    background: var(--hp-primary-soft);
}
.hp-modal-empty {
    padding: 24px 18px;
    text-align: center;
    font-size: 14px;
    color: var(--hp-text-light);
}

/* 게시판 순서 변경 — 작은 화살표 아이콘 버튼 */
.hp-btn-icon {
    width: 26px;
    height: 26px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    color: var(--hp-text-sub);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hp-btn-icon:hover:not(:disabled) {
    background: var(--hp-primary-soft);
    border-color: var(--hp-primary);
    color: var(--hp-primary-dark);
}
.hp-btn-icon:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ============================================================
   메뉴 순서 편집 페이지
   ============================================================ */
.hp-help-note {
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--hp-bg-soft);
    border-radius: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--hp-text-sub);
}
.hp-help-note small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--hp-text-light);
}
.hp-menu-order-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    overflow: hidden;
}
.hp-menu-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hp-border-soft);
    gap: 12px;
}
.hp-menu-order-item:last-child {
    border-bottom: none;
}
.hp-menu-order-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--hp-text);
}
.hp-menu-order-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ============================================================
   기록 게시판 (RECORD)
   ============================================================ */
.hp-record-meta {
    padding: 0 0 12px;
    font-size: 14px;
    color: var(--hp-text-light);
}
.hp-record-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    overflow: hidden;
}
.hp-record-list li {
    border-bottom: 1px solid var(--hp-border-soft);
}
.hp-record-list li:last-child { border-bottom: none; }
.hp-record-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--hp-text);
    transition: background 0.12s;
}
.hp-record-row:hover { background: var(--hp-bg-soft); }

.hp-record-thumb {
    width: 52px;
    height: 78px;             /* 2:3 비율 (책 표지 표준) */
    flex-shrink: 0;
    background: var(--hp-bg-cover);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.hp-record-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.hp-record-thumb.is-empty {
    background: var(--hp-bg-soft);
    box-shadow: none;
}

.hp-record-body { flex: 1; min-width: 0; }
.hp-record-title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}
.hp-record-no {
    font-size: 13px;
    color: var(--hp-text-light);
    font-weight: 500;
    flex-shrink: 0;
}
.hp-record-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--hp-text);
    word-break: break-word;
    line-height: 1.3;
}
.hp-record-author {
    font-size: 13px;
    color: var(--hp-text-sub);
    margin-bottom: 2px;
}
.hp-record-position {
    font-size: 13px;
    color: var(--hp-text-hint);
}

/* 상태 뱃지 */
.hp-record-status {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.2px;
}
.hp-status-reading {
    background: #e8f4f0;
    color: #2c8a6f;
}
.hp-status-paused {
    background: #f3f0e8;
    color: #8a6f2c;
}
.hp-status-done {
    background: #e8eef5;
    color: #4a6fa5;
}

/* 상세 페이지 */
.hp-record-detail {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 8px;
}
.hp-record-detail-thumb {
    flex-shrink: 0;
    width: 110px;
    height: 165px;            /* 2:3 비율 (책 표지 표준) */
    overflow: hidden;
    background: var(--hp-bg-cover);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    cursor: zoom-in;
    transition: transform 0.15s;
    display: block;
}
.hp-record-detail-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.hp-record-detail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.hp-record-detail-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.hp-record-detail-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--hp-text);
    line-height: 1.3;
    word-break: break-word;
}
.hp-record-detail-author {
    font-size: 14px;
    color: var(--hp-text-sub);
    font-weight: 500;
}
.hp-record-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 상태 라디오 (작성/추가) */
.hp-status-row {
    display: flex;
    gap: 8px;
}
.hp-status-radio {
    flex: 1;
    text-align: center;
    padding: 9px 8px;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    cursor: pointer;
    background: #fff;
    transition: all 0.12s;
    font-size: 14px;
    font-weight: 500;
    color: var(--hp-text-sub);
}
.hp-status-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.hp-status-radio:hover { background: var(--hp-bg-soft); }
.hp-status-radio.active {
    background: var(--hp-primary-soft);
    border-color: var(--hp-primary);
    color: var(--hp-primary-dark);
    font-weight: 700;
}

/* 기록 추가 폼 */
.hp-entry-form {
    background: var(--hp-bg-soft);
    border: 1px solid var(--hp-border);
    border-radius: 0;
    padding: 14px;
    margin-bottom: 20px;
}
.hp-entry-form-row {
    margin-bottom: 10px;
}
.hp-entry-form-row:last-child { margin-bottom: 0; }
.hp-entry-position {
    max-width: 200px;
}
.hp-entry-status-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.hp-entry-status-row .hp-status-radio {
    padding: 7px 6px;
    font-size: 13px;
}
.hp-entry-status-row .hp-btn {
    flex-shrink: 0;
    margin-left: auto;
}

/* entries 리스트 */
.hp-entry-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hp-entry-item {
    padding: 14px 0;
    border-top: 1px solid var(--hp-border-soft);
}
.hp-entry-item:first-child { border-top: none; }

.hp-entry-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.hp-entry-pos {
    font-size: 14px;
    font-weight: 700;
    color: var(--hp-primary-dark);
}
.hp-entry-date {
    font-size: 13px;
    color: var(--hp-text-hint);
}
.hp-entry-delete-form {
    margin-left: auto;
}
.hp-entry-delete-btn {
    background: none;
    border: none;
    color: var(--hp-text-light);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
}
.hp-entry-delete-btn:hover { color: #c45a5a; }
.hp-entry-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--hp-text);
    word-break: break-word;
}
.hp-entry-line {
    white-space: pre-wrap;
}
.hp-entry-quote {
    padding: 8px 14px;
    margin: 6px 0;
    border-left: 3px solid var(--hp-primary);
    background: var(--hp-bg-soft);
    font-style: italic;
    color: var(--hp-text-sub);
    border-radius: 0;
    white-space: pre-wrap;
}

.hp-empty-soft {
    padding: 30px 20px;
    text-align: center;
    color: var(--hp-text-hint);
    font-size: 14px;
}

/* ============================================================
   메뉴 관리 통합 (홈피 관리 화면)
   ============================================================ */
.hp-section-desc {
    font-size: 13px;
    color: var(--hp-text-light);
    margin: -2px 0 14px;
    line-height: 1.5;
}
.hp-menu-mng-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 0;
    overflow: hidden;
}
.hp-menu-mng-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hp-border-soft);
    transition: opacity 0.15s;
}
.hp-menu-mng-item:last-child {
    border-bottom: none;
}
.hp-menu-mng-item.is-off {
    opacity: 0.5;
}
.hp-menu-mng-arrows {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}
.hp-menu-mng-arrows .hp-btn-icon {
    width: 24px;
    height: 22px;
    font-size: 9px;
}
.hp-menu-mng-info {
    flex: 1;
    min-width: 0;
}
.hp-menu-mng-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-text);
    margin-bottom: 2px;
    word-break: break-word;
    line-height: 1.3;
}
.hp-menu-mng-type {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    background: var(--hp-bg-soft);
    border-radius: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--hp-text-light);
    vertical-align: 1px;
}
.hp-menu-mng-desc {
    font-size: 13px;
    color: var(--hp-text-hint);
}
.hp-menu-mng-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.hp-menu-add-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.hp-menu-add-row .hp-btn {
    flex: 1;
    border-style: dashed;
}

/* 폼 하단 위험 액션 (책 삭제 등) */
.hp-form-danger {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--hp-border-soft);
    text-align: center;
}
.hp-btn-danger-text {
    background: none;
    border: none;
    color: #c45a5a;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 12px;
    text-decoration: underline;
    font-family: inherit;
}
.hp-btn-danger-text:hover {
    color: #a83838;
}

/* ============================================================
   독서록 — 표지 미리보기 / entry 수정
   ============================================================ */

/* 작성/수정 폼의 새 표지 미리보기 */
.hp-record-thumb-preview {
    display: inline-block;
    position: relative;
    margin-bottom: 12px;
}
.hp-record-thumb-preview img {
    display: block;
    width: 110px;
    height: 165px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    background: var(--hp-bg-cover);
}
.hp-thumb-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    border-radius: 0;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.hp-thumb-remove:hover { background: rgba(0,0,0,0.85); }

/* entry 수정/삭제 액션 그룹 */
.hp-entry-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
}
.hp-entry-action-btn {
    background: none;
    border: none;
    color: var(--hp-text-light);
    font-size: 12px;
    cursor: pointer;
    padding: 3px 8px;
    text-decoration: none;
    border-radius: 0;
    font-family: inherit;
    transition: all 0.12s;
}
.hp-entry-action-btn:hover {
    background: var(--hp-bg-soft);
    color: var(--hp-text);
}
.hp-entry-delete-form {
    display: contents;
    margin: 0;
}
.hp-entry-delete-form .hp-entry-action-btn:hover {
    color: #c45a5a;
}

/* entry 수정 모드 (인라인 폼) */
.hp-entry-editing {
    background: var(--hp-bg-soft);
    border-radius: 0;
    padding: 12px !important;
    border-top: none !important;
    margin: 4px 0;
}
.hp-entry-edit-row {
    margin-bottom: 8px;
}
.hp-entry-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
}

/* ============================================================
   책 표지 - 수정 폼 현재 표지 + 라이트박스
   ============================================================ */
.hp-record-current-thumb {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
}
.hp-record-current-thumb img {
    display: block;
    width: 110px;
    height: 165px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    background: var(--hp-bg-cover);
}
.hp-record-current-thumb-delete {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    padding: 4px 6px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    text-align: center;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.hp-record-current-thumb-delete input {
    margin: 0;
    accent-color: #fff;
}

/* 라이트박스 (표지 클릭 확대) */
.hp-thumb-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 24px;
    animation: hpFadeIn 0.18s ease;
}
.hp-thumb-modal.is-open {
    display: flex;
}
.hp-thumb-modal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.hp-thumb-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hp-thumb-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
}
@keyframes hpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
   공지 — 이전 공지 짧은 형태 (번호 + 한 줄)
   ============================================================ */
.hp-notice-old-head {
    margin: 8px 0 4px;
    font-size: 12px;
    color: var(--hp-text-light);
    font-weight: 600;
    letter-spacing: 0.3px;
}
.hp-notice-old-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hp-border-soft);
}
.hp-notice-old-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-bottom: 1px solid var(--hp-border-soft);
    font-size: 13px;
}
.hp-notice-old-item:last-child {
    border-bottom: none;
}
.hp-notice-old-no {
    flex-shrink: 0;
    width: 18px;
    color: var(--hp-text-light);
    font-weight: 600;
}
.hp-notice-old-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hp-text-sub);
}
.hp-notice-old-date {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--hp-text-light);
}
.hp-notice-old-actions {
    flex-shrink: 0;
    display: flex;
    gap: 3px;
}
.hp-notice-old-item .hp-notice-edit-form {
    width: 100%;
    margin-top: 6px;
}

/* ============================================================
   🖥️ 야부리텔 슬림 띠 (마이홈피 메인 상단)
   ============================================================ */
.hp-yb-slim {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0 0 14px;
    background: linear-gradient(135deg, #6a4cf5, #8b5cf6);
    color: #fff;
    border-radius: 0;
    text-decoration: none;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.1s;
}
.hp-yb-slim:active { transform: scale(0.99); }
.hp-yb-slim-ico { font-size: 14px; }
.hp-yb-slim-t {
    flex: 1;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.2px;
}
.hp-yb-slim-beta {
    font-size: 9px;
    background: rgba(255,255,255,0.2);
    padding: 1px 5px;
    border-radius: 0;
    margin-left: 4px;
    vertical-align: middle;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.hp-yb-slim-live {
    font-size: 11px;
    opacity: 0.95;
    display: flex;
    align-items: center;
    gap: 4px;
}
.hp-yb-slim-dot {
    width: 5px; height: 5px;
    background: #4ade80;
    border-radius: 0;
    display: inline-block;
}
.hp-yb-slim-go { font-size: 16px; opacity: 0.75; }

/* ============================================================
   user_header.php 통합 시 body padding (헤더 50px)
   ============================================================ */
body.has-header {
    padding-top: 50px !important;
}

/* ============================================================
   🌸 내 마이홈피 큰 카드 (메인 강조)
   ============================================================ */
.hp-my-bigcard {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(135deg, #fce8f0, #fdf4f7);
    border: 1px solid #fae1ec;
    border-radius: 0;
    text-decoration: none;
    color: #2a2a2a;
    margin: 14px 0 22px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.1s;
}
.hp-my-bigcard:active { transform: scale(0.99); }
.hp-my-bigcard-ico-wrap {
    width: 50px; height: 50px;
    background: rgba(255,255,255,0.7);
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hp-my-bigcard-svg { width: 34px; height: 34px; }
.hp-my-bigcard-body { flex: 1; min-width: 0; }
.hp-my-bigcard-title {
    font-size: 16px;
    font-weight: 800;
    color: #4B1528;
    letter-spacing: -0.3px;
}
.hp-my-bigcard-sub {
    font-size: 12px;
    color: #993556;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hp-my-bigcard-arrow {
    font-size: 22px;
    color: #c89cae;
    line-height: 1;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 4px;
}
.hp-my-bigcard-empty {
    cursor: pointer;
}
.hp-my-bigcard-empty .hp-my-bigcard-arrow {
    font-size: 26px;
    font-weight: 300;
}

/* ============================================================
   리스트 더보기 버튼
   ============================================================ */
.hp-list-item-hidden {
    display: none !important;
}
.hp-list-more-btn {
    width: 100%;
    padding: 10px 14px;
    margin-top: 8px;
    background: transparent;
    border: 1px dashed #ddd;
    border-radius: 0;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.hp-list-more-btn:hover {
    background: #f6f7f9;
    border-color: #ccc;
    color: #555;
}
.hp-list-more-btn:active {
    background: #ecedf0;
}

/* ============================================================
   야부리텔 띠 가시성 보강 (헤더 직하)
   ============================================================ */
.hp-yb-slim {
    margin-top: 12px !important;
}

/* ============================================================
   헤더/카드 간격 조정 (v3)
   ============================================================ */
/* 헤더(50px) 다음 첫 컨텐츠 사이 여백 */
body.has-header .hp-wrap > .hp-flash:first-child,
body.has-header .hp-wrap > section:first-child,
body.has-header .hp-wrap > .hp-create-card:first-child,
body.has-header .hp-wrap > .hp-my-card:first-child {
    margin-top: 14px;
}

/* 공지 다음 내 홈피 카드 — 살짝 여백 */
.hp-notice-block + .hp-create-card,
.hp-notice-block + .hp-my-card {
    margin-top: 14px;
}

/* 내 홈피 카드 자체에 위 여백 보강 */
.hp-my-card,
.hp-create-card {
    margin-top: 14px;
    margin-bottom: 16px;
}

/* 야부리텔 띠 — 위/아래 여백 확보 */
.hp-yb-slim {
    margin: 4px 0 18px !important;
}

/* ============================================================
   💌 메시지 알림 띠 (마이홈피 메인 - 안 읽은 메시지)
   ============================================================ */
.hp-msg-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 0 0 14px;
    background: linear-gradient(135deg, #fce8f0, #fdf4f7);
    border: 1px solid #fae1ec;
    border-radius: 0;
    text-decoration: none;
    color: #2a2a2a;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: transform 0.1s;
    position: relative;
}
.hp-msg-alert:active {
    transform: scale(0.99);
}
.hp-msg-alert-ico {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.7);
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.hp-msg-alert-body {
    flex: 1;
    min-width: 0;
}
.hp-msg-alert-title {
    font-size: 14px;
    font-weight: 700;
    color: #4B1528;
    letter-spacing: -0.2px;
}
.hp-msg-alert-sub {
    font-size: 11px;
    color: #993556;
    margin-top: 2px;
}
.hp-msg-alert-count {
    background: #c2185b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 0;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.hp-msg-alert-arrow {
    font-size: 20px;
    color: #c89cae;
    line-height: 1;
    flex-shrink: 0;
}