@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 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--btn-primary-radius, var(--card-border-radius));
    background: var(--bg-light);
    color: var(--content-font-color);
    text-decoration: none;
    transition: var(--transition-fast);
}
.trpg-icon-btn:hover { background: var(--card-border-color); text-decoration: none; }
.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); }

/* ---------------------------------------------------------------------
   1. 카테고리 필터 탭 (#전체 #공식 #팬시나리오 #위시)
   --------------------------------------------------------------------- */
.trpg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}
.trpg-tab {
    appearance: none;
    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;
    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;
}

/* 시스템/룰 태그 필터 상태줄 - 목록의 태그를 클릭하면 나타나는 별도 필터 표시.
   카테고리 탭(알약 버튼)과 톤을 맞춰, 태그명+✕를 하나의 컬러 알약 칩으로 묶음 */
.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-bar[hidden] { display: none; } /* display:flex가 hidden 속성을 덮어쓰는 문제 방지 */
.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;
    cursor: pointer;
    transition: var(--transition-fast);
}
#trpg_tag_filter_clear:hover { background: rgb(255 255 255 / 45%); }

/* 목록의 시스템/룰 태그 - 클릭하면 그 태그로 필터링됨. 아코디언 헤더(버튼) 안에
   있어 실제 <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-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
}
.trpg-main { flex: 1; min-width: 0; }

.trpg-sticky-widget {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: var(--spacing-lg);
    background: var(--card-bg-color, var(--container-bg-color));
    border: 1px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    padding: var(--spacing-md);
}
.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-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; }
.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_2) / 경험 칩(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); }

/* 위시(사고 싶으나 아직 미소장) 배지 - "아직 안 됨" 뉘앙스를 위해 완료 도장과
   같은 점선 테두리 사용, 실제 소장 형태(현물/PDF/무료) 뱃지와는 시각적으로 구분 */
.tag-wish {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 0.78em;
    font-weight: 700;
    white-space: nowrap;
    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.78em;
    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.78em;
    font-weight: 600;
    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: rgb(from var(--warning-color, var(--accent-color)) r g b / 14%); color: var(--warning-color, var(--accent-color)); }
.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: 0 var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) + 22px);
}

.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); }

/* 소장 정보(dl)와 본문보기/완료도장 버튼들(div)을 같은 줄 좌우로 배치.
   버튼 쪽은 flex-shrink:0로 폭을 지켜서 안 찌그러지게 하고, 화면이 좁아
   나란히 놓을 공간이 없으면 flex-wrap으로 자연스럽게 아래로 떨어짐 */
.trpg-detail-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}
.trpg-detail-footer .trpg-detail-grid { flex: 1 1 220px; margin-bottom: 0; }
.trpg-detail-footer .trpg-detail-actions { flex-shrink: 0; }

/* 수록 시나리오 목록 - 시나리오 하나하나마다 라이터/인원구성/공수표/경험/메모를
   보여줌 (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 {
    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-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.78em;
    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-detail-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}
.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-btn-supplement {
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}
.trpg-btn-supplement:hover { background: rgb(from var(--primary-color) r g b / 8%); }

/* ---------------------------------------------------------------------
   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); }
.trpg-suppl-row .trpg-detail { padding-top: var(--spacing-sm); }

/* ---------------------------------------------------------------------
   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; }
.trpg-more-menu li a {
    display: block;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--content-font-color);
    text-decoration: none;
    font-size: 0.9em;
}
.trpg-more-menu li a: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-layout { flex-direction: column; }
    .trpg-sticky-widget { width: 100%; position: static; order: -1; }

    .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; }
}