/* ==========================================================================
   ZZAPS 작성자 프로필 액션시트
   --------------------------------------------------------------------------
   적용 범위 : 작성자 트리거(게시글 · 댓글 · 거래글) + 액션시트 + 확인 모달
   로드 방식 : layouts/app 에서 1회 (시트가 모든 화면에 있어야 하기 때문)

   규칙
     - 시트의 껍데기(.sheet / .sheet-backdrop / .sheet-panel / .sheet-grip)는
       글쓰기 시트·전체 메뉴가 쓰는 공통 클래스를 그대로 쓴다.
       여기서는 시트 "안쪽"만 정의한다. 공통 app.css 를 건드리지 않는다.
     - 색·모서리는 공통 테마 변수를 읽기만 한다.
     - 크기는 고정값이다. 화면이 넓어져도 커지지 않는다 (앱 폭 정책).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 작성자 트리거 — 누를 수 있다는 것이 보여야 한다
   -------------------------------------------------------------------------- */

.author-trig {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    /* 목록 카드 안에서 줄바꿈되지 않게 */
    min-width: 0;
}

.author-trig:hover .author-trig-name { text-decoration: underline; }
.author-trig:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/*
   상품 상세 판매자 줄은 <a> 였다가 <button> 이 되었다.
   a 는 폭을 채웠지만 button 은 내용만큼만 커지므로 되돌려 준다.
   (모양 정의는 zzaps-detail.css 가 계속 소유한다)
*/
.author-trig.zz-detail-seller { width: 100%; }

/* 탈퇴 등으로 열 수 없는 작성자 */
.author-trig--off { cursor: default; }
.author-trig--off:hover .author-trig-name { text-decoration: none; }

.author-trig-avatar {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-3);
}

.author-trig--md .author-trig-avatar { width: 32px; height: 32px; }

.author-trig-name {
    font-weight: 700;
    color: var(--ink, var(--text));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. 액션시트 안쪽
   -------------------------------------------------------------------------- */

.author-sheet-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 2px 14px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 8px;
}

.author-sheet-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-3);
}

.author-sheet-id { min-width: 0; }

.author-sheet-name {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.author-sheet-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 메뉴 한 줄. 링크와 버튼이 섞이므로 둘 다 같은 모양이 되게 한다. */
.author-sheet-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* 손가락으로 누르는 곳은 44px 아래로 내려가지 않는다 */
    min-height: 48px;
    padding: 0 6px;
    background: none;
    border: 0;
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.author-sheet-item:hover { background: var(--surface-2); }
.author-sheet-item[hidden] { display: none; }

/* 되돌리기 어려운 것(차단 · 신고)만 포인트색으로 구분한다 */
.author-sheet-item--warn { color: var(--primary); }

.author-sheet-go { margin-left: auto; color: var(--text-dim); }

.author-sheet-cancel {
    width: 100%;
    min-height: 48px;
    margin-top: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
}

.author-sheet-cancel:hover { background: var(--surface-3); color: var(--text); }

/* --------------------------------------------------------------------------
   3. 확인 모달

   시트가 아래에서 올라오는 것과 달리 가운데에 띄운다.
   "한 번 더 확인받는 자리"라는 것이 모양으로도 구분되어야 한다.
   -------------------------------------------------------------------------- */

/* .sheet 는 아래에 붙이지만(align-items:flex-end) 확인 모달은 가운데다 */
.author-confirm {
    z-index: 1200;
    align-items: center;
    padding: 24px;
}

.author-confirm-panel {
    position: relative;
    z-index: 1;
    width: min(340px, calc(100vw - 48px));
    margin: auto;
    padding: 22px 20px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}

.author-confirm-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.author-confirm-body {
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.author-confirm-body p { margin: 0 0 4px; }

.author-confirm-body ul {
    margin: 4px 0 6px;
    padding-left: 18px;
    list-style: disc;
}

.author-confirm-note {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-dim);
    font-size: 12.5px;
}

.author-confirm-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.author-confirm-actions .btn {
    flex: 1;
    min-height: 44px;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   4. 토스트 — 상세 화면 토스트가 없는 화면(목록 등)에서 쓰는 대체
   -------------------------------------------------------------------------- */

.author-toast {
    position: fixed;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 1300;
    max-width: calc(100vw - 48px);
    padding: 11px 18px;
    transform: translate(-50%, 8px);
    background: rgba(20, 20, 24, .94);
    border-radius: var(--r-pill, 999px);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.author-toast.is-on { opacity: 1; transform: translate(-50%, 0); }