/* ═══════════════════════════════════════════════════════════════
 * trpg_intro/style.css — TRPG 자기소개 스킨
 * ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,400;0,500;1,400&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

/* ─── 토큰 ─── */
:root {
  --trpg-rp:       #4fa89b;
  --trpg-rp-bg:    rgba(79,168,155,.08);
  --trpg-rp-line:  rgba(79,168,155,.30);
  --trpg-ok:       #5c8fd6;
  --trpg-ok-bg:    rgba(92,143,214,.08);
  --trpg-ok-line:  rgba(92,143,214,.30);
  --trpg-ng:       #d05c6e;
  --trpg-ng-bg:    rgba(208,92,110,.08);
  --trpg-ng-line:  rgba(208,92,110,.30);
  --trpg-mo:       #9b7fd4;
  --trpg-mo-bg:    rgba(155,127,212,.08);
  --trpg-mo-line:  rgba(155,127,212,.30);
  --trpg-mono:     'DM Mono', monospace;
  --trpg-body:     'Noto Sans KR', sans-serif;
}

/* ═══════════════════════════════════════════
 * INDEX — 카드 그리드
 * ═══════════════════════════════════════════ */
.trpg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.trpg-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.trpg-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--trpg-rp), var(--trpg-ok), var(--trpg-ng), var(--trpg-mo));
}
.trpg-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

.trpg-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.trpg-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  overflow: hidden;
}
.trpg-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.trpg-card-names { flex: 1; min-width: 0; }
.trpg-card-nick {
  font-family: var(--trpg-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trpg-card-handle {
  font-family: var(--trpg-mono);
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 2px;
}

.trpg-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.trpg-tag {
  font-family: var(--trpg-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--hair-soft);
  white-space: nowrap;
}
.trpg-tag.rp  { background: var(--trpg-rp-bg);  color: var(--trpg-rp);  border-color: var(--trpg-rp-line); }
.trpg-tag.ok  { background: var(--trpg-ok-bg);  color: var(--trpg-ok);  border-color: var(--trpg-ok-line); }
.trpg-tag.ng  { background: var(--trpg-ng-bg);  color: var(--trpg-ng);  border-color: var(--trpg-ng-line); }

.trpg-card-time {
  font-size: 11px;
  color: var(--ink-mute);
  display: flex;
  gap: 8px;
  font-family: var(--trpg-mono);
  border-top: 1px solid var(--hair-soft);
  padding-top: 10px;
  margin-top: 4px;
}
.trpg-card-time span { display: flex; gap: 3px; align-items: center; }
.trpg-card-time .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hair);
  display: inline-block;
}
.trpg-card-time .dot.on { background: var(--accent); }

/* ═══════════════════════════════════════════
 * VIEW — 자기소개 시트
 * ═══════════════════════════════════════════ */
.trpg-sheet {
  display: grid;
  gap: 0;
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  font-family: var(--trpg-body);
  margin-top: 20px;
}

/* 시트 상단 무지개 줄 */
.trpg-sheet-rainbow {
  height: 4px;
  background: linear-gradient(90deg, var(--trpg-rp) 0%, var(--trpg-ok) 33%, var(--trpg-ng) 66%, var(--trpg-mo) 100%);
}

/* ─── 헤더 블록 ─── */
.trpg-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0;
  border-bottom: 1px solid var(--hair);
}
.trpg-header-seal {
  padding: 20px 24px;
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  background: var(--paper-2);
}
.trpg-seal-avatar {
  width: 60px; height: 60px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 2px solid var(--hair);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.trpg-seal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.trpg-seal-label {
  font-family: var(--trpg-mono);
  font-size: 9px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.trpg-header-main {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.trpg-nick {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.trpg-handle {
  font-family: var(--trpg-mono);
  font-size: 12px;
  color: var(--accent);
}
.trpg-header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.trpg-header-time {
  padding: 20px 24px;
  border-left: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-width: 140px;
  background: var(--paper-2);
}
.trpg-time-row { display: flex; flex-direction: column; gap: 2px; }
.trpg-time-label {
  font-family: var(--trpg-mono);
  font-size: 9px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex; align-items: center; gap: 5px;
}
.trpg-time-label .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hair);
  display: inline-block;
}
.trpg-time-label .dot.on { background: #5bbf72; }
.trpg-time-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* ─── 섹션 공통 ─── */
.trpg-section {
  border-bottom: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 48px 1fr;
}
.trpg-section:last-child { border-bottom: none; }

.trpg-section-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 16px 0;
  border-right: 1px solid var(--hair);
  background: var(--paper-2);
}
.trpg-section-label span {
  font-family: var(--trpg-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.trpg-section.sec-rp .trpg-section-label span { color: var(--trpg-rp); }
.trpg-section.sec-ok .trpg-section-label span { color: var(--trpg-ok); }
.trpg-section.sec-ng .trpg-section-label span { color: var(--trpg-ng); }
.trpg-section.sec-mo .trpg-section-label span { color: var(--trpg-mo); }

.trpg-section-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ─── 필드 행 ─── */
.trpg-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trpg-field-label {
  font-family: var(--trpg-mono);
  font-size: 9px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.trpg-field-val {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
}
.trpg-field-val.muted { color: var(--ink-mute); font-style: italic; }

.trpg-fields-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px 20px;
}

/* 칩 컨테이너 */
.trpg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.trpg-chip {
  font-family: var(--trpg-mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--hair-soft);
}
.trpg-chip.rp { background: var(--trpg-rp-bg); color: var(--trpg-rp); border-color: var(--trpg-rp-line); }
.trpg-chip.ok { background: var(--trpg-ok-bg); color: var(--trpg-ok); border-color: var(--trpg-ok-line); }
.trpg-chip.ng { background: var(--trpg-ng-bg); color: var(--trpg-ng); border-color: var(--trpg-ng-line); }
.trpg-chip.mo { background: var(--trpg-mo-bg); color: var(--trpg-mo); border-color: var(--trpg-mo-line); }
.trpg-chip.mine {
  background: var(--trpg-ng-bg);
  color: var(--trpg-ng);
  border-color: var(--trpg-ng-line);
  font-weight: 600;
}
.trpg-chip.mine::before { content: '⚠ '; }

/* 구분선 */
.trpg-divider {
  height: 1px;
  background: var(--hair-soft);
  margin: 0;
}

/* MEMO 텍스트 */
.trpg-memo {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.75;
  white-space: pre-wrap;
  font-family: var(--trpg-body);
}

/* ═══════════════════════════════════════════
 * FORM — 작성/수정 폼
 * ═══════════════════════════════════════════ */
.trpg-form {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 20px;
  font-family: var(--trpg-body);
}
.trpg-form-section {
  border-bottom: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 120px 1fr;
}
.trpg-form-section:last-child { border-bottom: none; }
.trpg-form-section-label {
  padding: 16px;
  background: var(--paper-2);
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: flex-start;
  padding-top: 20px;
}
.trpg-form-section-label .sec-name {
  font-family: var(--trpg-mono);
  font-size: 12px;
  font-weight: 500;
}
.trpg-form-section-label .sec-desc {
  font-size: 10px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.trpg-form-section.sec-rp .sec-name { color: var(--trpg-rp); }
.trpg-form-section.sec-ok .sec-name { color: var(--trpg-ok); }
.trpg-form-section.sec-ng .sec-name { color: var(--trpg-ng); }
.trpg-form-section.sec-mo .sec-name { color: var(--trpg-mo); }

.trpg-form-section-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trpg-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.trpg-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.trpg-form-field label {
  font-family: var(--trpg-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: .05em;
}
.trpg-form-field input[type="text"],
.trpg-form-field textarea {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink);
  font-family: var(--trpg-body);
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.trpg-form-field input[type="text"]:focus,
.trpg-form-field textarea:focus {
  border-color: var(--accent);
}
.trpg-form-field textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
}
.trpg-form-field .field-hint {
  font-size: 10px;
  color: var(--ink-mute);
}

/* 토글 버튼 그룹 */
.trpg-toggle-group {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.trpg-toggle {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--hair);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-family: var(--trpg-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.trpg-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.trpg-toggle.active.rp { background: var(--trpg-rp); border-color: var(--trpg-rp); }
.trpg-toggle.active.ok { background: var(--trpg-ok); border-color: var(--trpg-ok); }
.trpg-toggle.active.ng { background: var(--trpg-ng); border-color: var(--trpg-ng); }

/* 태그 입력기 */
.trpg-tag-input-wrap { display: flex; flex-direction: column; gap: 6px; }
.trpg-tag-display {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 28px;
}
.trpg-tag-display .trpg-chip {
  cursor: pointer;
  transition: opacity .1s;
}
.trpg-tag-display .trpg-chip:hover { opacity: .6; }
.trpg-tag-add {
  display: flex;
  gap: 5px;
}
.trpg-tag-add input {
  flex: 1;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  color: var(--ink);
  font-family: var(--trpg-mono);
  outline: none;
}
.trpg-tag-add input:focus { border-color: var(--accent); }
.trpg-tag-add button {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.trpg-tag-add button:hover { background: var(--accent); color: #fff; }

/* 폼 제출 버튼 */
.trpg-form-actions {
  padding: 16px 20px;
  border-top: 1px solid var(--hair);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--paper-2);
}
.trpg-btn-submit {
  padding: 9px 22px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.trpg-btn-submit:hover { opacity: .85; }
.trpg-btn-cancel {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* 빈 상태 */
.trpg-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-mute);
  font-size: 14px;
}

/* ─── 상단 액션 바 ─── */
.trpg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
  flex-wrap: wrap;
}
.trpg-topbar-title {
  font-size: 13px;
  color: var(--ink-soft);
  font-family: var(--trpg-mono);
  display: flex;
  align-items: center;
  gap: 6px;
}
.trpg-topbar-count {
  opacity: .5;
  font-size: 11px;
}

/* 헤더 수정 링크 */
.trpg-header-edit-link {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hair-soft);
}
.trpg-header-edit-link a {
  font-size: 11px;
  font-family: var(--trpg-mono);
  color: var(--accent);
  text-decoration: none;
}
.trpg-header-edit-link a:hover { text-decoration: underline; }

/* 작은 버튼 변형 */
.trpg-btn-sm {
  font-size: 12px !important;
  padding: 6px 14px !important;
}

/* 시트 간격 */
.trpg-sheet {
  margin-bottom: 24px;
}

/* ─── 반응형 ─── */
@media (max-width: 600px) {
  .trpg-grid { grid-template-columns: 1fr; }
  .trpg-header {
    grid-template-columns: 1fr;
  }
  .trpg-header-seal { display: none; }
  .trpg-header-time {
    border-left: none;
    border-top: 1px solid var(--hair);
  }
  .trpg-section { grid-template-columns: 36px 1fr; }
  .trpg-section-label { padding: 12px 0; }
  .trpg-section-label span { font-size: 11px; }
  .trpg-form-section { grid-template-columns: 1fr; }
  .trpg-form-section-label { border-right: none; border-bottom: 1px solid var(--hair); }
  .trpg-fields-row { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════
 * 추가: 가로 필드 레이아웃 (RP 섹션용)
 * ═══════════════════════════════════════════ */
.trpg-form-field-h {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hair-soft);
}
.trpg-form-field-h:last-child { border-bottom: none; }
.trpg-form-field-h > label {
  font-family: var(--trpg-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: .05em;
  min-width: 120px;
  padding-top: 6px;
  flex-shrink: 0;
}
.trpg-form-field-h > .trpg-toggle-group,
.trpg-form-field-h > .trpg-tag-input-wrap,
.trpg-form-field-h > input,
.trpg-form-field-h > textarea {
  flex: 1;
}

/* 요일 토글 (7개) */
.trpg-days-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.trpg-days-group .trpg-toggle {
  min-width: 34px;
  text-align: center;
  padding: 5px 8px;
}

/* NOTICE 섹션 (sec-nt) */
.trpg-section.sec-nt .trpg-section-label span { color: var(--trpg-mo); }
.trpg-form-section.sec-nt .sec-name { color: var(--trpg-mo); }

/* ── 보유 룰북 목록 (하단 테이블) ── */
.trpg-rulebook-wrap {
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 24px;
  font-family: var(--trpg-body);
}
.trpg-rulebook-head {
  background: var(--paper-2);
  border-bottom: 1px solid var(--hair);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trpg-rulebook-head .trpg-rb-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.trpg-rulebook-head .trpg-rb-title::before {
  content: '📚';
  font-size: 15px;
}
.trpg-rb-table {
  width: 100%;
  border-collapse: collapse;
}
.trpg-rb-table th {
  background: var(--paper-2);
  font-family: var(--trpg-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: .06em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  font-weight: 500;
}
.trpg-rb-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hair-soft);
  vertical-align: middle;
}
.trpg-rb-table tr:last-child td { border-bottom: none; }
.trpg-rb-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--hair);
  background: var(--paper-2);
  display: block;
}
.trpg-rb-img-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  border: 1px dashed var(--hair);
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ink-mute);
}
.trpg-rb-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.trpg-proficiency {
  font-family: var(--trpg-mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
}
.trpg-proficiency.lv0 { background: var(--paper-2);         color: var(--ink-mute);  border: 1px solid var(--hair-soft); }
.trpg-proficiency.lv1 { background: var(--trpg-ok-bg);      color: var(--trpg-ok);   border: 1px solid var(--trpg-ok-line); }
.trpg-proficiency.lv2 { background: var(--trpg-rp-bg);      color: var(--trpg-rp);   border: 1px solid var(--trpg-rp-line); }
.trpg-proficiency.lv3 { background: rgba(212,175,55,.12);   color: #c9a227;          border: 1px solid rgba(212,175,55,.35); }

/* 폼용 룰북 테이블 */
.trpg-rb-form-table { width: 100%; border-collapse: collapse; }
.trpg-rb-form-table th {
  font-family: var(--trpg-mono);
  font-size: 10px;
  color: var(--ink-mute);
  padding: 6px 8px;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  background: var(--paper-2);
}
.trpg-rb-form-table td { padding: 6px 8px; border-bottom: 1px solid var(--hair-soft); vertical-align: middle; }
.trpg-rb-form-table tr:last-child td { border-bottom: none; }
.trpg-rb-form-table input[type="text"],
.trpg-rb-form-table select {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--ink);
  font-family: var(--trpg-body);
  width: 100%;
  outline: none;
}
.trpg-rb-form-table input[type="text"]:focus,
.trpg-rb-form-table select:focus { border-color: var(--accent); }
.trpg-rb-del {
  background: none;
  border: 1px solid var(--trpg-ng-line);
  color: var(--trpg-ng);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.trpg-rb-del:hover { background: var(--trpg-ng-bg); }
.trpg-rb-add-row {
  padding: 10px 12px;
  border-top: 1px solid var(--hair-soft);
}
.trpg-rb-add-btn {
  background: none;
  border: 1px dashed var(--hair);
  color: var(--ink-mute);
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  transition: all .15s;
}
.trpg-rb-add-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── 요일 체크박스 → 토글 버튼 스타일 ── */
.trpg-day-cb-label {
  display: inline-flex;
  cursor: pointer;
}
.trpg-day-cb-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.trpg-day-cb-label .trpg-toggle {
  cursor: pointer;
  display: inline-block;
}

/* ── 요일별 시간 입력 그리드 ── */
.trpg-day-time-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trpg-day-time-row {
  display: grid;
  grid-template-columns: 30px 10px 1fr;
  align-items: center;
  gap: 8px;
}
.trpg-day-badge {
  font-family: var(--trpg-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  text-align: center;
}
.trpg-day-badge.active {
  color: var(--accent);
}
.trpg-day-sep {
  color: var(--ink-mute);
  font-size: 12px;
  text-align: center;
}
.trpg-day-time-row input[type="text"] {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--ink);
  font-family: var(--trpg-body);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.trpg-day-time-row input[type="text"]:focus {
  border-color: var(--accent);
}

/* ── 시트 뷰 — 요일별 시간 표시 ── */
.trpg-daytime-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.trpg-daytime-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.trpg-daytime-item .trpg-day-badge {
  min-width: 22px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.trpg-daytime-item .trpg-daytime-text {
  color: var(--ink-soft);
}

/* ── 하단 액션 버튼 ── */
.trpg-post-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
  margin-bottom: 24px;
}
.trpg-btn-edit {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity .15s;
}
.trpg-btn-edit:hover { opacity: .8; }
.trpg-btn-delete {
  background: var(--trpg-ng-bg);
  color: var(--trpg-ng);
  border: 1px solid var(--trpg-ng-line);
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 12px;
  cursor: pointer;
  transition: opacity .15s;
}
.trpg-btn-delete:hover { opacity: .8; }

/* ── 룰북 폼 테이블 배경 (흰색) ── */
.trpg-rb-form-table td {
  background: var(--paper);
}
.trpg-rb-form-table tbody {
  background: var(--paper);
}
.trpg-rulebook-wrap .trpg-rb-form-table {
  background: var(--paper);
}

/* ── 시간대 섹션 라벨 색상 ── */
.trpg-section.sec-tm .trpg-section-label span { color: #7c9fbf; }

/* ── 요일별 시간 — 섹션 내 구분선 ── */
.trpg-daytime-divided {
  display: flex;
  flex-direction: column;
}
.trpg-daytime-divided-row {
  display: grid;
  grid-template-columns: 26px 10px 1fr;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair-soft);
}
.trpg-daytime-divided-row:last-child {
  border-bottom: none;
}
.trpg-daytime-divided-row .trpg-day-badge {
  font-family: var(--trpg-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-mute);
  text-align: center;
}
.trpg-daytime-divided-row .trpg-day-badge.active {
  color: var(--accent);
}
.trpg-daytime-divided-row .trpg-daytime-text {
  font-size: 13px;
  color: var(--ink-soft);
}
.trpg-daytime-divided-row .trpg-day-sep {
  color: var(--ink-mute);
  font-size: 12px;
  text-align: center;
}

/* ── 룰북 이미지 크기 확대 + 테두리 제거 ── */
.trpg-rb-img {
  width: 80px  !important;
  height: 80px !important;
  border: none !important;
  border-radius: 6px;
  object-fit: cover;
  display: block;
  background: var(--paper-2);
}
.trpg-rb-img-placeholder {
  width: 80px  !important;
  height: 80px !important;
  border: none !important;
  border-radius: 6px;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--ink-mute);
}

/* ── 모바일 줄바꿈: 단어 단위로 줄바꿈 (한국어 포함) ── */
.trpg-sheet,
.trpg-sheet *,
.trpg-rulebook-wrap,
.trpg-form,
.trpg-form * {
  word-break: keep-all;      /* 한국어: 어절 단위 줄바꿈 */
  overflow-wrap: break-word; /* 긴 영문/URL 강제 줄바꿈  */
}

/* ── 섹션 라벨 굵게 ── */
.trpg-section-label span {
  font-weight: 700 !important;
}

/* ── 룰북 추가 내용 버튼 ── */
.trpg-notes-btn {
  background: none;
  border: 1px dashed var(--hair);
  color: var(--ink-mute);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
  transition: all .15s;
}
.trpg-notes-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.trpg-rb-notes {
  width: 100%;
  margin-top: 4px;
  min-height: 52px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--ink);
  font-family: var(--trpg-body);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.trpg-rb-notes:focus { border-color: var(--accent); }

/* 룰북 소제목 */
.trpg-rb-subtitle {
  padding: 10px 16px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: pre-wrap;
  line-height: 1.65;
  border-top: 1px solid var(--hair-soft);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 섹션 이름·색상 설정 블록 ── */
.trpg-sec-settings { display:flex; flex-direction:column; gap:6px; }
.trpg-sec-setting-row {
  display: grid;
  grid-template-columns: 56px 1fr 38px;
  gap: 8px;
  align-items: center;
}
.trpg-sec-setting-desc {
  font-size: 11px;
  color: var(--ink-mute);
  font-family: var(--trpg-mono);
}
.trpg-sec-setting-row input[type="text"] {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.trpg-sec-setting-row input[type="text"]:focus { border-color:var(--accent); }
.trpg-sec-setting-row input[type="color"] {
  width: 36px;
  height: 32px;
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 2px;
  cursor: pointer;
  background: var(--paper-2);
}

/* ── 추가 섹션 폼 행 ── */
.trpg-extra-sec-row {
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--paper-2);
}
.trpg-extra-sec-header {
  display: grid;
  grid-template-columns: 1fr 38px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.trpg-extra-sec-header input[type="text"] {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.trpg-extra-sec-header input[type="text"]:focus { border-color: var(--accent); }
.trpg-extra-sec-header input[type="color"] {
  width: 36px; height: 32px;
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 2px;
  cursor: pointer;
  background: var(--paper);
}
.trpg-extra-sec-row textarea {
  width: 100%;
  min-height: 80px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--ink);
  font-family: var(--trpg-body);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.trpg-extra-sec-row textarea:focus { border-color: var(--accent); }
.trpg-add-section-btn {
  width: 100%;
  padding: 9px;
  border: 1px dashed var(--hair);
  background: none;
  border-radius: 6px;
  color: var(--ink-mute);
  cursor: pointer;
  font-size: 12px;
  margin-top: 4px;
  transition: all .15s;
}
.trpg-add-section-btn:hover { border-color: var(--accent); color: var(--accent); }