/*! onae-pro.css v2.0.0 — 오늘과내일 공통 마감 레이어 (고급 방향)
 * ============================================================================
 * ■ v1 을 왜 통째로 버렸나 — 2026-08-02 브라우저 실측
 *
 *   v1 은 `[class*="card"]`, `[class*="panel"]` 같은 **추측 선택자**로
 *   화면 전체를 흰색·무그림자로 덮었다. 그 결과 실제로 이런 일이 벌어졌다.
 *
 *   · 학교생활끝판왕  .herocard 는 남색 그라디언트 위 흰 글자로 설계된 카드다.
 *                   v1 이 배경을 흰색으로 덮어써서 흰 글자만 남았다.
 *                   「내 계열 고르기」 6개 카드의 글자 대비 = 1.06 : 1 (사실상 안 보임)
 *   · 면접끝판왕    .stat-card 짙은 남색 배경이 흰색으로 덮여 583·7·63 이 안 읽혔다.
 *   · 전 사이트     .card box-shadow:none → 평면. "만들다 중단한" 인상의 직접 원인.
 *
 *   즉 v1 은 "고급스럽게 만든다"면서 실제로는 화면을 망가뜨리고 있었다.
 *
 * ■ v2 의 규칙 — 딱 두 줄로 요약된다
 *   ① 배경색·배경이미지는 **절대 건드리지 않는다.**
 *      각 사이트가 의도한 색이 있고, 그 위의 글자색이 그 색에 맞춰져 있다.
 *   ② 추측 선택자(`[class*="..."]`)를 쓰지 않는다. 실재하는 클래스만 적는다.
 *
 *   이 파일이 하는 일은 '빼기'가 아니라 '더하기'다.
 *   그림자를 세 겹으로 얹고, 모서리를 고르고, 초점 링을 만들고, 표를 정리한다.
 *
 * ■ 되돌리기
 *   <link> 한 줄만 지우면 각 사이트 원래 디자인으로 완전히 복귀한다.
 * ============================================================================ */

:root{
  /* 세 겹이 겹쳐야 고급스럽다 — 한 겹 진한 그림자는 싸구려로 보인다 */
  --pro-sh1:0 1px 2px rgba(14,26,44,.05), 0 1px 3px rgba(14,26,44,.04);
  --pro-sh2:0 1px 2px rgba(14,26,44,.05), 0 4px 10px -2px rgba(14,26,44,.07), 0 12px 28px -8px rgba(14,26,44,.10);
  --pro-sh3:0 2px 4px rgba(14,26,44,.06), 0 12px 24px -6px rgba(14,26,44,.11), 0 28px 56px -18px rgba(14,26,44,.16);
  --pro-line:#E2E8F2;
  --pro-line-strong:#CFD8E6;
  --pro-focus:#1E4B8F;
  --pro-focus-soft:#E8F0F9;
}

/* ══════════════════════════════════════════════════════════
 * 1. 카드 — 그림자만 얹는다. 배경·글자색은 손대지 않는다.
 *    (아래 목록은 6개 사이트에서 실제로 쓰이는 클래스만 적었다)
 * ══════════════════════════════════════════════════════════ */
.card, .topic-card, .book-card, .tier-card, .q-card,
.herocard, .obcard, .plan, .panel, .stat-card, .infocard{
  box-shadow:var(--pro-sh2);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
}
/* 눌러서 이동하는 카드만 떠오른다 — 그냥 판은 가만히 있어야 한다 */
a.card:hover, .card.link:hover, .card[href]:hover,
.topic-card:hover, .book-card:hover, .herocard.clickable:hover,
.obcard:hover, .stat-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--pro-sh3);
}

/* ══════════════════════════════════════════════════════════
 * 2. 초점 링 — 키보드로 쓰는 사람을 위한 최소한
 * ══════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--pro-focus);
  outline-offset:2px;
  border-radius:6px;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--pro-focus);
  box-shadow:0 0 0 3px var(--pro-focus-soft);
}

/* ══════════════════════════════════════════════════════════
 * 3. 표 — 세로선을 지우고 숫자를 고정폭으로. 읽는 속도가 달라진다.
 * ══════════════════════════════════════════════════════════ */
table td, table th{ font-variant-numeric:tabular-nums; }
.tbl, table.ptable, table.data{
  border-collapse:separate;
  border-spacing:0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--pro-sh2);
}
.tbl th, table.ptable th, table.data th{
  background:linear-gradient(180deg,#F9FBFD,#F2F6FA);
  border:0; border-bottom:1px solid var(--pro-line);
  font-weight:700; letter-spacing:0;
}
.tbl td, table.ptable td, table.data td{
  border:0; border-bottom:1px solid #EFF3F8;
}
.tbl tr:last-child td, table.ptable tr:last-child td, table.data tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover td, table.ptable tbody tr:hover td{ background:#FAFCFE; }

/* ══════════════════════════════════════════════════════════
 * 4. 떠 있어야 하는 것 — 모달·드롭다운은 확실히 띄운다
 * ══════════════════════════════════════════════════════════ */
.modal .panel, .modal-panel, .dropdown, .popover, .tooltip,
[role="dialog"] > .panel{
  box-shadow:var(--pro-sh3);
}

/* ══════════════════════════════════════════════════════════
 * 5. 한글 조판 — 낱말이 끊기지 않게, 제목 줄이 고르게
 * ══════════════════════════════════════════════════════════ */
h1,h2,h3,h4,p,li,dd,dt,figcaption,label,.lead{
  word-break:keep-all;
  overflow-wrap:break-word;
}
h1,h2,h3{ text-wrap:balance; }

/* ══════════════════════════════════════════════════════════
 * 6. 워터마크 — 있어야 하지만, 화면을 삼키면 안 된다
 *    (학교생활끝판왕 #watermark. 다른 사이트엔 이 id 가 없으니 무해하다)
 *    v1 상태: opacity .06 · padding 26/34 · scale(1.3) · z-index 99999
 *      → 글자가 촘촘히 깔려 본문 위를 덮고, 모달 위에까지 얹혀 화면이 지저분했다.
 *    v2   : 간격을 넓혀 밀도를 낮추고, 모달 아래로 내린다. 보호 기능은 그대로.
 * ══════════════════════════════════════════════════════════ */
#watermark{
  opacity:.038 !important;
  z-index:40 !important;
  transform:rotate(-24deg) scale(1.15) !important;
}
#watermark span{
  padding:52px 78px !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
}
@media print{
  /* 인쇄본은 무단복제 억제가 목적이므로 조금 더 진하게 */
  #watermark{ opacity:.10 !important; }
}
@media (max-width:600px){
  #watermark span{ padding:38px 52px !important; }
}

/* ══════════════════════════════════════════════════════════
 * 7. 인쇄 — 그림자는 잉크만 먹는다
 * ══════════════════════════════════════════════════════════ */
@media print{
  .card, .topic-card, .book-card, .tier-card, .q-card,
  .herocard, .obcard, .plan, .panel, .stat-card, .infocard,
  .tbl, table.ptable, table.data{ box-shadow:none !important; }
}

/* ══════════════════════════════════════════════════════════
 * 8. 움직임을 줄이도록 설정한 사용자 존중
 * ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .card, .topic-card, .book-card, .tier-card, .q-card,
  .herocard, .obcard, .stat-card{
    transition:none !important;
    transform:none !important;
  }
}