/* Shared paper frames: visual styling only; page layout and behavior stay local. */
body.paper-design {
  --frame-line: #b6aa95;
  --frame-surface: var(--paper-light, #f7f2e7);
  --frame-accent: var(--red-dark);
  --frame-text: var(--ink);
  --frame-muted: var(--muted);
}
html[data-theme="dark"] body.paper-design { --frame-line: #706758; }
body.paper-design :is(
  .hero-overview > section,
  .about-guides > .guide-panel,
  .notice-article,
  .coupon-quick,
  .coupon-item,
  .patch-note-item,
  .party-card,
  .board-news-card,
  .board-article,
  .board-poll-card,
  .board-gallery .board-photo-card,
  .board-list:not(.board-gallery):not(.board-news-feed),
  .music-catalog,
  .chat-panel,
  .dashboard-post-card,
  .record-form,
  .party-admin-card,
  .analytics-section,
  .stat-grid article
) {
  position: relative;
  border: 1px solid var(--frame-line);
  border-radius: 0;
  background: radial-gradient(ellipse at top left, #aa875010, transparent 65%), var(--frame-surface);
  box-shadow: 0 3px 12px #33291e08;
}
body.paper-design :is(
  .hero-overview > section,
  .about-guides > .guide-panel,
  .notice-article,
  .coupon-quick,
  .coupon-item,
  .patch-note-item,
  .party-card,
  .board-news-card,
  .board-article,
  .board-poll-card,
  .board-gallery .board-photo-card,
  .board-list:not(.board-gallery):not(.board-news-feed),
  .music-catalog,
  .chat-panel,
  .dashboard-post-card,
  .record-form,
  .party-admin-card,
  .analytics-section,
  .stat-grid article,
  .auth-panel,
  .music-library .music-player,
  .battle-timer-console,
  .battle-timer-schedule,
  .roster-item
)::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  border: 16px solid transparent;
  border-image: url("/assets/branding/card-corners.svg?v=2") 20 / 16px / 0 stretch;
  pointer-events: none;
}
body.paper-design :is(
  .auth-panel,
  .music-library .music-player,
  .battle-timer-console,
  .battle-timer-schedule
) {
  --frame-line: #706758;
  --frame-accent: #e0a28e;
  --frame-text: #eee8d9;
  --frame-muted: #b2b3af;
  border: 1px solid var(--frame-line);
  border-radius: 0;
}
body.paper-design .auth-panel { position: relative; }
body.paper-design :is(.battle-timer-console, .battle-timer-schedule) { position: relative; padding: 20px; background: #22292b; }
body.paper-design .battle-timer-schedule { align-self: start; }
body.paper-design .roster-item { border: 1px solid var(--frame-line); padding: 8px; border-radius: 0; background: var(--frame-surface); }
body.paper-design .coupon-list { gap: 16px; border-top: 0; }
body.paper-design .coupon-item { padding: 18px; }
body.paper-design .notice-article { padding: 24px; margin-bottom: 24px; }
body.paper-design .analytics-section { padding: 0 18px 18px; }
/* Keep compact list rows compact; the frame belongs to the list as a whole. */
body.paper-design .board-list:not(.board-gallery):not(.board-news-feed) { padding: 0 12px; }
body.paper-design .board-list:empty { border: 0; padding: 0; background: transparent; box-shadow: none; }
body.paper-design .board-list:empty::after { content: none; }
body.paper-design .board-gallery .board-photo-card { border: 1px solid var(--frame-line); border-radius: 0; }
body.paper-design :is(
  .board-heading h1,
  .board-compose-heading h2,
  .board-comment-heading h2,
  .board-news-title,
  .music-heading h1,
  .music-list-heading h2,
  .info-content-heading h2,
  .about-heading h1,
  .about-heading h2,
  .hero-overview-heading h2,
  .guide-title h3,
  .notice-article-heading h2,
  .chat-panel h2,
  .roster .section-heading h1,
  .view-heading h1,
  .dashboard-posts-header h2,
  .analytics-section-heading h2
) {
  border-left: 4px solid var(--frame-accent);
  padding-left: 12px;
  font-family: "Gowun Batang", "Noto Serif KR", serif;
  font-weight: 700;
}
body.paper-design :is(.board-news-title, .notice-article-heading h2) { min-width: 0; }
body.paper-design :is(.music-list-heading, .board-comment-heading, .party-board-heading, .view-heading, .analytics-section-heading) { border-bottom: 1px solid var(--line); }
/* Selected tabs retain the page's aria/class state and keyboard behavior. */
body.paper-design :is(.roster-tabs, .guide-tabs, .auth-tabs, .coupon-toolbar, .board-relationship-filter) { gap: 6px; border: 0; border-radius: 0; }
body.paper-design :is(.roster-tabs button, .guide-tabs button, .auth-tabs button, .coupon-toolbar button, .board-relationship-filter button, .board-editor-switch button) {
  border: 1px solid var(--frame-line);
  border-radius: 0;
  color: var(--frame-muted);
  background: transparent;
}
body.paper-design :is(.roster-tabs button, .guide-tabs button, .auth-tabs button) { padding: 9px 14px; }
body.paper-design :is(.roster-tabs button[aria-selected="true"], .guide-tabs button[aria-selected="true"], .auth-tabs button[aria-selected="true"], .coupon-toolbar button.is-active, .board-relationship-filter button[aria-pressed="true"], .board-editor-switch button[aria-pressed="true"]) {
  border-color: var(--frame-accent);
  color: var(--frame-accent);
  background: #a76e4110;
  box-shadow: inset 3px 0 var(--frame-accent);
}
body.paper-design :is(.roster-tabs button, .guide-tabs button, .auth-tabs button, .coupon-toolbar button, .board-relationship-filter button, .board-editor-switch button):focus-visible { outline: 2px solid var(--frame-accent); outline-offset: 2px; }
@media (max-width: 700px) {
  body.paper-design .notice-article { padding: 20px 16px; }
  body.paper-design :is(.battle-timer-console, .battle-timer-schedule) { padding: 16px; }
  body.paper-design .coupon-item { padding: 16px; }
}

/* The compact player stops being sticky, but still anchors its own corners. */
@media (max-width: 760px), (min-width: 761px) and (max-height: 680px) {
  body.paper-design .music-library .music-player { position: relative; }
}