/* 「기출문항」 보기 — .pp 아래에만 적용된다. 색은 style.css 의 변수를 쓰고, 없으면(온라인·시험 쪽) 기본값. */
.pp {
  --pp-card: var(--card, #ffffff);
  --pp-bg: var(--bg, #f6f7f9);
  --pp-ink: var(--ink, #1b1f24);
  --pp-ink-2: var(--ink-2, #5b6470);
  --pp-line: var(--line, #dfe3e8);
  --pp-accent: var(--accent, #1f5fd6);
  --pp-accent-soft: var(--accent-soft, #e8f0fe);
  --pp-warn: var(--warn, #b45309);
  --pp-warn-soft: var(--warn-soft, #fef3c7);
  --pp-radius: var(--radius, 10px);
  /* 목록·PDF 높이. 바깥 화면에서 --pp-height 로 바꿀 수 있다. */
  --pp-h: var(--pp-height, max(520px, calc(100vh - 240px)));
  color: var(--pp-ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .pp {
    --pp-card: var(--card, #1c2127);
    --pp-bg: var(--bg, #14171b);
    --pp-ink: var(--ink, #e8eaed);
    --pp-ink-2: var(--ink-2, #9aa4b0);
    --pp-line: var(--line, #2c333c);
    --pp-accent: var(--accent, #6f9df5);
    --pp-accent-soft: var(--accent-soft, #1d2a42);
    --pp-warn: var(--warn, #f0b849);
    --pp-warn-soft: var(--warn-soft, #3a2f16);
  }
}
.pp *, .pp *::before, .pp *::after { box-sizing: border-box; }
.pp [hidden] { display: none !important; }

.pp-notice {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--pp-radius);
  background: var(--pp-warn-soft);
  color: var(--pp-ink);
  border-left: 3px solid var(--pp-warn);
  font-size: 13px;
}

/* ── 거르기 ── */
.pp-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 13.5px;
}
.pp-filters label { display: inline-flex; align-items: center; gap: 6px; color: var(--pp-ink-2); }
.pp-filters select,
.pp-filters input {
  font: inherit;
  color: var(--pp-ink);
  background: var(--pp-card);
  border: 1px solid var(--pp-line);
  border-radius: 7px;
  padding: 5px 8px;
}
.pp-search { flex: 1 1 220px; }
.pp-search input { flex: 1; min-width: 0; }
.pp-count { color: var(--pp-ink-2); font-variant-numeric: tabular-nums; }

.pp-seg { display: inline-flex; border: 1px solid var(--pp-line); border-radius: 8px; overflow: hidden; }
.pp-seg button {
  font: inherit;
  border: none;
  background: var(--pp-card);
  color: var(--pp-ink-2);
  padding: 5px 12px;
  cursor: pointer;
}
.pp-seg button + button { border-left: 1px solid var(--pp-line); }
.pp-seg button[aria-pressed='true'] { background: var(--pp-accent); color: #fff; }

/* ── 목록 + 보기 ── */
.pp-body {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.pp-list {
  height: var(--pp-h);
  overflow-y: auto;
  background: var(--pp-card);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 4px;
  outline: none;
}
.pp-list:focus-visible { box-shadow: 0 0 0 2px var(--pp-accent); }
.pp-group {
  position: sticky;
  top: -4px;
  background: var(--pp-card);
  padding: 8px 8px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pp-ink-2);
  border-bottom: 1px solid var(--pp-line);
  z-index: 1;
}
.pp-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 7px 9px;
  cursor: pointer;
}
.pp-item:hover { background: var(--pp-bg); }
.pp-item.is-on { background: var(--pp-accent-soft); box-shadow: inset 3px 0 0 var(--pp-accent); }
.pp-item-title { display: block; font-size: 13.5px; line-height: 1.4; }
.pp-item-meta { display: block; font-size: 12px; color: var(--pp-ink-2); margin-top: 1px; }
.pp-item-meta em { font-style: normal; color: var(--pp-warn); }
.pp-empty { margin: 16px 10px; color: var(--pp-ink-2); font-size: 13.5px; }
.pp-error { color: var(--pp-warn); }

.pp-view {
  min-width: 0;
  background: var(--pp-card);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.pp-title { min-width: 0; }
.pp-title strong { display: block; font-size: 15px; line-height: 1.4; }
.pp-sub { display: block; font-size: 12.5px; color: var(--pp-ink-2); }
.pp-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.pp-btn {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--pp-accent);
  color: var(--pp-accent);
  background: var(--pp-card);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.pp-btn.pp-primary { background: var(--pp-accent); color: #fff; }
.pp-btn:hover { filter: brightness(1.08); }
.pp-btn[aria-disabled='true'] {
  border-color: var(--pp-line);
  background: var(--pp-bg);
  color: var(--pp-ink-2);
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.pp-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--pp-line); }
.pp-tabs button {
  font: inherit;
  font-size: 13.5px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 5px 10px;
  color: var(--pp-ink-2);
  cursor: pointer;
}
.pp-tabs button[aria-selected='true'] { color: var(--pp-accent); border-bottom-color: var(--pp-accent); font-weight: 600; }
.pp-tabs button:disabled { opacity: 0.4; cursor: not-allowed; }
.pp-open { margin-left: auto; font-size: 13px; color: var(--pp-accent); text-decoration: none; }
.pp-open:hover { text-decoration: underline; }

.pp-frame-wrap {
  height: var(--pp-h);
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--pp-bg);
  display: flex;
}
.pp-frame { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.pp-placeholder { margin: auto; padding: 20px; color: var(--pp-ink-2); text-align: center; font-size: 14px; }
.pp-mobile-hint { display: none; margin: 0; font-size: 12.5px; color: var(--pp-ink-2); }

/* 좁은 화면(휴대폰): 목록 위, PDF 아래. */
@media (max-width: 760px) {
  .pp-body { grid-template-columns: minmax(0, 1fr); }
  .pp-list { height: auto; max-height: 42vh; }
  .pp-frame-wrap { height: 78vh; }
  .pp-mobile-hint { display: block; }
  .pp-head { flex-direction: column; align-items: stretch; }
  .pp-actions .pp-btn { flex: 1; text-align: center; }
  .pp-search { flex-basis: 100%; }
}