@charset "utf-8";

/* =====================================================================
   TRPG 소장 및 도토리(위시) 통합 아카이브 - style.css
   =====================================================================
   - 라공에디션(Ra0) 전역 CSS 변수(--primary-color 등)를 그대로 사용하여
     관리자 페이지 테마 설정과 100% 동기화됨.
   - 애니메이션/전환은 transform, opacity 등 하드웨어 가속 속성 위주로 작성.
   - 아코디언은 JS의 scrollHeight 계산(강제 리플로우) 없이
     CSS grid-template-rows(0fr↔1fr) 트릭만으로 구현하여 저사양 환경에서도 매끄러움.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. 레이아웃 기본 wrapper
   --------------------------------------------------------------------- */
.trpg-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    background: var(--container-bg-color, var(--white));
    border-radius: var(--card-border-radius);
    color: var(--content-font-color, var(--text-color));
    /* 컨테인먼트로 리페인트/리플로우 범위를 이 영역 내부로 제한 (저사양 최적화) */
    contain: layout style;
}

.trpg-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}
.trpg-total {
    font-size: 0.92em;
    color: var(--text-muted);
}
.trpg-top-btns {
    display: flex;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
.trpg-icon-btn {
    position: relative;
    appearance: none;
    border: none;
    font: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.05em;
    box-sizing: border-box;
    border-radius: var(--btn-primary-radius, var(--card-border-radius));
    background: var(--bg-light);
    color: var(--content-font-color);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}
.trpg-icon-btn:hover { background: var(--card-border-color); text-decoration: none; }
.trpg-icon-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 11px;
    background: var(--accent-color);
    color: var(--white);
    font-size: 0.8em;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--container-bg-color, var(--white));
}
.trpg-icon-btn-primary {
    background: var(--btn-primary-bg, var(--primary-color));
    color: var(--btn-primary-text, var(--white));
}
.trpg-icon-btn-primary:hover { background: var(--secondary-color); }
.trpg-icon-btn-accent {
    background: var(--accent-color);
    color: var(--white);
}
.trpg-icon-btn-accent:hover { background: var(--accent-color); filter: brightness(0.9); }
/* 인라인 SVG 아이콘 -----------------------------------------------------
   이 사이트에 깔린 폰트어썸 판에 "-o"로 끝나는 옛 이름(fa-trash-o,
   fa-handshake-o 등)이 없어서 아이콘 자리가 빈 네모로만 보였음. SVG는
   글꼴에 기대지 않으므로 어떤 판이 깔려 있든 그대로 그려짐.
   currentColor를 쓰므로 버튼 색을 따라감 */
.trpg-svg-icon {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    vertical-align: -0.18em;
    flex: 0 0 auto;
}
/* 상단 바 버튼 안에서는 더 크게.
   폰트어썸 글리프(톱니/＋/표)는 글꼴 특성상 글자 크기에 거의 꽉 차게
   그려지는데, 이 SVG들은 24 viewBox 안쪽에 여백을 두고 그려져 있어서
   같은 1.05em을 줘도 눈으로는 확연히 작아 보였음(공수표·휴지통만 작게
   보이던 이유). 버튼 안에서만 키워서 나머지 아이콘과 크기를 맞춤 -
   .trpg-svg-icon 자체를 키우면 모달 제목의 아이콘까지 같이 커짐. */
.trpg-icon-btn .trpg-svg-icon {
    width: 1.6em;
    height: 1.6em;
    vertical-align: middle;
}
/* 글줄 안에 섞이는 아이콘(작성일·외부링크·추천·서플리먼트 표시)은 글자와
   같은 크기로 두고 기준선만 맞춘다 */
.trpg-view-date .trpg-svg-icon,
.trpg-supplement-banner .trpg-svg-icon,
.trpg-reply-banner .trpg-svg-icon,
.trpg-view-act .trpg-svg-icon,
.trpg-detail-grid dd .trpg-svg-icon,
.trpg-view-info-grid dd .trpg-svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; }

/* 정리(선택 삭제) 버튼 - 옅은 회색 바탕에 옅은 글자색이면 아이콘이 배경에
   묻혀 보이지 않으므로, 다른 버튼과 확실히 구분되는 붉은 계열을 씀.
   켜면 채워진 상태로 바뀌어 지금 정리 모드인지 한눈에 보임 */
.trpg-icon-btn-danger {
    background: #fdecec;
    color: #b91c1c;
    box-shadow: inset 0 0 0 1px #f0bcbc;
}
.trpg-icon-btn-danger:hover { background: #fbdcdc; }
.trpg-icon-btn-danger[aria-pressed="true"] {
    background: #b91c1c;
    color: #fff;
    box-shadow: none;
}

/* ---------------------------------------------------------------------
   1. 카테고리 필터 탭 (#전체 #공식 #팬시나리오 #위시)
   --------------------------------------------------------------------- */
.trpg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}
.trpg-tab {
    appearance: none;
    display: inline-block;
    border: 1px solid var(--card-border-color);
    background: var(--container-bg-color, var(--white));
    color: var(--primary-color);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 30px;
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}
.trpg-tab:hover { background: rgb(from var(--primary-color) r g b / 8%); }
.trpg-tab.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
    font-weight: 700;
}

/* 내보내기 패널 (상단 바의 표 아이콘으로 토글) - 구글 시트용 TSV 복사/내려받기.
   평소엔 hidden 속성으로 완전히 닫혀 있고, 열렸을 때만 카드로 펼쳐짐 */
.trpg-export-panel {
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius, 10px);
    background: var(--container-bg-color, var(--white));
    padding: var(--spacing-md);
    margin: calc(-1 * var(--spacing-sm)) 0 var(--spacing-md);
}
.trpg-export-panel[hidden] { display: none; }
.trpg-export-desc {
    margin: 0 0 var(--spacing-md);
    font-size: 0.9em;
    color: var(--text-muted);
    line-height: 1.6;
}
.trpg-export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-md);
}
.trpg-export-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--spacing-md);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius, 10px);
    background: var(--bg-light);
}
.trpg-export-title {
    font-size: 0.95em;
    color: var(--content-font-color);
}
.trpg-export-hint {
    font-size: 0.84em;
    color: var(--text-muted);
    line-height: 1.5;
}
.trpg-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: 4px;
}
.trpg-export-btn {
    appearance: none;
    border: 1px solid var(--card-border-color);
    background: var(--container-bg-color, var(--white));
    color: var(--primary-color);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.86em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}
.trpg-export-btn:hover { background: rgb(from var(--primary-color) r g b / 8%); }
.trpg-export-btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}
.trpg-export-btn-primary:hover { background: var(--primary-color); opacity: 0.88; }
/* 복사 진행/완료 중에는 버튼 글자가 바뀌므로 폭이 출렁이지 않게 최소폭 확보 */
.trpg-export-btn[data-trpg-export-copy] { min-width: 84px; }
.trpg-export-btn:disabled { cursor: default; opacity: 0.7; }
.trpg-export-opt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--card-border-color);
    font-size: 0.84em;
    color: var(--text-muted);
    line-height: 1.6;
    cursor: pointer;
}
.trpg-export-opt input { margin-top: 3px; flex: 0 0 auto; }
/* 들여오기(표로 일괄 등록) 진입점 - 내보내기 버튼들과 같은 무게로 보이도록
   설명 문단이 아니라 구분선 아래의 독립 블록 + 버튼으로 둠. 좁은 화면에서는
   설명 아래로 버튼이 내려가 폭이 눌리지 않게 함 */
.trpg-import-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--card-border-color);
}
.trpg-import-cta-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 200px;
    flex: 1 1 260px;
}
.trpg-import-cta-text strong {
    font-size: 0.95em;
    color: var(--content-font-color);
}
.trpg-import-cta-text span {
    font-size: 0.84em;
    color: var(--text-muted);
    line-height: 1.5;
}
.trpg-import-cta-btn {
    flex: 0 0 auto;
    padding: 8px 18px;
    font-size: 0.9em;
}
.trpg-export-note {
    margin: var(--spacing-md) 0 0;
    font-size: 0.82em;
    color: var(--text-muted);
    line-height: 1.6;
}

/* DB 보정 안내 - wr_4를 TEXT로 바꾸지 못했을 때만, 글을 쓸 수 있는 사람에게만
   보임. 데이터가 잘릴 수 있다는 경고라 눈에 띄어야 하므로 주황 계열로 둠 */
.trpg-db-alert {
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid #e6c98a;
    border-left: 4px solid #d99b2b;
    border-radius: var(--border-radius, 10px);
    background: #fff8ec;
    color: #7a5310;
    font-size: 0.86em;
    line-height: 1.7;
}
.trpg-db-alert code { background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 4px; }
.trpg-db-alert-sql {
    display: block;
    margin-top: 8px;
    padding: 8px 10px;
    word-break: break-all;
    user-select: all; /* 한 번 클릭으로 통째로 선택되어 복사하기 쉬움 */
}

/* 선택 삭제 확인 팝업 ------------------------------------------------- */
.trpg-bulk-modal {
    /* 화면 정중앙 고정. <dialog>는 원래 브라우저가 가운데로 잡아주지만,
       테마가 dialog에 위치 규칙을 걸어두면 한쪽으로 쏠리므로 여기서 직접 못박음 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: min(520px, calc(100vw - 32px));
    max-height: 80vh;
    padding: 0;
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius, 12px);
    background: var(--card-bg-color, #fff);
    color: var(--content-font-color);
}
.trpg-bulk-modal::backdrop { background: rgba(0, 0, 0, 0.45); }
.trpg-bulk-modal-inner { padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg); }
.trpg-bulk-modal h3 { font-size: 1.02em; margin: 0 0 4px; }
.trpg-bulk-modal-warn {
    margin: 10px 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff7e6;
    border: 1px solid #f0d089;
    color: #7a5310;
    font-size: 0.84em;
    line-height: 1.6;
}
.trpg-bulk-modal-list {
    max-height: 38vh;
    overflow-y: auto;
    margin: 0 0 4px;
    padding: 0 0 0 20px;
    font-size: 0.86em;
    line-height: 1.8;
}
.trpg-bulk-modal-list .sub { color: var(--text-muted); font-size: 0.92em; }
.trpg-bulk-modal-more { margin: 4px 0 0; font-size: 0.82em; color: var(--text-muted); }
.trpg-bulk-modal-sub { margin: 0 0 12px; font-size: 0.86em; color: var(--text-muted); }
.trpg-bulk-modal-yes:disabled { opacity: 0.6; cursor: default; }
.trpg-bulk-modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: var(--spacing-md); }
.trpg-bulk-modal-btns button { font: inherit; padding: 9px 18px; border-radius: 7px; cursor: pointer; font-size: 0.9em; }
.trpg-bulk-modal-no { background: transparent; border: 1px solid var(--card-border-color); color: var(--text-muted); }
.trpg-bulk-modal-yes { background: #b91c1c; border: 1px solid #b91c1c; color: #fff; }

/* 정리(선택 삭제) 모드 -------------------------------------------------
   평소에는 체크박스가 목록을 어지럽히므로 상단 바의 "정리"를 눌렀을 때만
   자리를 만들어 보여줌. 체크박스는 아코디언을 여는 <button>의 형제라
   (중첩 버튼이 되면 클릭이 먹지 않음) 왼쪽에 겹쳐 놓고 행에 여백을 줌 */
.trpg-pick { display: none; }
.trpg-bulk-mode .trpg-row { position: relative; padding-left: 34px; }
.trpg-bulk-mode .trpg-pick {
    display: flex;
    align-items: center;
    position: absolute;
    left: 9px;
    top: 18px;
    z-index: 2;
    cursor: pointer;
}
.trpg-bulk-mode .trpg-pick-box { width: 16px; height: 16px; cursor: pointer; }
.trpg-bulk-mode .trpg-row.is-reply { background: rgb(from var(--primary-color) r g b / 3%); }

/* 실행 바 - 목록이 길어도 손이 닿도록 화면 아래에 붙여둠 */
.trpg-bulk-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: var(--spacing-sm);
    padding: 10px var(--spacing-md);
    background: var(--card-bg-color, #fff);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius, 10px);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    font-size: 0.86em;
}
.trpg-bulk-bar[hidden] { display: none; }
.trpg-bulk-all { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.trpg-bulk-count { color: var(--text-muted); }
.trpg-bulk-spacer { flex: 1 1 auto; }
.trpg-bulk-cancel,
.trpg-bulk-go {
    font: inherit;
    padding: 7px 15px;
    border-radius: 6px;
    cursor: pointer;
}
.trpg-bulk-cancel { background: transparent; border: 1px solid var(--card-border-color); color: var(--text-muted); }
.trpg-bulk-go { background: #b91c1c; border: 1px solid #b91c1c; color: #fff; }
.trpg-bulk-go:disabled { opacity: 0.45; cursor: default; }

/* 시스템/룰 태그 필터 상태줄 - 목록의 태그를 클릭하면 나타나는 별도 필터 표시.
   카테고리 탭(알약 버튼)과 톤을 맞춰, 태그명+✕를 하나의 컬러 알약 칩으로 묶음 */
.trpg-tag-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: calc(-1 * var(--spacing-sm)) 0 var(--spacing-md);
    font-size: 0.88em;
    color: var(--text-muted);
}
.trpg-tag-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 14px;
    background: var(--accent-color);
    border-radius: 30px;
    font-weight: 700;
    color: var(--white);
}
.trpg-tag-filter-clear {
    appearance: none;
    border: none;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 25%);
    color: var(--white);
    border-radius: 50%;
    font-size: 0.75em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}
.trpg-tag-filter-clear:hover { background: rgb(255 255 255 / 45%); }

/* 게시판 하단 검색 폼 */
.trpg-search-form {
    display: flex;
    gap: 6px;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--card-border-color);
}
.trpg-search-sfl {
    flex-shrink: 0;
    width: auto;
    max-width: 140px;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--container-bg-color, var(--white));
    color: var(--content-font-color);
    padding: 0 var(--spacing-sm);
    font-size: 0.9em;
}
.trpg-search-stx {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background: var(--container-bg-color, var(--white));
    color: var(--content-font-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9em;
}
.trpg-search-btn {
    appearance: none;
    border: none;
    flex-shrink: 0;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--card-border-radius);
    background: var(--primary-color);
    color: var(--white);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}
.trpg-search-btn:hover { background: var(--secondary-color); }

/* 목록의 시스템/룰 태그 - 클릭하면 그 태그로 필터링됨. 아코디언 헤더(버튼) 안에
   있어 실제 <button>을 못 쓰므로 span+role=button으로 구현(중첩 버튼은 무효 HTML) */
.trpg-tag-btn {
    display: inline-block;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.trpg-tag-btn:hover { color: var(--primary-color); }
.trpg-tag-btn.is-active { color: var(--primary-color); font-weight: 700; text-decoration-style: solid; }

/* 뷰 페이지 정보 패널의 태그 링크 - 목록 페이지로 이동해 그 태그로 필터링됨 */
.trpg-tag-link { color: var(--primary-color); text-decoration: none; }
.trpg-tag-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   2. 공수표 현황판 모달 - 예전엔 우측에 항상 고정된 사이드바였는데, 이제는
   상단 바 버튼을 눌러야 열리는 모달이라 목록이 게시판 전체 폭을 그대로 씀
   --------------------------------------------------------------------- */
.trpg-promise-modal {
    position: fixed;
    /* 아래 top/right는 JS가 버튼의 실제 위치를 읽어서 정확히 다시 잡아줌
       (사이트 상단 헤더 높이나 게시판 폭 설정에 따라 버튼 위치가 달라질 수
       있어서, 고정값 대신 클릭 시점에 계산하는 쪽이 더 정확함). 이 값은
       JS가 아직 실행되기 전 아주 짧은 순간을 위한 기본값일 뿐임. */
    top: 72px;
    right: var(--spacing-lg);
    left: auto;
    margin: 0;
    max-width: 380px;
    width: calc(100% - 40px);
    max-height: 75vh;
    overflow-y: auto;
    border: none;
    border-radius: var(--card-border-radius);
    padding: var(--spacing-md);
    box-shadow: 0 12px 32px rgb(0 0 0 / 20%);
}
.trpg-promise-modal::backdrop { background: rgb(0 0 0 / 25%); }
.trpg-promise-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.trpg-promise-modal-head .trpg-widget-title { margin: 0; }
.trpg-promise-modal-close {
    appearance: none;
    border: none;
    background: transparent;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.85em;
    cursor: pointer;
    transition: var(--transition-fast);
}
.trpg-promise-modal-close:hover { background: var(--bg-light); }
.trpg-widget-title {
    margin: 0 0 var(--spacing-sm);
    font-size: 1em;
    color: var(--content-font-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}
.trpg-widget-title i { color: var(--accent-color); }
.trpg-widget-desc {
    margin: 0 0 var(--spacing-sm);
    font-size: 0.8em;
    color: var(--text-muted);
    line-height: 1.5;
}
.trpg-widget-empty {
    margin: 0;
    font-size: 0.88em;
    color: var(--text-muted);
}
.trpg-widget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); }
.trpg-widget-list li a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-sm);
    border-radius: var(--card-border-radius);
    text-decoration: none;
    color: var(--content-font-color);
    background: var(--bg-light);
    transition: var(--transition-fast);
}
.trpg-widget-list li a:hover { background: rgb(from var(--primary-color) r g b / 8%); }
.trpg-widget-list li a .tag-promise { align-self: flex-start; }
.trpg-widget-partner {
    font-size: 0.85em;
    color: var(--accent-color);
}
.trpg-widget-subject {
    font-size: 0.92em;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   3. 대시보드형 리스트 (grid 기반, 넉넉한 행간)
   --------------------------------------------------------------------- */
.trpg-list-header,
.trpg-row-main {
    display: grid;
    /* 분류/시스템/경험 칸 폭을 실제 내용에 맞게 축소(위시 등으로 넘치면
       flex-wrap으로 2줄까지는 허용)하고, 공수표·완료(클리어 도장, 기능
       자체가 삭제됨) 칸을 없애 확보한 공간을 전부 제목(minmax(0,1fr))에
       돌려줌 - 제목이 이미지·배지 때문에 줄어들면 안 된다는 요구사항이
       최우선이라 나머지 칸은 최소한으로 */
    grid-template-columns: 100px minmax(0, 1fr) 100px 150px;
    align-items: center;
    gap: var(--spacing-sm);
}
.trpg-list-header {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.85em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--card-border-color);
}
.trpg-list-header .col-title { padding-left: 22px; } /* 아코디언 화살표 자리만큼 맞춤 */

.trpg-rows { display: flex; flex-direction: column; }

.trpg-empty {
    padding: var(--spacing-2xl, 40px) 0;
    text-align: center;
    color: var(--text-muted);
}

.trpg-row {
    border-bottom: 1px solid var(--card-border-color);
    /* 각 행을 독립된 렌더링 단위로 격리 (스크롤/애니메이션 시 리페인트 범위 최소화) */
    contain: layout style;
}
.trpg-row.is-reply {
    border-left: 3px solid var(--card-border-color);
}
/* 서플리먼트를 포함한 원글은 접힌 상태에서도 한눈에 알아보도록 진한
   좌측 테두리로 표시. is-reply(중첩된 서플리먼트 자신 - 무채색 테두리)와
   구분하기 위해 강조색을 씀 */
.trpg-row.has-suppl {
    border-left: 3px solid var(--primary-color);
}

.trpg-row-main {
    width: 100%;
    padding: var(--spacing-md);
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background-color 0.15s ease;
}
.trpg-row-main:hover { background: rgb(from var(--primary-color) r g b / 4%); }

.trpg-caret {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg) scale(0.6);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    vertical-align: middle;
}
.trpg-row.is-open > .trpg-row-main .trpg-caret { transform: rotate(45deg) scale(1); opacity: 1; }

.col-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
/* 룰북 아이콘/이미지 (선택사항) - 첨부이미지가 있는 글만 렌더링됨.
   col-source(분류 배지) 칸 안에 위치 - 제목이 이미지 때문에 줄어들지
   않도록 제목 칸(col-title)이 아니라 분류 칸에 붙여둠. 이미지 없는
   글은 렌더링 자체가 안 되므로 별도 처리 불필요 */
.trpg-row-thumb {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-light);
    vertical-align: middle;
    flex-shrink: 0;
}
.trpg-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 북마크 별표 - 팬시나리오집은 표지가 없는 경우가 많아 썸네일 자리가 비는데,
   북마크면 그 빈 자리를 별표가 대신 채움. 크기·정렬이 썸네일과 같아야
   제목 시작 위치가 글마다 들쭉날쭉해지지 않음 */
.trpg-row-fav-star {
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #e8b429;
    font-size: 15px;
    line-height: 1;
}
/* 꺼진 상태 - 자기 글일 때만 보이는 "눌러서 켤 수 있는" 흐린 별.
   너무 진하면 켜진 별과 헷갈리므로 확실히 옅게 둠 */
.trpg-row-fav-star:not(.is-on) { color: var(--text-muted); opacity: 0.3; }
.trpg-row-fav-star.is-clickable { cursor: pointer; transition: var(--transition-fast); }
.trpg-row-fav-star.is-clickable:hover,
.trpg-row-fav-star.is-clickable:focus-visible { color: #e8b429; opacity: 1; transform: scale(1.15); }
.trpg-row-fav-star[data-busy="1"] { opacity: 0.5; cursor: default; }
/* 표지가 있는 글은 썸네일을 가리지 않도록 모서리에 작은 별만 겹쳐 표시.
   overflow:hidden이 걸려 있어 별이 잘리므로 이때만 풀어줌 */
.trpg-row-thumb.is-fav { overflow: visible; position: relative; }
.trpg-row-thumb.is-fav img { border-radius: 6px; }
.trpg-row-thumb.is-fav::after {
    content: "\2605";                 /* ★ */
    position: absolute;
    right: -4px;
    bottom: -4px;
    font-size: 11px;
    line-height: 1;
    color: #e8b429;
    text-shadow: 0 0 2px var(--white), 0 0 2px var(--white);
    pointer-events: none;
}

/* 북마크 탭은 별 색을 살려서 다른 분류 탭과 구분 */
.trpg-tab-fav i { color: #e8b429; margin-right: 2px; }
.trpg-tab-fav.is-active i { color: inherit; }

/* 글쓰기 폼의 옵션 영역 - 비밀글 체크박스와 북마크를 한 줄에 나란히.
   비밀글 쪽 마크업(체크박스 + label 형제)을 그대로 따라가므로 정렬만 잡아줌 */
.trpg-w-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.trpg-w-options label { cursor: pointer; margin-right: 4px; }
.trpg-w-options input[type="checkbox"] { margin: 0; cursor: pointer; }
.trpg-w-options label[for="wr_8"] i { color: #e8b429; }
.col-meta {
    font-size: 0.88em;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    overflow: hidden;
}
.col-source {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}


/* ---------------------------------------------------------------------
   4. 분류 뱃지(wr_3: 공식/팬시나리오/위시) / 경험 칩(wr_4 시나리오별 집계)
   --------------------------------------------------------------------- */
.tag-source {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
}
.tag-source.src-official { background: rgb(from var(--primary-color) r g b / 15%); color: var(--primary-color); }
.tag-source.src-fan      { background: rgb(from var(--accent-color) r g b / 15%);  color: var(--accent-color); }
.tag-source.src-none     { background: var(--bg-light); color: var(--text-muted); }
/* 위시(사고 싶으나 아직 미소장)는 "아직 안 됨" 뉘앙스를 위해 다른 분류와 달리
   점선 테두리 사용 - 실제 소장한 것들과 시각적으로 구분됨 */
.tag-source.src-wish {
    border: 1px dashed var(--warning-color, var(--accent-color));
    color: var(--warning-color, var(--accent-color));
    background: transparent;
}

/* 공수표(플레이 약속) 표시 - 시나리오별로 "공수표" 체크된 항목에 표시됨 */
.tag-promise {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 0.85em;
    font-weight: 700;
    white-space: nowrap;
    background: rgb(from var(--danger-color, var(--accent-color)) r g b / 14%);
    color: var(--danger-color, var(--accent-color));
}

/* 서플리먼트(답글) 표시 - wr_reply 깊이가 0보다 큰 행의 제목 앞에 붙는 기호.
   행 자체는 더 이상 오른쪽으로 밀리지 않고(margin-left 제거), 제목 앞에
   'ㄴ' 기호 하나만 붙여 답글임을 표시함 - 배지가 아니라 순수 텍스트 기호라
   배경/테두리 없이 가볍게 표시 */
.tag-supplement {
    margin-right: 4px;
    color: var(--text-muted);
    font-weight: 700;
}

.flag-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.85em;
    font-weight: 700;
    white-space: nowrap;
}
.flag-chip.flag-pl   { background: rgb(from var(--primary-color) r g b / 12%); color: var(--primary-color); }
.flag-chip.flag-gm   { background: rgb(from var(--accent-color) r g b / 12%);  color: var(--accent-color); }
.flag-chip.flag-read { background: var(--bg-light); color: var(--text-muted); }
.flag-chip.flag-unknown { background: transparent; color: var(--text-muted); border: 1px dashed var(--card-border-color); }
.flag-chip.flag-tried  { background: var(--bg-light); color: var(--text-muted); border: 1px dotted var(--card-border-color); }
.flag-chip.flag-main   { background: rgb(from var(--success-color, var(--primary-color)) r g b / 14%); color: var(--success-color, var(--primary-color)); font-weight: 700; }
.flag-chip.flag-newbie { background: hsl(from var(--warning-color, var(--accent-color)) h calc(s * 0.5) l / 16%); color: hsl(from var(--warning-color, var(--accent-color)) h calc(s * 0.55) calc(l * 0.75)); }
.flag-chip.flag-none { background: transparent; color: var(--text-muted); }

/* ---------------------------------------------------------------------
   5. 아코디언 상세 (grid-template-rows 0fr -> 1fr, 하드웨어 가속 친화적)
   --------------------------------------------------------------------- */
.trpg-detail-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}
.trpg-row.is-open > .trpg-detail-wrap { grid-template-rows: 1fr; }

.trpg-detail-inner { overflow: hidden; min-height: 0; }

.trpg-detail {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) + 22px);
    border-top: 1px dashed var(--card-border-color);
}

.trpg-detail-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--spacing-xs) var(--spacing-md);
    margin: 0 0 var(--spacing-md);
    font-size: 0.92em;
}
.trpg-detail-grid dt { color: var(--text-muted); font-weight: 500; }
.trpg-detail-grid dd { margin: 0; color: var(--content-font-color); }
.trpg-detail-grid dd a { color: var(--primary-color); }

/* 수록 시나리오 목록 - 시나리오 하나하나마다 라이터/인원구성/공수표/경험/메모를
   보여줌 (list.skin.php 아코디언 상세, view.skin.php 정보 패널에서 공용).
   각 <li>가 항상 6칸(이름/작가/인원/공수표/경험/메모)을 렌더링하고 grid로
   배치하므로, 참고해주신 엑셀 표처럼 이름 길이와 무관하게 작가·인원 칸이
   행마다 정확히 같은 위치에 정렬됨(flex는 내용 길이에 따라 밀려서 안 됨) */
.trpg-scenario-list { margin: 0 0 var(--spacing-md); }
.trpg-scenario-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.trpg-scenario-list li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 84px 118px 82px 150px minmax(70px, 1.3fr);
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 6px var(--spacing-sm);
    background: var(--bg-light);
    border-radius: var(--card-border-radius);
    font-size: 0.9em;
}
/* 시나리오가 여러 개 수록된 경우, 항목 사이를 눈에 띄게 구분하기 위한 선.
   .trpg-detail의 제목↔상세 구분선(1px dashed, 옅음 없이 풀폭)보다 옅고(더 낮은
   opacity) 짧게(좌우 8%씩 인셋) 두어서 항목 사이만 살짝 구분되도록 함 - 각
   항목의 배경 박스/간격은 그대로 유지하고 그 위에 얹는 정도의 보조 표시임. */
.trpg-scenario-list li + li::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 8%;
    right: 8%;
    border-top: 1px dashed var(--card-border-color);
    opacity: 0.45;
}
/* 시나리오 이름(제목)을 더 길게 보여달라는 요청은 목록 페이지(list.skin.php)의
   아코디언을 펼쳤을 때에 한정된 것이었음 - view.skin.php(#bo_v)의 정보
   패널은 원래 비율(이름:메모 = 1:1.3) 그대로 둠 */
#bo_list .trpg-scenario-list li {
    grid-template-columns: minmax(160px, 2.2fr) 84px 118px 82px 150px minmax(70px, 1fr);
}
.trpg-sc-view-name { font-weight: 600; color: var(--content-font-color); }
.trpg-sc-view-writer {
    font-size: 0.85em;
    color: var(--text-muted);
}
.trpg-sc-view-format-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.3;
    background: var(--container-bg-color, var(--white));
    border: 1px solid var(--card-border-color);
    color: var(--text-muted);
}
.trpg-sc-view-promise,
.trpg-sc-view-exp { display: flex; flex-wrap: wrap; gap: 4px; }
.trpg-sc-view-memo { color: var(--text-muted); font-size: 0.92em; }
.trpg-view-scenario-list { margin-bottom: var(--spacing-lg); }

.trpg-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--card-border-radius);
    font-size: 0.88em;
    text-decoration: none;
    transition: var(--transition-fast);
}
.trpg-btn-line {
    border: 1px solid var(--card-border-color);
    color: var(--content-font-color);
    background: transparent;
}
.trpg-btn-line:hover { background: var(--bg-light); text-decoration: none; }

/* 서플리먼트 추가(ㄴ)/수정(+)/삭제(×) 아이콘. 접힌 상태에선 안 보이고
   펼쳤을 때만 나타나며, "소장 형태" 줄 끝에 붙어서 별도의 줄을 새로
   차지하지 않음(소장 형태는 거의 항상 채워져 있어서 안정적인 자리).
   소장 형태를 안 적은 드문 글만 .trpg-row-icon-fallback로 예외적으로
   자기 줄을 가짐(붙일 곳이 없어서). role=button+data-href로 구현한 건
   코드 재사용을 위해 태그 버튼과 동일한 패턴을 그대로 쓴 것 - 클릭은
   script.js가 처리함 */
.trpg-detail-grid-dd-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}
.trpg-row-icon-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.trpg-row-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid var(--card-border-color);
    background: var(--container-bg-color, var(--white));
    color: var(--text-muted);
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.trpg-row-icon-btn:hover { background: var(--bg-light); color: var(--primary-color); border-color: var(--primary-color); }
.trpg-row-icon-btn.trpg-row-icon-danger:hover { color: var(--danger-color, #d33); border-color: var(--danger-color, #d33); }
.trpg-row-icon-fallback { display: flex; justify-content: flex-end; margin-bottom: var(--spacing-sm); }

/* ---------------------------------------------------------------------
   5-1. 서플리먼트(답글) 중첩 블록 - 원글의 상세 패널을 펼쳐야만 보임.
   각 서플리먼트 행도 .trpg-row/.trpg-row-main을 그대로 재사용하는
   중첩 아코디언이라 자기 자신도 접힌 채로 시작해 클릭해야 펼쳐짐
   (bleed 방지용 CSS는 5번 섹션의 자식결합자(>) 처리 참고).
   --------------------------------------------------------------------- */
.trpg-suppl-block {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--card-border-color);
}
.trpg-suppl-heading {
    margin: 0 0 var(--spacing-sm);
    font-size: 0.85em;
    font-weight: 700;
    color: var(--text-muted);
}
.trpg-suppl-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-left: var(--spacing-md);
}
/* 원글의 .is-reply(왼쪽 굵은 선)에 더해, 배경/둥근 모서리로 "카드 안의
   작은 카드"라는 느낌을 줘서 원글 목록의 행과 시각적으로 구분함 */
.trpg-suppl-row {
    border-radius: var(--card-border-radius);
    background: var(--bg-light);
}
.trpg-suppl-row .trpg-row-main { padding: var(--spacing-sm) var(--spacing-md); }

/* ---------------------------------------------------------------------
   7. 글쓰기 폼 - 여분필드 입력 영역
   --------------------------------------------------------------------- */
/* 글쓰기 폼 전체 컨테이너 - 배경이 없어 완전히 투명해서 뒤 배경 글자와
   겹쳐 보이던 문제 수정. 목록/사이드바와 같은 카드 배경을 깔아줌
   (하드 fallback 색을 넣어 테마 변수가 없는 경우에도 반드시 불투명하게) */
.trpg-write {
    max-width: 900px;
    margin: 0 auto;
    background: var(--container-bg-color, var(--card-bg-color, #fff));
    padding: var(--spacing-md);
    border-radius: var(--card-border-radius);
    box-sizing: border-box;
}

.trpg-reply-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgb(from var(--primary-color) r g b / 8%);
    border-radius: var(--card-border-radius);
    font-size: 0.9em;
    color: var(--content-font-color);
}
.trpg-reply-banner strong { color: var(--primary-color); }

.trpg-w-fields {
    background: var(--card-bg-color, var(--bg-light, #f7f7f7));
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
}
.trpg-w-fields legend {
    padding: 0 var(--spacing-xs);
    font-weight: 700;
    color: var(--primary-color);
}
.trpg-w-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.trpg-w-row-2 { grid-template-columns: 1fr 1fr; }
.trpg-w-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.88em;
    color: var(--text-muted);
}
.trpg-w-field .frm_input {
    width: 100%;
    border: 1px solid var(--input-border-color, var(--form-border-color));
    border-radius: var(--form-border-radius, var(--card-border-radius));
    background: var(--form-bg-color, var(--white));
    color: var(--form-text-color, var(--content-font-color));
    padding: var(--spacing-sm);
    box-sizing: border-box;
}
textarea.trpg-w-field .frm_input,
.trpg-w-field textarea.frm_input {
    font: inherit;
    resize: vertical;
    min-height: 56px;
}
.trpg-w-hint {
    margin: 4px 0 0;
    font-size: 0.8em;
    color: var(--text-muted);
    flex-basis: 100%;
}
.trpg-w-hint-inline { font-weight: 400; color: var(--text-muted); font-size: 0.9em; }

.trpg-w-flagrow { display: flex; flex-direction: column; gap: 6px; }
.trpg-w-flag-title { font-size: 0.88em; color: var(--text-muted); }
.trpg-w-flag-list { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.trpg-w-flag-item { display: inline-flex; align-items: center; gap: 6px; }
.trpg-w-flag-item label { margin: 0; color: var(--content-font-color); }

/* 수록 시나리오 목록 입력 (write.skin.php) - 시나리오마다 라이터/인원구성/
   공수표/경험(GM·PL·알뇌·몰뇌)을 개별 체크. 넣을 정보가 많아져 한 줄짜리
   그리드 대신 카드 안에 3단(이름·라이터·인원구성 / 공수표·경험 / 메모)으로 구성 */
.trpg-scenario-wrap > label { display: block; margin-bottom: 6px; font-size: 0.88em; color: var(--text-muted); }
#trpg_scenario_rows { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.trpg-scenario-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--spacing-sm);
    background: var(--bg-light);
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
}
.trpg-scenario-row .frm_input,
.trpg-scenario-row select.frm_input { margin: 0; }

.trpg-sc-line1 {
    display: grid;
    grid-template-columns: 1.6fr 1fr 110px 50px;
    align-items: center;
    gap: var(--spacing-sm);
}
.trpg-sc-line2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    padding-top: 2px;
    border-top: 1px dashed var(--card-border-color);
}

.trpg-sc-promise-cell { display: flex; align-items: center; gap: 8px; }
.trpg-sc-promise-chk { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 0.88em; color: var(--content-font-color); }
.trpg-sc-role-group { display: flex; gap: 6px; }
.trpg-sc-role-btn {
    padding: 3px 10px;
    border: 1px solid var(--card-border-color);
    border-radius: 6px;
    background: var(--container-bg-color, var(--white));
    color: var(--text-muted);
    font-size: 0.82em;
    cursor: pointer;
    transition: var(--transition-fast);
}
.trpg-sc-role-btn.is-active {
    background: var(--danger-color, var(--accent-color));
    border-color: var(--danger-color, var(--accent-color));
    color: var(--white);
    font-weight: 700;
}

.trpg-sc-exp-group { display: flex; flex-wrap: wrap; gap: 10px; }
.trpg-sc-exp-chk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 0.85em;
    color: var(--text-muted);
    cursor: pointer;
}

.trpg-sc-remove {
    border: 1px solid var(--card-border-color);
    background: var(--container-bg-color, var(--white));
    color: var(--text-muted);
    border-radius: var(--card-border-radius);
    padding: 6px 4px;
    font-size: 0.78em;
    cursor: pointer;
}
.trpg-sc-remove:hover { color: var(--danger-color, var(--accent-color)); border-color: var(--danger-color, var(--accent-color)); }
.trpg-sc-add { margin-top: var(--spacing-sm); }

/* ---------------------------------------------------------------------
   7-1. 파일 첨부 영역 (write_file.common.php - 그누보드 코어 include)
   ※ 코어 파일을 직접 볼 수 없어 그누보드5 표준 마크업 기준(#bo_w_file,
     write_div, input[type=file])으로 방어적으로 작성함. 실제 화면에서
     어긋나는 부분이 있으면 알려주시면 바로 맞출 수 있음.
   --------------------------------------------------------------------- */
.trpg-write .write_div {
    margin: var(--spacing-md) 0;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--card-border-color);
}
.trpg-write .write_div:first-child { padding-top: 0; border-top: 0; }

#bo_w_file,
.trpg-write #bo_w_file {
    padding: var(--spacing-md);
    background: var(--card-bg-color, var(--bg-light));
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
}
#bo_w_file h2,
#bo_w_file > label,
#bo_w_file > strong {
    display: block;
    margin: 0 0 var(--spacing-sm);
    font-size: 0.88em;
    font-weight: 700;
    color: var(--text-muted);
}
#bo_w_file p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-sm);
}
#bo_w_file p:last-child { margin-bottom: 0; }
#bo_w_file label {
    font-size: 0.85em;
    color: var(--text-muted);
    margin: 0;
}
#bo_w_file input[type="file"] {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-xs);
    border: 1px solid var(--input-border-color, var(--form-border-color));
    border-radius: var(--form-border-radius, var(--card-border-radius));
    background: var(--form-bg-color, var(--white));
    color: var(--form-text-color, var(--content-font-color));
    font-size: 0.85em;
}
#bo_w_file input[type="checkbox"] { margin: 0; }
#bo_w_file a { color: var(--primary-color); text-decoration: none; }
#bo_w_file a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   9. 게시물 상세보기 (view.skin.php)
   --------------------------------------------------------------------- */
.trpg-view {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    background: var(--container-bg-color, var(--white));
    border-radius: var(--card-border-radius);
    color: var(--content-font-color, var(--text-color));
    contain: layout style;
}

.trpg-view-header { margin-bottom: var(--spacing-md); }
.bo_v_cate {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.8em;
    background: var(--bg-light);
    color: var(--text-muted);
}
.trpg-view-title {
    margin: 0 0 var(--spacing-sm);
    font-size: 1.4em;
    line-height: 1.4;
    color: var(--content-font-color);
}
.trpg-view-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* 답글(서플리먼트)로 들어왔을 때 원글로 돌아가는 배너 */
.trpg-supplement-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--spacing-xs);
    font-size: 0.85em;
    color: var(--text-muted);
}
.trpg-supplement-banner a { color: var(--primary-color); text-decoration: none; }
.trpg-supplement-banner a:hover { text-decoration: underline; }

/* #공식 원글에서 서플리먼트를 새로 추가하는 버튼 (그누보드 답글 URL로 연결) */
.trpg-btn-supplement-add {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 3px 10px;
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-fast);
}
.trpg-btn-supplement-add:hover { background: rgb(from var(--primary-color) r g b / 8%); text-decoration: none; }

.trpg-view-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
    border-top: 1px solid var(--card-border-color);
    border-bottom: 1px solid var(--card-border-color);
}
.trpg-view-author { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 0.9em; color: var(--text-muted); }
.trpg-view-author-name { color: var(--content-font-color); font-weight: 600; }
.trpg-view-author-id { color: var(--text-muted); }
.trpg-view-btns .btn_bo_user {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}
.trpg-more-wrap { position: relative; }
.trpg-more-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    margin: 0;
    padding: 6px;
    min-width: 100px;
    list-style: none;
    background: var(--container-bg-color, var(--white));
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow-hover, 0 4px 12px rgb(0 0 0 / 12%));
}
.trpg-more-menu.is-open { display: block; }
/* 삭제는 <a>가 아니라 delete_bulk.php로 보내는 폼의 <button>이라(GET 링크
   하나로 글이 지워지면 안 되므로) 링크와 똑같이 보이도록 같이 묶어둠 */
.trpg-more-menu li a,
.trpg-more-menu li .trpg-more-del button {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--content-font-color);
    text-decoration: none;
    text-align: left;
    font-family: inherit;
    font-size: 0.9em;
    line-height: inherit;
    cursor: pointer;
}
.trpg-more-menu li .trpg-more-del { margin: 0; }
.trpg-more-menu li a:hover,
.trpg-more-menu li .trpg-more-del button:hover { background: var(--bg-light); }

.trpg-view-info-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--spacing-xs) var(--spacing-md);
    margin: 0 0 var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--card-bg-color, var(--bg-light));
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    font-size: 0.92em;
}
.trpg-view-info-grid dt { color: var(--text-muted); font-weight: 600; }
.trpg-view-info-grid dd { margin: 0; color: var(--content-font-color); }
.trpg-view-info-grid dd a { color: var(--primary-color); }

.trpg-view-content {
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
    word-break: break-word;
}
/* 본문 내 이미지는 JS 리사이즈 없이 CSS만으로 반응형 처리 (별도 스크립트 불필요) */
.trpg-view-content img { max-width: 100%; height: auto; }

.trpg-view-signature {
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    border-top: 1px dashed var(--card-border-color);
    font-size: 0.88em;
    color: var(--text-muted);
}

.trpg-view-act {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
}
.bo_v_act_gng { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.trpg-view-act-msg {
    font-size: 0.8em;
    color: var(--success-color);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.trpg-view-act-msg.is-show { opacity: 1; }

.trpg-view-files, .trpg-view-links {
    margin: 0 0 var(--spacing-lg);
    padding: var(--spacing-md);
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
}
.trpg-view-files h2, .trpg-view-links h2 {
    margin: 0 0 var(--spacing-sm);
    font-size: 0.95em;
    color: var(--text-muted);
}
.trpg-view-files ul, .trpg-view-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.trpg-view-files a, .trpg-view-links a { color: var(--primary-color); text-decoration: none; }
.trpg-view-files a:hover, .trpg-view-links a:hover { text-decoration: underline; }
.trpg-view-file-meta { font-size: 0.8em; color: var(--text-muted); }

.trpg-view-nb {
    list-style: none;
    margin: 0 0 var(--spacing-lg);
    padding: 0;
    border-top: 1px solid var(--card-border-color);
}
.trpg-view-nb li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--card-border-color);
    font-size: 0.9em;
}
.trpg-view-nb .nb_tit { color: var(--text-muted); flex-shrink: 0; width: 70px; }
.trpg-view-nb a { color: var(--content-font-color); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.trpg-view-nb a:hover { color: var(--primary-color); }
.trpg-view-nb .nb_date { color: var(--text-muted); font-size: 0.85em; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   11. 모바일 반응형
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .trpg-search-form { flex-wrap: wrap; }
    .trpg-search-sfl { max-width: none; flex: 1 1 100%; }
    .trpg-search-stx { flex: 1 1 auto; }

    .trpg-list-header { display: none; }
    .trpg-row-main {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "source"
            "flags";
    }
    .trpg-row-main .col-title  { grid-area: title; }
    .trpg-row-main .col-source { grid-area: source; }
    .trpg-row-main .col-flags  { grid-area: flags; }
    .trpg-row-main .col-meta   { display: none; }

    .trpg-w-row-2 { grid-template-columns: 1fr; }
    .trpg-sc-line1 { grid-template-columns: 1fr; }
    .trpg-sc-remove { justify-self: start; }

    /* 시나리오 목록 - 데스크톱의 6칸 그리드는 좁은 화면엔 너무 빡빡하므로
       이름/메모는 한 줄씩 통으로, 나머지는 2열로 스택 */
    .trpg-scenario-list li {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name name"
            "writer format"
            "promise exp"
            "memo memo";
        row-gap: 4px;
    }
    .trpg-sc-view-name    { grid-area: name; }
    .trpg-sc-view-writer  { grid-area: writer; }
    .trpg-sc-view-format  { grid-area: format; justify-self: end; }
    .trpg-sc-view-promise { grid-area: promise; }
    .trpg-sc-view-exp     { grid-area: exp; justify-self: end; }
    .trpg-sc-view-memo    { grid-area: memo; }

    .trpg-view-info-grid { grid-template-columns: 1fr; }
    .trpg-view-info-grid dt { margin-top: var(--spacing-xs); }
    .trpg-view-meta { flex-direction: column; align-items: flex-start; }
}