/*! 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*="..."]`)를 쓰지 않는다. 실재하는 클래스만 적는다.
*
* 이 파일이 하는 일은 '빼기'가 아니라 '더하기'다.
* 그림자를 세 겹으로 얹고, 모서리를 고르고, 초점 링을 만들고, 표를 정리한다.
*
* ■ 되돌리기
* 한 줄만 지우면 각 사이트 원래 디자인으로 완전히 복귀한다.
* ============================================================================ */
: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;
}
}
/* ══════════════════════════════════════════════════════════════════════════
* AI교과서 전용 보정 (이 사이트의 onae-pro.css 사본에만 붙는다)
* 2026-08-02 contrast_audit.py 실측 기준.
*
* 이 사이트는 어두운 화면이다. 다른 사이트와 반대로 '글자를 더 밝게' 올려야 한다.
* .hero-eyebrow 2.84 : 1
* .logo-mark 2.89 : 1
* .btn-primary 4.29 : 1
*
* ★ 함께 고치는 것 — 인쇄
* 이 사이트의 어두운 배경은 body::before (position:fixed) 로 그려진다.
* 고정 배경은 인쇄되지 않는다. 그래서 지금 상태로 출력하면
* 흰 종이에 거의 흰 글자가 찍힌다 — 학교에서 자료를 뽑아 쓰는 곳이라 이게 실제 문제다.
* 인쇄용으로 밝은 판·검은 글자를 따로 지정한다.
* ══════════════════════════════════════════════════════════════════════════ */
.hero-eyebrow{ color:#C9D6FF !important; }
/* 로고 배지 — 인디고→시안 그라디언트가 밝아 흰 글자가 2.5:1 밖에 안 나온다.
같은 두 색을 한 단계 낮춰 색감은 유지하고 대비만 올린다. */
.logo-mark{
color:#FFFFFF !important; font-weight:800 !important;
background-image:linear-gradient(135deg,#3F41B0,#0E7A90) !important;
}
/* 1차 버튼 — 보라 그라디언트 위 흰 글자 4.29 : 1 */
.btn-primary{
color:#FFFFFF !important; font-weight:700 !important;
background-image:linear-gradient(120deg,#4B4ECB,#7C34C9) !important;
}
/* 인쇄 — 어두운 배경이 사라져도 읽히게 */
@media print{
html,body{ background:#fff !important; color:#111 !important; }
h1,h2,h3,h4,p,li,td,th,span,div,a{ color:#111 !important; }
.hero,.section,.card,.book-card,.section-head{ background:#fff !important; border-color:#ccc !important; }
.hero-eyebrow,.logo-mark{ color:#333 !important; }
.btn,.btn-primary{ background:none !important; color:#111 !important; border:1px solid #666 !important; }
}
/* == 2026-08-04 : .onae-ico 크기 규칙 누락 (색이 아니라 크기) =================
onae-icons.js 가 이모지를