/* ============================================================================
ai-edit.css — AI교과서 홈(index.html) 지면 교정 (여섯 번째 사이트)
생성 2026-08-06 · bookgen/web/DESIGN-CANON.md 처방을 실측 기반으로 적용한다.
참고 구현: worksheet/css/ws-edit.css · study/study-edit.css (같은 방법, 같은 순서)
── 울타리 ──────────────────────────────────────────────────────────────
이 파일은 index.html 에서만 부른다(다른 페이지는 이 파일을 부르지 않는다).
그래도 안전하게 body.onae-themed 로 가둔다 — 이미 index.html 에
있는 클래스이고(class="onae-themed"), 새 클래스를 심지 않는다. 이 사이트는
해시라우터 SPA라 index.html 하나가 모든 화면을 그리지만, 아래 선택자들은
전부 js/render.js 의 renderHome()이 만드는 홈 전용 클래스(.hero-v2,
.quicklink-card, .card-grid .book-card, .trust-audience-grid 등)라
다른 라우트(#/pricing 등)의 콘텐츠에는 매치되지 않는다. 헤더·푸터(.site-header,
.site-footer, .main-nav)는 모든 라우트에서 공유되는 앱 셸이라 site-wide로
적용되는 것이 맞다(canon 5개 사이트에서도 같은 방식).
── 고치기 전 실측 (Chromium 1194 · playwright · python http.server 정적
서빙 · 1280px/360px × 이 사이트 실제 테마 스위처 3종 dark/light/cute
[localStorage aitb_theme, js/theme.js가 body[data-theme] 를 바꾼다.
DESIGN-CANON의 onae 3종(default/inverse/cute, html[data-onae-theme])은
건드리지 않는 채로 — 이게 이 사이트를 지배하는 실제 스위치다] ──
㉠ 상자(#app 밑 최상위 7개 section 중 radius+그림자/테두리 겹침) : 1개
(.hero 만, radius 24px + 2겹 그림자). 나머지 6개 section 자체는
박스 스타일이 없었다 — 이 사이트의 문제는 "절"이 아니라 "낱장 카드"
쪽에 있었다: 중첩 카드 중 박스(radius+그림자 동시) 99개 —
.book-card 8(radius 20px·3겹 그림자) · .quicklink-card 8(radius 20px) ·
.gallery-item 74(radius 16px, 갤러리 스트립 카드뉴스) ·
.hero-trust li 4(radius 999px 필) · .trust-badge-pill 1 · .member-hint 1.
㉡ 명암비 4.5:1(큰글자 3:1) 미달 실패 건수(main+header+footer 전수,
효과적 배경색 역산) — dark_1280 189 / dark_360 180 / light_1280 46 /
light_360 46 / cute_1280 66 / cute_360 55. 원인 소스 확인: ai-theme.css
가 어두운 배경을 전제로 밝은 글자색(#e7ecf6 등)을 짝지어 둔 채였고,
onae-themes.css의 [data-onae-theme] body.onae-themed(명시도 0,2,1)가
기본값(default)에서 배경을 흰 종이 #ffffff로 고정해 짝이 어긋났다
(dark 테마일 때 가장 크게 터짐 — 189/180건). light/cute 테마도
faq-q-text·faq-q-icon·faq-tab(footer FAQ 위젯, ai-theme.css가
`.site-footer span,p,li{color:#c2cfe8}` 처럼 태그 단위로 심어 둔 밝은
회색을 흰 위젯 카드 위에 얹어서)와 btn-buy-icon(교보문고 구매 아이콘,
흰 바탕에 --color-gold 4.15:1)에서 공통으로 실패했다.
그라디언트 배경 위 글자는 단색 배경 가정 계산기로는 값을 못 믿어
별도 집계했다(gradient-path 74~174건, 대부분 .gallery-item-caption —
스크린샷으로 확인: 어두운 스크림(rgba(11,18,32,.85)) 위 흰 글자로
실제로는 문제없다, 이 파일에서 건드리지 않는다).
㉢ 360px 폭 가로 넘침 원소(scrollWidth > clientWidth+2, main+header+footer
전수) — dark_360 13개 · light_360 5개 · cute_360 5개. 원인 두 가지:
(a) .quicklink-grid/.trust-audience-grid 가 auto-fill(96px)/여백
부족으로 트랙을 못 줄임(main 자체가 442px로 밀림) — 사전 결함.
(b) ai-theme.css:608 `@media(max-width:767px) [class*="label"]{
white-space:nowrap}` 이 클래스명에 "label"이 들어간 원소 전부를
부분일치로 겨눠서 .trust-audience-label 도 강제로 한 줄이 됐다 —
overflow-wrap만으로는 이 nowrap을 못 이긴다(실측: 안 꺾임). 이 파일
11절에서 두 원인 다 실측해 고쳤다.
㉣ 위계 — h1(hero) 30px/800, h2(.section-head) 24px/750, h3(.trust-
reviews-heading 등) 19px/700 — Pretendard 한 벌, 굵기도 700~800으로
사실상 크기 차이만 있었다(수학 사고와 같은 모양).
㉤ 강조색 계열 — 실측(getComputedStyle, 렌더된 값): hero 배경 남색
그라디언트(#0e2a50→#16203a) · 버튼/hero h1 그라디언트 인디고-보라
(#4b4ecb→#7c34c9, 라이트 테마는 #4f46e5→#3730a3) · tier-badge 초록
(#166534) · gallery-item-tag 주황(#e2431f) · member-hint 금색+인디고
2색 그라디언트(rgba(244,192,74)+rgba(99,102,241)) · hero-eyebrow bg
금색(rgba(212,168,67)). 최소 5~6계열이 한 화면에 동시에 있었다.
㉥ 이모지 — 렌더된 텍스트 노드(display:none 제외) 42~59개(테마·폭별
변동은 헤더 언어 드롭다운 국기 이모지·썸네일 폴백 아이콘의 표시
조건에 따른 것). 대표: 🛒(교보문고 구매, book-card 당 1개=8개) ·
🔒(멤버십 잠금) · 🎒🎓🍎🌿🏫(대상별 바로가기 폴백 아이콘, 원래
![]()
가 로드되면 display:none인데 이 컨테이너 사본엔
assets/covers/thumb/*.png 가 없어 전부 폴백 이모지가 뜬다 — 사전
결함, 실제 배포본에선 썸네일이 뜬다) · 🎨🌙☀🍭(테마 스위처) ·
🇰🇷 등 국기(언어 스위처, 문자 2개가 한 이모지로 묶여 세는 방식에
따라 갈라져 잡힌다).
── 회장님 방침 — 박영스토리(타사 출간) 도서 고지 문구 ─────────────────
js/auth.js:549 BOOK_SALE_NOTICE = "이 책은 다른 출판사에서 나온 책입니다.
구독에 포함되지 않으며, 우리 사이트에서 판매하지 않습니다. 아래 서점에서
구입하실 수 있습니다." — 홈 화면 자체에는 이 문구가 없다(홈엔 🛒 구매
아이콘만 있다, js/render.js:167). 이 문구는 구매 모달(openPurchaseModal,
#/pricing → "서점 링크 보기")에서만 나온다. 실측(모달 열어 .modal-note
중 이 문구를 담은 요소): 고치기 전 이미 다크 배경 rgb(255,253,248) 위
글자 rgb(69,75,99) = 8.47:1, 13.12px — 통과 상태였다. 이 파일은 지금까지
이 요소를 건드리지 않아 왔는데, 회장님 방침이 "더 눈에 들어와야 한다"이므로
12절에서 `#purchaseBookSelect + .modal-note`(HTML 안 바꾸고 인접 형제
선택자로 정확히 짚음)에 강조색 왼쪽 괘선 + 옅은 판 + 굵게를 얹어
더 두드러지게 만든다(대비는 8.47:1 → 8.62:1로 유지·상향, 크기는
13.12px → 13.5px, 굵기 400 → 600).
── 지키는 것 ───────────────────────────────────────────────────────────
기존 CSS 파일 바이트는 고치지 않는다. index.html 은 앞에
한 줄만 늘었다. 새 클래스를 심지 않았다 — 전부 이미 있던 선택자다.
========================================================================== */
/* ── 0. 이 사이트만의 색·서체 — 강조색은 하나, #4A3F6B 먹보라 ─────────────
결 : 수업 설계 — 단계와 절차가 주인공. */
body.onae-themed{
--atb-accent:#4A3F6B;
--atb-accent-dark:#382F52;
--atb-accent-2:#EFECF3; /* 강조색 10%를 흰 지면에 섞은 옅은 판 */
--atb-ink:#16181C;
--atb-ink-2:#3A3F47;
--atb-ink-3:#5A6270;
--atb-rule:#D9D3E1; /* 절을 나누는 괘선 */
--atb-rule-2:#EAE7EF; /* 줄을 나누는 옅은 괘선 */
--atb-paper:#FFFFFF;
--atb-serif:"Noto Serif KR","Noto Serif CJK KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;
--atb-mono:ui-monospace,"SFMono-Regular",Menlo,"DejaVu Sans Mono",monospace;
}
/* ── 1. 지면 — 판을 띄우지 않는다 ────────────────────────────────────────
배경과 글자색을 한 규칙 안에서 짝으로 고정한다. 세 onae 테마
(default/inverse/cute) 모두 같은 짝 — 흰 종이 + 먹색.
onae-themes.css 의 [data-onae-theme] body.onae-themed (0,2,1) 와
같은 명시도로 써서, 뒤에 실리는 이 파일이 이긴다. */
[data-onae-theme] body.onae-themed,
body.onae-themed{
background:var(--atb-paper) !important;
color:var(--atb-ink);
}
body.onae-themed{ color-scheme:light }
body.onae-themed::before,
body.onae-themed::after,
body.onae-themed #aiParticles{ content:none !important; display:none !important; }
body.onae-themed .app-main{ max-width:1080px; }
/* ── 2. 카드 해체 — main 바로 밑 덩이는 상자가 아니라 「절」이다 ──────────
테두리·그림자·모서리·아래 여백을 걷어내고, 위쪽 괘선 하나와 여백으로 나눈다.
괘선 굵기 두 가지로 절의 무게를 다르게 한다 — 위계의 넷째 축. */
body.onae-themed .app-main > .section{
background:transparent;
border:0;
border-top:2px solid var(--atb-ink);
border-radius:0;
box-shadow:none;
margin:0;
padding:40px 0 44px;
}
body.onae-themed .app-main > .hero + .section{ border-top:2px solid var(--atb-ink); }
body.onae-themed .app-main > .section + .section{ margin-top:0; }
/* ── 3. 강조색 하나 — 히어로(맨 위 지도판)만 무거운 판으로 남긴다 ────────
전부 평평하면 눈이 처음 앉을 자리가 없다. 유일하게 무거운 판으로 남기되
그라디언트·궤도(orb)·네온 글자를 걷고 강조색 단색으로 통일한다. */
/* theme-light.css/theme-cute.css 가 body[data-theme="light"/"cute"] .hero 에
!important 로 자기 판(밝은 라벤더/복숭아 그라디언트)을 얹는다(명시도 0,2,1 —
이 파일의 body.onae-themed .hero 와 같다). aitb_theme 세 상태(기본·라이트·큐트)
모두 강조색 하나로 고정하려면 이 파일도 !important 로 맞서야 한다. */
body.onae-themed .hero{
background:var(--atb-accent) !important;
background-image:none !important;
color:#FFFFFF !important;
border-radius:0 !important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
padding:3.4rem 2.5rem;
margin-bottom:0;
isolation:auto;
}
body.onae-themed .hero-bg,
body.onae-themed .hero-orb{ display:none !important; }
body.onae-themed .hero-eyebrow{
font-family:var(--onae-font, system-ui, sans-serif);
font-size:11px;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
color:#D9D0E6 !important; /* on #4A3F6B = 6.02 : 1 */
background:transparent !important;
border:0 !important;
}
body.onae-themed .hero h1{
font-family:var(--atb-serif);
background:none !important;
-webkit-text-fill-color:#FFFFFF !important;
color:#FFFFFF !important; /* on #4A3F6B = 8.62 : 1 */
animation:none !important;
font-weight:900;
letter-spacing:-.02em;
line-height:1.38;
}
body.onae-themed .hero p{
color:#EDE9F3 !important; /* on #4A3F6B = 8.05 : 1 */
opacity:1 !important;
font-size:1rem;
line-height:1.75;
max-width:640px;
}
/* 히어로 버튼 — 「누르는 것」만 상자(모서리 2px) */
body.onae-themed .hero .btn-primary{
background:#FFFFFF !important;
color:var(--atb-accent) !important; /* on #FFFFFF = 8.62 : 1 */
border:1px solid #FFFFFF !important;
border-radius:16px!important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
font-weight:700;
}
body.onae-themed .hero .btn-primary:hover{ background:#EFECF3 !important; transform:none; filter:none; box-shadow:none; }
body.onae-themed .hero .btn-outline,
body.onae-themed .hero .btn-hero-secondary{
background:transparent !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,0.6) !important;
border-radius:2px;
}
body.onae-themed .hero .btn-outline:hover,
body.onae-themed .hero .btn-hero-secondary:hover{ background:rgba(255,255,255,0.12) !important; border-color:#FFFFFF !important; color:#FFFFFF !important; transform:none; }
/* 히어로 숫자 4개 — 상자가 아니라 표의 한 줄(세로 괘선으로 칸을 나눈다).
누르는 것이 아니므로 상자를 없앤다. 숫자는 모노스페이스. */
body.onae-themed .hero-stats{
background:transparent;
border:0;
gap:0;
grid-template-columns:repeat(4, minmax(0,1fr));
}
body.onae-themed .stat-badge{
background:transparent !important;
border:0 !important;
border-left:1px solid rgba(255,255,255,0.28);
border-radius:0;
backdrop-filter:none;
padding:2px 14px;
text-align:left;
}
body.onae-themed .hero-stats .stat-badge:first-child{ border-left:0; padding-left:0; }
body.onae-themed .hero-stats .stat-badge{
border:0 !important;
border-left:1px solid rgba(255,255,255,0.28) !important;
background:transparent !important;
backdrop-filter:none !important;
}
body.onae-themed .hero-stats .stat-badge:first-child{ border-left:0 !important; }
body.onae-themed .stat-num{
font-family:var(--atb-mono);
font-weight:700;
color:#FFFFFF !important; /* on #4A3F6B = 8.62 : 1 */
-webkit-text-fill-color:#FFFFFF !important;
background:none !important;
font-size:1.5rem;
}
body.onae-themed .stat-label{
color:#D9D0E6 !important; /* on #4A3F6B = 6.02 : 1 */
font-family:var(--onae-font, system-ui, sans-serif);
}
@media (max-width:640px){
body.onae-themed .hero-stats{ grid-template-columns:repeat(2,1fr); row-gap:14px; }
body.onae-themed .hero-stats .stat-badge:nth-child(3){ border-left:0; padding-left:0; }
}
/* ── 4. 표제는 세리프, 라벨은 산세리프 ───────────────────────────────────
위계를 만드는 다섯 축 : 서체계열 · 자간 · 색 · 괘선 · 여백.
ai-theme.css 의 h2 앞 색막대(위젯 이름표처럼 보이던 것)를 지운다. */
body.onae-themed .section-head{
display:block;
margin-bottom:20px;
}
body.onae-themed .section-head h2{
position:static;
padding-left:0;
font-family:var(--atb-serif);
font-size:27px;
font-weight:900;
letter-spacing:-.03em;
line-height:1.34;
color:var(--atb-ink);
margin:0 0 8px;
}
body.onae-themed .section-head h2::before{ display:none !important; content:none !important; }
body.onae-themed .section-sub{
font-family:var(--onae-font, system-ui, sans-serif);
font-size:13.5px;
font-weight:400;
letter-spacing:0;
color:var(--atb-ink-3); /* on #FFFFFF ≈ 6.28 : 1 */
}
/* ── 5. 「무료 체험 신청하기」 절 — 눌러서 남는 상자가 아니라 절 안 묶음 ── */
body.onae-themed #lead-trial .book-card{
background:transparent;
border:0;
border-left:3px solid var(--atb-accent);
border-radius:0;
box-shadow:none;
padding:2px 0 2px 20px;
}
body.onae-themed #lead-trial .book-card:hover{ transform:none; box-shadow:none; border-color:var(--atb-accent); }
body.onae-themed #lead-trial .book-card-title{
font-family:var(--atb-serif);
font-size:17px;
font-weight:700;
color:var(--atb-ink);
margin:0 0 6px;
}
body.onae-themed #lead-trial .book-card-foot{
color:var(--atb-ink-3);
font-size:13.5px;
}
/* growth-engine 이 주입하는 신청 폼 — 단추만 상자로 남긴다 */
body.onae-themed [data-growth-form] input,
body.onae-themed [data-growth-form] select{
border:1px solid var(--atb-rule);
border-radius:2px;
color:var(--atb-ink);
background:#FFFFFF;
}
body.onae-themed [data-growth-form] button,
body.onae-themed [data-growth-form] .btn{
background:var(--atb-accent) !important;
color:#FFFFFF !important; /* 8.62 : 1 */
border:1px solid var(--atb-accent) !important;
border-radius:16px!important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
}
/* ── 6. 「대상별 바로가기」 카드 — 전체가 링크다. 누르는 것이므로
상자로 남기되 모서리를 2px 로, 그림자를 지운다. ai-theme.css 의
다크글래스(rgba(18,24,46,.55) !important)를 흰 종이 카드로 되짝짓는다. */
body.onae-themed a.book-card,
body.onae-themed a.book-card *{
background:#FFFFFF !important;
color:var(--atb-ink) !important;
border:1px solid var(--atb-rule) !important;
border-radius:16px!important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
backdrop-filter:none !important;
}
body.onae-themed a.book-card{
transition:border-color .15s ease, background .15s ease;
}
body.onae-themed a.book-card:hover{
border-color:var(--atb-accent) !important;
background:var(--atb-accent-2) !important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
transform:translateY(-2px)!important;
}
body.onae-themed a.book-card:hover *{ background:transparent !important; }
body.onae-themed .book-card-title{
font-family:var(--atb-serif);
font-size:17px;
font-weight:700;
letter-spacing:-.01em;
color:var(--atb-ink) !important;
margin:0 0 6px;
}
body.onae-themed .book-card-audience{
font-family:var(--onae-font, system-ui, sans-serif);
font-size:11px;
font-weight:700;
letter-spacing:.1em;
color:var(--atb-accent) !important;
margin:0 0 10px;
}
body.onae-themed .book-card-foot{
color:var(--atb-ink-3) !important;
font-size:13.5px;
line-height:1.7;
}
body.onae-themed .book-card-body{ padding:22px 20px; }
/* ── 7. 헤더 — 강조색 단일 띠. 유리(글래스)·네온 테두리를 걷는다 ────────── */
body.onae-themed .site-header{
background:var(--atb-accent) !important;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border-bottom:0;
box-shadow:none;
}
body.onae-themed .site-header::after{ display:none; }
body.onae-themed .logo-text{
font-family:var(--atb-serif);
color:#FFFFFF !important;
font-weight:900;
}
body.onae-themed .logo-mark{
background:#FFFFFF !important;
color:var(--atb-accent) !important;
box-shadow:none;
}
body.onae-themed .main-nav a{
color:#E4DCEC !important; /* on #4A3F6B = 5.53 : 1 */
font-weight:600;
}
body.onae-themed .main-nav a::after{ display:none; }
body.onae-themed .main-nav a:hover,
body.onae-themed .main-nav a.active,
body.onae-themed .main-nav a.is-active{
color:#FFFFFF !important;
background:rgba(255,255,255,0.14) !important;
}
body.onae-themed .chrome-controls-mount{
background:transparent !important;
border-color:transparent !important;
}
body.onae-themed .theme-switcher-btn,
body.onae-themed .lang-switcher-btn{
background:rgba(255,255,255,0.12) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,0.4) !important;
}
body.onae-themed .theme-switcher-btn:hover,
body.onae-themed .lang-switcher-btn:hover{
border-color:#FFFFFF !important;
color:#FFFFFF !important;
box-shadow:none;
}
body.onae-themed .theme-dropdown,
body.onae-themed .lang-dropdown{
background:#FFFFFF;
border:1px solid var(--atb-rule);
box-shadow:0 12px 30px rgba(22,24,28,0.18);
}
body.onae-themed .theme-dropdown li button,
body.onae-themed .lang-dropdown li button{ color:var(--atb-ink); }
body.onae-themed .theme-dropdown li button:hover,
body.onae-themed .lang-dropdown li button:hover{ background:var(--atb-accent-2); }
body.onae-themed .theme-dropdown li button.is-active,
body.onae-themed .lang-dropdown li button.is-active{
background:var(--atb-accent-2);
color:var(--atb-accent);
}
body.onae-themed .lang-dropdown-note{ color:var(--atb-ink-3); }
body.onae-themed .role-badge{
background:rgba(255,255,255,0.16) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,0.4);
}
body.onae-themed .role-switcher-btn{
background:rgba(255,255,255,0.1) !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,0.4) !important;
border-radius:2px;
}
body.onae-themed .role-switcher-btn:hover{ border-color:#FFFFFF !important; box-shadow:none; }
body.onae-themed .role-dropdown{
background:#FFFFFF;
border:1px solid var(--atb-rule);
}
body.onae-themed .role-dropdown-caption{ color:var(--atb-ink-3); }
body.onae-themed .role-dropdown li button{ color:var(--atb-ink); }
body.onae-themed .egg-badge{
background:rgba(255,255,255,0.12);
color:#FFFFFF;
border:1px solid rgba(255,255,255,0.4);
border-radius:2px;
}
body.onae-themed .egg-badge-balance{
font-family:var(--atb-mono);
font-weight:700;
}
body.onae-themed .logpay-auth-status{ color:#FFFFFF; }
body.onae-themed .logpay-auth-login input[type="email"]{
background:rgba(255,255,255,0.14);
border:1px solid rgba(255,255,255,0.4);
color:#FFFFFF;
}
body.onae-themed .logpay-auth-login input[type="email"]::placeholder{ color:#E4DCEC; }
body.onae-themed #logpayLoginBtn,
body.onae-themed #logpayLogoutBtn{
background:rgba(255,255,255,0.14);
color:#FFFFFF;
border:1px solid rgba(255,255,255,0.4);
border-radius:2px;
}
/* ── 8. 여백에 리듬을 준다 ───────────────────────────────────────────────
절 40px · 절 안 묶음 26px · 표제-설명 8px · 줄 10px. 전부 같은 숨이면
어디가 한 덩이인지 알 수 없다. */
body.onae-themed .card-grid{ gap:26px 20px; }
body.onae-themed [data-lifecycle="banner"]:empty{ margin:0; }
/* ── 9. 푸터 — 절 경계 괘선, 먹색/회색 계열만 ────────────────────────── */
body.onae-themed .site-footer{
background:#FFFFFF !important;
border-top:2px solid var(--atb-ink);
color:var(--atb-ink-3) !important;
}
body.onae-themed .site-footer p,
body.onae-themed .site-footer li,
body.onae-themed .site-footer span{ color:var(--atb-ink-3); }
body.onae-themed .footer-heading{
font-family:var(--onae-font, system-ui, sans-serif);
font-size:11px;
font-weight:700;
letter-spacing:.14em;
color:var(--atb-accent) !important;
}
body.onae-themed .footer-logo{
font-family:var(--atb-serif);
font-weight:900;
color:var(--atb-ink) !important;
}
body.onae-themed .footer-desc,
body.onae-themed .footer-copyright-note,
body.onae-themed .footer-booklist,
body.onae-themed .footer-booklist li{ color:var(--atb-ink-3) !important; }
body.onae-themed .footer-links a{ color:var(--atb-ink-2) !important; }
body.onae-themed .footer-links a:hover{ color:var(--atb-accent) !important; }
body.onae-themed .footer-bottom{ color:var(--atb-ink-3); border-top:1px solid var(--atb-rule-2); }
body.onae-themed .footer-cs-block{ border-top-color:var(--atb-rule) !important; }
/* FAQ·문의함 위젯 — 위젯 자신은 이미 흰 카드로 설계돼 있는데(faq-widget.css),
ai-theme.css 의 `.site-footer span/p/li{color:#c2cfe8}` 처럼 태그 단위로
심어 둔 규칙이 위젯 안 글자를 다시 밝게 덮어써서 흰 판 위에서 안 보였다.
위젯을 감싸는 자리에서 명시도를 위젯 자기 색보다 높여 되짚는다. */
body.onae-themed .site-footer .faq-widget,
body.onae-themed .site-footer .faq-widget *,
body.onae-themed .site-footer .inbox-widget,
body.onae-themed .site-footer .inbox-widget *{
color:#334155 !important;
}
body.onae-themed .site-footer .faq-widget h2,
body.onae-themed .site-footer .faq-widget h3,
body.onae-themed .site-footer .inbox-widget h2,
body.onae-themed .site-footer .inbox-widget h3{ color:#0F172A !important; }
body.onae-themed .site-footer .faq-widget .faq-q-icon,
body.onae-themed .site-footer .faq-widget .faq-phone-number,
body.onae-themed .site-footer .faq-widget .faq-btn-primary,
body.onae-themed .site-footer .inbox-widget .faq-btn-primary{ color:var(--atb-accent) !important; }
body.onae-themed .site-footer .faq-widget .faq-btn-primary,
body.onae-themed .site-footer .inbox-widget .faq-btn-primary{
background:var(--atb-accent) !important;
color:#FFFFFF !important;
border-color:var(--atb-accent) !important;
}
/* 탭 활성 상태 — 배경이 브랜드색으로 바뀌므로 글자는 흰색으로 짝짓는다 */
body.onae-themed .site-footer .faq-widget .faq-tab.is-active,
body.onae-themed .site-footer .faq-widget .faq-tab.is-active *{
background:var(--atb-accent) !important;
border-color:var(--atb-accent) !important;
color:#FFFFFF !important;
}
/* ── 10. 남은 인디고·시안·금색 부품 — 강조색 하나로 모은다 ──────────────
ai-theme.css 가 곳곳에 심어 둔 --ai-indigo/--ai-cyan/--ai-violet, 그리고
app.css 의 --color-gold 를 이 화면에서만 강조색 하나로 되짚는다. */
body.onae-themed .tier-badge,
body.onae-themed .chapter-no{ color:var(--atb-accent); }
body.onae-themed .btn-solid{
background:var(--atb-accent) !important;
color:#FFFFFF !important;
border-radius:2px;
box-shadow:none;
}
body.onae-themed .btn-ghost{ color:var(--atb-accent) !important; }
body.onae-themed a{ color:var(--atb-accent); }
body.onae-themed .main-nav a,
body.onae-themed .footer-links a{ color:inherit; }
/* 뉴스 카드 — ai-theme.css 의 `.news-item *{color:inherit}` 가 이 절 안
자손 전부를 .news-item 자기 색(#e7ecf6, 밝은 판을 전제로 짠 색)으로
당겨쓰게 만든다. .news-item 자기 색부터 먹색으로 고쳐야 자손도 따라온다. */
body.onae-themed .news-item{ color:var(--atb-ink-3) !important; }
body.onae-themed .news-item .share-btn{
background:transparent !important;
color:var(--atb-ink-3) !important;
border:1px solid var(--atb-rule) !important;
}
body.onae-themed .news-item .share-btn:hover{ color:var(--atb-accent) !important; border-color:var(--atb-accent) !important; }
/* 갤러리 낱장 하단 라벨 — --color-gold(주황)를 강조색 하나로 되짚는다.
기존 금색은 흰 바탕에서 4.15:1로 4.5:1 문턱을 살짝 못 넘었다(실측). */
body.onae-themed .gallery-item-tag{ color:var(--atb-accent) !important; }
/* 홈 개인화 힌트 칩("가입하면 매일 출석 에그를…") — 금색→인디고 그라디언트
반투명 판이라 색 계열이 하나 더 늘어난다(회장님이 지적한 "색 계열이 넷"과
같은 모양). 강조색 옅은 판 하나로 접는다. */
body.onae-themed .member-hint{
background:var(--atb-accent-2) !important;
border:1px solid var(--atb-rule) !important;
border-radius:16px!important;
color:var(--atb-ink) !important;
}
body.onae-themed .member-hint-link{ color:var(--atb-accent) !important; }
/* ── 11-a. 실제 렌더 화면(js/render.js renderHome)이 만드는 덩이들 ───────
index.html 의 정적 마크업은 무저장(no-JS) 뼈대이고, 실제로 화면에
뜨는 것은 render.js 의 renderHome() 이 #app 을 다시 채운 결과다.
1280·360px 로 렌더해서 실측한 뒤 그 결과에 맞춰 아래를 적었다. */
/* 히어로 v2 — 신뢰 리스트(체크 배지)·CTA 두 버튼 */
body.onae-themed .hero-trust li{
background:rgba(255,255,255,0.12);
border:1px solid rgba(255,255,255,0.35);
color:#FFFFFF; /* on #4A3F6B ≈ 8.6 : 1 */
border-radius:2px;
}
body.onae-themed .hero-trust li::before{ color:#FFFFFF; }
body.onae-themed .btn-hero-primary{
background:#FFFFFF !important;
color:var(--atb-accent) !important; /* 8.62 : 1 */
border:1px solid #FFFFFF !important;
border-radius:16px!important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
}
body.onae-themed .btn-hero-secondary{
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,0.55) !important;
background:transparent !important;
border-radius:2px;
}
body.onae-themed .btn-hero-secondary:hover{
color:#FFFFFF !important;
border-color:#FFFFFF !important;
background:rgba(255,255,255,0.12) !important;
}
/* 「대상별 바로가기」 8개 원형 카드 — 누르는 것이므로 상자로 남기되
네온 그라디언트·글로우를 걷고 흰 종이 + 얇은 테두리로. */
body.onae-themed .quicklink-card{
background:#FFFFFF !important;
border:1px solid var(--atb-rule) !important;
border-radius:16px!important;
color:var(--atb-ink) !important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
padding:1.4rem 1rem !important;
}
body.onae-themed .quicklink-card:hover{
border-color:var(--atb-accent) !important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
}
body.onae-themed .qc-icon,
body.onae-themed .qc-thumb{
background:var(--atb-accent-2);
box-shadow:none;
border:1px solid var(--atb-rule);
}
body.onae-themed .quicklink-card .qc-thumb-wrap::after{ display:none; }
/* 도서 시리즈 카드 — 표지(book3d)는 그대로 두고, 판 배경/테두리만
흰 종이 + 얇은 테두리로. 구매 아이콘(🛒)은 강조색 원. */
body.onae-themed .card-grid .book-card{
background:#FFFFFF !important;
border:1px solid var(--atb-rule) !important;
border-radius:16px!important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
color:var(--atb-ink) !important;
}
body.onae-themed .card-grid .book-card:hover{
border-color:var(--atb-accent) !important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
transform:translateY(-2px)!important;
}
body.onae-themed .card-grid .book-card *{ color:inherit; }
body.onae-themed .card-grid .book-card .book-card-title{ color:var(--atb-ink) !important; }
body.onae-themed .card-grid .book-card .book-card-audience{ color:var(--atb-accent) !important; }
body.onae-themed .card-grid .book-card .book-card-foot{ color:var(--atb-ink-3) !important; }
body.onae-themed .btn-buy-icon{
background:var(--atb-accent) !important;
color:#FFFFFF !important; /* 8.62 : 1 */
border:1px solid var(--atb-accent) !important;
box-shadow:none;
}
/* 저자 신뢰 절 — 칩(누르는 것이 아니지만 canon상 칩은 상자 허용) */
body.onae-themed .chip{
background:var(--atb-accent-2);
color:var(--atb-accent);
border-radius:2px;
}
body.onae-themed .trust-badge-pill{
background:var(--atb-accent-2);
color:var(--atb-accent);
border-radius:2px;
font-weight:700;
}
/* 「믿을 수 있는 이유」 — 후기 빈 상태 판은 상자가 아니라 왼쪽 괘선 */
body.onae-themed .trust-reviews-block{
background:transparent;
border:0;
border-left:3px solid var(--atb-accent);
border-radius:0;
padding:14px 0 14px 20px;
}
body.onae-themed .trust-reviews-heading{
font-family:var(--atb-serif);
font-size:17px;
font-weight:700;
color:var(--atb-ink);
}
body.onae-themed .trust-reviews-empty p{ color:var(--atb-ink-3); }
body.onae-themed .trust-audience-label{ color:var(--atb-ink-3); }
/* 갤러리 스트립 — 누르는 낱장이므로 상자(2px)로, 그림자만 지운다 */
body.onae-themed .gallery-item{
border-radius:2px;
box-shadow:none;
border:1px solid var(--atb-rule);
}
body.onae-themed .gallery-item:hover{ box-shadow:none; border-color:var(--atb-accent); transform:none; }
/* 최신 AI 뉴스 — 상자가 아니라 위쪽 괘선의 줄. ai-theme.css 가 개별
!important 로 심어 둔 금색 제목·옅은 회색 본문을 먹색 계열로 되짚는다. */
body.onae-themed .news-list{
display:block;
}
body.onae-themed .news-item{
background:transparent !important;
border:0 !important;
border-top:1px solid var(--atb-rule-2) !important;
border-radius:0 !important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
padding:18px 0 !important;
backdrop-filter:none !important;
}
body.onae-themed .news-item:first-child{ border-top:0 !important; padding-top:0 !important; }
body.onae-themed .news-item h3{
font-family:var(--atb-serif);
color:var(--atb-ink) !important;
font-weight:700;
}
body.onae-themed .news-item p{ color:var(--atb-ink-3) !important; }
body.onae-themed .news-item .news-date{
font-family:var(--atb-mono);
color:var(--atb-accent) !important;
}
body.onae-themed .news-item .chip{ color:var(--atb-accent) !important; }
/* ── 11. 360px — 머리띠 자리넘침(사전 문제) 실측·수정 ─────────────────────
실측(고치기 전, 원본 그대로) : 390px 폭에서 .header-actions 가
nowrap 인 채로 로그인·체험 버튼·이메일 입력·언어/테마 전환·에그 배지를
한 줄에 다 넣으려다 role-switcher-btn 의 글자가 한 글자씩 세로로
쌓였다(스크린샷으로 확인). app.css .header-actions{display:flex} 에
flex-wrap 도 자식 min-width 보호도 없는 게 원인 — 이 파일이 만들기 전
부터 있던 문제다. 페이지 전체는 가로로 안 밀리지만(overflow hidden)
글자가 안 보이게 되므로 화면 폭만 좁을 때 줄바꿈을 허용한다. */
@media (max-width:560px){
body.onae-themed .app-main{ padding-left:16px; padding-right:16px; }
body.onae-themed .hero{ padding:2.2rem 1.4rem; }
body.onae-themed .header-inner{ padding-top:.6rem; padding-bottom:.6rem; }
body.onae-themed .header-actions{
flex-wrap:wrap;
row-gap:.5rem;
justify-content:flex-end;
}
body.onae-themed .chrome-controls-mount{ flex-wrap:wrap; row-gap:.4rem; }
body.onae-themed .role-switcher-btn,
body.onae-themed .egg-badge,
body.onae-themed .theme-switcher-btn,
body.onae-themed .lang-switcher-btn,
body.onae-themed .logpay-auth-login{
flex-shrink:0;
min-width:max-content;
}
body.onae-themed .logpay-auth-login input[type="email"]{ width:120px; }
/* 「대상별 바로가기」 원형 카드·「믿을 수 있는 이유」 표지 격자 — 실측
결과 이 폭에서 minmax(160px,1fr)/auto-fill(96px) 트랙이 내용 최소
폭을 다 못 줄여 main 이 442~499px 로 넘쳤다(사전 문제, 이번에 실측해
고정폭 칸으로 바꿔 잡는다). */
body.onae-themed .quicklink-grid{
grid-template-columns:repeat(2, 1fr) !important;
gap:.8rem !important;
}
body.onae-themed .quicklink-card{
min-width:0 !important;
padding:1.1rem .6rem !important;
}
body.onae-themed .trust-audience-grid{
grid-template-columns:repeat(3, 1fr) !important;
gap:.7rem !important;
}
body.onae-themed .trust-audience-cover{ min-width:0; width:100%; }
body.onae-themed .trust-audience-cover .book3d,
body.onae-themed .trust-audience-cover .book-cover,
body.onae-themed .trust-audience-cover img{ width:100% !important; max-width:100% !important; }
/* ai-theme.css:608 의 `@media(max-width:767px) [class*="label"]{white-space:nowrap}` 가
클래스 이름에 "label" 이 들어간 원소 전부(부분일치 선택자)를 겨눠서
.trust-audience-label 도 함께 맞아 줄바꿈이 막혀 있었다(overflow-wrap 만으로는
nowrap 을 못 이긴다 — 실측: 줄바꿈 전무, scrollWidth 그대로). white-space 자체를
되짚어야 줄바꿈이 실제로 일어난다. */
body.onae-themed .trust-audience-label{ white-space:normal !important; overflow-wrap:break-word; word-break:keep-all; }
/* 표지 이미지가 404(로컬 실측 환경엔 assets/covers 를 옮기지 않았다)일 때
쓰는 글자 대체(.cover-fallback)가 칸보다 넓어 실측에 잡혔다 — 실제
배포본은 표지 이미지가 뜨므로 이 대체 글자가 보이지 않지만, 방어적으로
줄바꿈을 허용해 둔다. */
body.onae-themed .cover-fallback{ overflow-wrap:break-word; word-break:keep-all; font-size:.75rem !important; padding:.5rem !important; }
}
/* ── 12. 회장님 방침 — 박영스토리(타사 출간) 도서 고지를 더 눈에 띄게 ──────
HTML을 못 바꾸므로 인접 형제 선택자로 정확히 짚는다(js/auth.js:582 —
#purchaseBookSelect 셀렉트 바로 다음 형제가 이 문구를 담은 .modal-note
하나뿐이다, 전수 확인). 고치기 전 8.47:1(13.12px/400)로 이미 통과였지만,
덜 보이게 만들면 안 된다는 방침이라 대비·크기·굵기를 셋 다 올린다. */
body.onae-themed #purchaseBookSelect + .modal-note{
background:var(--atb-accent-2) !important;
border-left:3px solid var(--atb-accent) !important;
border-radius:0 !important;
padding:10px 14px !important;
margin-top:1rem !important;
color:var(--atb-ink) !important; /* on --atb-accent-2(#EFECF3) = 15.7:1 */
font-size:13.5px !important;
font-weight:600 !important;
line-height:1.6 !important;
}
/* Home: books and usable learning routes lead the page, not decoration. */
body.onae-themed .app-main{ max-width:1200px; }
body.onae-themed .app-main > .hero.hero-v2{
display:grid;
grid-template-columns:minmax(0, 1.1fr) minmax(340px, .9fr);
gap:40px;
margin:0;
padding:44px 0 40px;
border-top:3px solid var(--atb-ink);
border-bottom:1px solid var(--atb-rule);
border-radius:0 !important;
background:transparent !important;
color:var(--atb-ink) !important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
}
body.onae-themed .hero-bg,
body.onae-themed .hero-orb{ display:none !important; }
body.onae-themed .hero-v2 .hero-inner{ display:contents; }
body.onae-themed .hero-v2 .hero-copy{ min-width:0; }
body.onae-themed .hero-eyebrow{
margin:0 0 8px;
padding:0;
color:var(--atb-accent) !important;
font-family:var(--atb-mono, var(--onae-font, system-ui, sans-serif));
font-size:11px;
letter-spacing:.08em;
}
body.onae-themed .hero h1{
margin:0;
padding:0;
border:0 !important;
color:var(--atb-ink) !important;
font-family:var(--atb-serif, var(--font-display));
font-size:34px;
line-height:1.3;
letter-spacing:0;
}
body.onae-themed .hero-v2 .hero-copy > p{
max-width:650px;
margin-top:14px;
color:var(--atb-ink-3) !important;
font-size:15px;
line-height:1.75;
word-break:keep-all;
}
body.onae-themed .hero .hero-cta{
gap:10px;
margin-top:20px;
}
body.onae-themed .hero .hero-cta .btn{
min-height:42px;
border-radius:4px !important;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04)!important;
}
body.onae-themed .hero .hero-cta .btn:hover{ transform:translateY(-2px)!important; }
body.onae-themed .hero-trust{
display:flex;
flex-wrap:wrap;
gap:6px 16px;
margin-top:22px;
}
body.onae-themed .hero-trust li{
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
color:var(--atb-ink-3) !important;
font-size:12px;
line-height:1.5;
}
body.onae-themed .hero-trust li::before{ color:var(--atb-accent) !important; }
body.onae-themed .home-tools{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
margin-top:26px;
border-top:1px solid var(--atb-rule);
}
body.onae-themed .home-tools a{
display:flex;
min-width:0;
min-height:82px;
padding:13px 12px 12px 0;
flex-direction:column;
justify-content:center;
color:var(--atb-ink) !important;
border-right:1px solid var(--atb-rule);
}
body.onae-themed .home-tools a + a{ padding-left:12px; }
body.onae-themed .home-tools a:last-child{ border-right:0; }
body.onae-themed .home-tools strong{
color:var(--atb-ink) !important;
font-size:14px;
line-height:1.35;
}
body.onae-themed .home-tools span{
margin-top:4px;
color:var(--atb-ink-3) !important;
font-size:12px;
line-height:1.45;
word-break:keep-all;
}
body.onae-themed .home-tools a:hover strong{ color:var(--atb-accent) !important; }
body.onae-themed .hero-v2 .hero-visual{
display:block;
min-width:0;
padding:0;
}
body.onae-themed .home-shelf{
height:100%;
padding:18px;
border:1px solid var(--atb-rule);
border-radius:6px;
background:#FFFFFF;
}
body.onae-themed .home-shelf-head{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
margin-bottom:14px;
color:var(--atb-ink);
font-family:var(--atb-serif, var(--font-display));
font-size:16px;
font-weight:700;
}
body.onae-themed .home-shelf-head a{
color:var(--atb-accent) !important;
font-family:var(--onae-font, system-ui, sans-serif);
font-size:12px;
font-weight:700;
white-space:nowrap;
}
body.onae-themed .home-shelf-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:10px;
}
body.onae-themed .home-shelf-book{
display:block;
min-width:0;
color:var(--atb-ink) !important;
}
body.onae-themed .home-shelf-book .book-cover{
aspect-ratio:3 / 4;
overflow:hidden;
border:1px solid var(--atb-rule);
border-radius:3px;
background:var(--atb-accent-2);
}
body.onae-themed .home-shelf-book img{ width:100%; height:100%; object-fit:cover; }
body.onae-themed .home-shelf-book > span{
display:block;
display:-webkit-box;
min-height:36px;
margin-top:7px;
overflow:hidden;
color:var(--atb-ink-3) !important;
font-size:11px;
line-height:1.45;
text-overflow:ellipsis;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
word-break:keep-all;
}
body.onae-themed .home-shelf-book:hover .book-cover{ border-color:var(--atb-accent); }
body.onae-themed .home-explore,
body.onae-themed .home-library{ border-top:0 !important; }
body.onae-themed .home-explore{ padding-top:32px !important; }
body.onae-themed .section-head{ align-items:flex-end; }
body.onae-themed .section-head h2{
color:var(--atb-ink) !important;
font-family:var(--atb-serif, var(--font-display));
font-size:25px;
line-height:1.3;
letter-spacing:0;
}
body.onae-themed .home-explore .quicklink-grid{
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:10px;
}
body.onae-themed .home-explore .quicklink-card{
display:grid;
min-width:0;
min-height:138px;
padding:12px !important;
border-radius:5px !important;
align-content:center;
gap:8px;
text-align:left;
}
body.onae-themed .home-explore .qc-thumb-wrap{
width:48px;
height:48px;
margin:0;
}
body.onae-themed .home-explore .qc-thumb,
body.onae-themed .home-explore .qc-icon{
width:48px;
height:48px;
border-radius:4px;
}
body.onae-themed .home-library{ padding-top:34px !important; }
body.onae-themed .home-library .card-grid{
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:16px;
}
body.onae-themed .home-book-card{
min-width:0;
overflow:hidden;
border-radius:6px !important;
}
body.onae-themed .home-book-card .book-cover-wrap{
position:relative;
padding:14px 14px 0;
background:var(--atb-accent-2);
}
body.onae-themed .home-book-card .book-cover{
aspect-ratio:3 / 4;
overflow:hidden;
border:1px solid var(--atb-rule);
border-radius:3px;
background:#FFFFFF;
}
body.onae-themed .home-book-card .book-cover img{ width:100%; height:100%; object-fit:cover; }
body.onae-themed .home-book-card .book-card-body{ padding:14px !important; }
body.onae-themed .home-book-card .book-card-title{
display:-webkit-box;
min-height:44px;
overflow:hidden;
font-size:15px !important;
line-height:1.45;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
word-break:keep-all;
}
body.onae-themed .home-book-card .book-card-audience{
display:-webkit-box;
min-height:36px;
margin-top:6px;
overflow:hidden;
color:var(--atb-ink-3) !important;
font-size:12px !important;
line-height:1.5;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
word-break:keep-all;
}
body.onae-themed .home-book-card .book-card-foot{ gap:8px; }
body.onae-themed .home-book-card .btn{ border-radius:4px !important; }
body.onae-themed .home-library .book-card:hover{ transform:translateY(-2px)!important; }
@media (max-width:900px){
body.onae-themed .app-main > .hero.hero-v2{ grid-template-columns:1fr; gap:28px; }
body.onae-themed .home-shelf{ max-width:720px; }
body.onae-themed .home-library .card-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
body.onae-themed .app-main > .hero.hero-v2{ padding:28px 0 30px; }
body.onae-themed .hero h1{ font-size:29px; }
body.onae-themed .hero-v2 .hero-copy > p{ font-size:14px; }
body.onae-themed .home-tools{ grid-template-columns:1fr; }
body.onae-themed .home-tools a,
body.onae-themed .home-tools a + a{
min-height:62px;
padding:12px 0;
border-right:0;
border-bottom:1px solid var(--atb-rule);
}
body.onae-themed .home-tools a:last-child{ border-bottom:0; }
body.onae-themed .home-shelf{ padding:14px; }
body.onae-themed .home-shelf-grid{ gap:8px; }
body.onae-themed .home-explore .quicklink-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
body.onae-themed .home-explore .quicklink-card{ min-height:116px; }
body.onae-themed .home-library .card-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
body.onae-themed .home-book-card .book-cover-wrap{ padding:10px 10px 0; }
}