/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0
*/
/* --- home layout --- */
/* 자격증 길잡이 첫 화면·글 화면 짜임새 (2026-08-24)
참고사이트 실측 구조: 상단 고정바 / 좌측 371px 목록 / 우측 793px 본문.
좁은 화면에서는 위아래로 쌓인다.
★배경 흐림(backdrop-filter)은 쓰지 않는다 — 상단바에 걸면 모바일 메뉴가 갇힌다. */
:root{
--journal-key:#2F6FED; /* 파랑 — 시험·공부 느낌 */
--journal-deep:#123A82;
--journal-soft:#EAF1FE;
--journal-paper:#F6F8FC;
--journal-edge:#DDE3EE;
--journal-text:#33383F;
--journal-dim:#6B7280;
}
body{ background:var(--journal-paper); color:var(--journal-text); }
body *{ box-sizing:border-box; }
/* ---------- 상단 고정바 ---------- */
.journal-tapbox{ position:absolute; opacity:0; pointer-events:none; }
.journal-masthead{
position:sticky; top:0; z-index:50;
background:#fff; border-bottom:1px solid var(--journal-edge);
}
.journal-masthead-in{
max-width:1240px; margin:0 auto; padding:0 20px;
height:64px; display:flex; align-items:center; justify-content:space-between;
}
.journal-wordmark{
font-size:19px; font-weight:800; color:var(--journal-deep);
text-decoration:none; letter-spacing:-.3px; word-break:keep-all;
}
.journal-links ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.journal-links a{
font-size:15px; font-weight:600; color:var(--journal-text);
text-decoration:none; padding:6px 0; border-bottom:2px solid transparent;
}
.journal-links a:hover{ color:var(--journal-key); border-bottom-color:var(--journal-key); }
.journal-menutap{ display:none; }
/* ---------- 2단 뼈대 ---------- */
.journal-split{
max-width:1240px; margin:0 auto; padding:26px 20px 60px;
display:grid; grid-template-columns:340px minmax(0,1fr); gap:32px; align-items:start;
}
/* 좌측 기둥 — 화면에 붙어 따라온다 */
.journal-rail{ position:sticky; top:90px; }
.journal-panel{
background:#fff; border:1px solid var(--journal-edge); border-radius:14px;
padding:20px 22px; margin-bottom:16px;
}
.journal-panel-head{
font-size:14px; font-weight:800; color:var(--journal-key);
margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--journal-edge);
}
.journal-panel ul{ list-style:none; margin:0; padding:0; }
.journal-panel li{ margin-bottom:12px; }
.journal-panel li:last-child{ margin-bottom:0; }
.journal-panel a{
display:block; font-size:14.5px; line-height:1.55; color:var(--journal-text);
text-decoration:none; word-break:keep-all;
}
.journal-panel a:hover{ color:var(--journal-key); }
.journal-panel .when{ display:block; font-size:12px; color:#9aa1ad; margin-top:3px; }
/* 우측 본문 */
.journal-main{ min-width:0; }
.journal-sheet{
background:#fff; border:1px solid var(--journal-edge); border-radius:14px;
padding:34px 36px;
}
/* ---------- 첫 화면 머리말 ---------- */
.journal-cover{
background:linear-gradient(180deg, var(--journal-soft) 0%, var(--journal-paper) 100%);
border-bottom:1px solid var(--journal-edge);
}
.journal-cover-in{ max-width:840px; margin:0 auto; padding:56px 20px 50px; text-align:center; }
.journal-eyebrow{
display:inline-block; margin:0 0 14px; padding:6px 15px;
background:#fff; border:1px solid var(--journal-key); border-radius:999px;
font-size:13.5px; font-weight:700; color:var(--journal-key); word-break:keep-all;
}
.journal-cover h1{
margin:0 0 16px; font-size:36px; line-height:1.4; font-weight:800;
color:var(--journal-deep); letter-spacing:-.6px; word-break:keep-all;
}
.journal-cover-sub{
margin:0 auto 26px; max-width:620px;
font-size:16.5px; line-height:1.8; color:var(--journal-dim); word-break:keep-all;
}
.journal-cover-sub strong{ color:var(--journal-deep); font-weight:700; }
.journal-find{ display:flex; gap:8px; max-width:540px; margin:0 auto; }
.journal-find input{
flex:1; min-width:0; height:50px; padding:0 16px;
border:1.5px solid var(--journal-edge); border-radius:10px;
font-size:15px; background:#fff; color:var(--journal-text);
}
.journal-find input:focus{ outline:none; border-color:var(--journal-key); }
.journal-find button{
height:50px; padding:0 26px; border:0; border-radius:10px; cursor:pointer;
background:var(--journal-key); color:#fff; font-size:15.5px; font-weight:700;
}
.journal-find button:hover{ background:var(--journal-deep); }
/* ---------- 본문 안 구역 제목 ---------- */
.journal-sheet-tag{
margin:0 0 6px; font-size:13px; font-weight:800; color:var(--journal-key);
}
.journal-sheet-head{
margin:0 0 22px; font-size:23px; font-weight:800; line-height:1.45;
color:var(--journal-deep); word-break:keep-all;
}
/* 자격증 카드 목록 */
.journal-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.journal-card{
display:flex; flex-direction:column; gap:7px;
border:1px solid var(--journal-edge); border-radius:12px; padding:18px 20px;
text-decoration:none; background:#fff; transition:border-color .15s;
}
.journal-card:hover{ border-color:var(--journal-key); }
.journal-card-name{ font-size:16px; font-weight:800; color:var(--journal-deep); word-break:keep-all; }
.journal-card-desc{ font-size:14px; line-height:1.7; color:var(--journal-dim); word-break:keep-all; }
/* 글 목록 */
.journal-list{ list-style:none; margin:0; padding:0; }
.journal-list li{ border-bottom:1px solid var(--journal-edge); }
.journal-list li:last-child{ border-bottom:0; }
.journal-list a{ display:block; padding:15px 2px; text-decoration:none; color:inherit; }
.journal-list a:hover .t{ color:var(--journal-key); }
.journal-list .t{ display:block; font-size:16px; font-weight:700; line-height:1.5; color:var(--journal-deep); word-break:keep-all; }
.journal-list .d{ display:block; font-size:13.5px; line-height:1.65; color:var(--journal-dim); margin-top:5px; }
.journal-list .w{ display:block; font-size:12px; color:#9aa1ad; margin-top:5px; }
/* ---------- 맺음 ---------- */
.journal-foot{ background:var(--journal-deep); color:#c7d8f5; padding:44px 20px 36px; }
.journal-foot-in{ max-width:1240px; margin:0 auto; text-align:center; }
.journal-foot-name{ margin:0 0 6px; font-size:18px; font-weight:800; color:#fff; }
.journal-foot-say{ margin:0 0 20px; font-size:14.5px; color:#9db8e4; }
.journal-foot-links ul{ display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; list-style:none; margin:0 0 22px; padding:0; }
.journal-foot-links a{ font-size:14.5px; color:#c7d8f5; text-decoration:none; }
.journal-foot-links a:hover{ color:#fff; text-decoration:underline; }
.journal-foot-fine{ margin:0 auto 16px; max-width:640px; font-size:13px; line-height:1.75; color:#8aa6d6; word-break:keep-all; }
.journal-foot-copy{ margin:0; font-size:12.5px; color:#7793c4; }
/* ---------- 좁은 화면 ---------- */
@media (max-width:1000px){
/* 2단 → 위아래로 쌓기. 참고사이트도 이렇게 동작한다(실측) */
.journal-split{ grid-template-columns:1fr; gap:20px; padding:20px 16px 50px; }
.journal-rail{ position:static; order:2; } /* 목록은 본문 아래로 */
.journal-main{ order:1; }
.journal-cards{ grid-template-columns:1fr; }
}
@media (max-width:768px){
.journal-cover-in{ padding:42px 20px 38px; }
.journal-cover h1{ font-size:26px; }
.journal-cover-sub{ font-size:15.5px; }
.journal-sheet{ padding:22px 20px; }
.journal-sheet-head{ font-size:20px; }
.journal-find{ flex-direction:column; }
.journal-find button{ width:100%; }
.journal-menutap{ display:block; width:30px; height:24px; position:relative; cursor:pointer; }
.journal-menutap span,
.journal-menutap::before,
.journal-menutap::after{
content:""; position:absolute; left:0; width:100%; height:2.5px;
background:var(--journal-deep); border-radius:2px; transition:.2s;
}
.journal-menutap::before{ top:3px; }
.journal-menutap span{ top:11px; }
.journal-menutap::after{ top:19px; }
.journal-links{
position:absolute; top:64px; left:0; right:0;
background:#fff; border-bottom:1px solid var(--journal-edge);
max-height:0; overflow:hidden; transition:max-height .25s ease;
}
.journal-links ul{ flex-direction:column; gap:0; padding:6px 20px 14px; }
.journal-links li{ border-bottom:1px solid var(--journal-paper); }
.journal-links a{ display:block; padding:14px 0; border-bottom:0; }
.journal-tapbox:checked ~ .journal-masthead .journal-links{ max-height:70vh; overflow-y:auto; }
.journal-tapbox:checked ~ .journal-masthead .journal-menutap span{ opacity:0; }
.journal-tapbox:checked ~ .journal-masthead .journal-menutap::before{ top:11px; transform:rotate(45deg); }
.journal-tapbox:checked ~ .journal-masthead .journal-menutap::after{ top:11px; transform:rotate(-45deg); }
}
/* --- /home layout --- */
/* --- journal body : start --- */
:root{
--journal-key:#2F6FED; /* ← 사이트별로 이 줄만 교체 */
--journal-keytext:#ffffff;
/* ★CTA 버튼 색은 사이트 대표색(--journal-key)과 일부러 다르게 둔다(2026-07-29 미르 지시:
"너무 똑같으면 별로"). 아래 2색이 1초 주기로 왕복하며 깜빡인다.
★참고사이트가 쓰던 코랄(#FF6B6B)은 일부러 피했다(2026-07-29 미르: "샘플과 너무 같으면 안 된다").
사이트별 권장값 — homepricehub(파랑)·edukidsfund(보라): 앰버→딥오렌지
econolifehub(연두)·story(초록): 앰버→진자주
blog.automode(살구): 딥틸→네이비 */
--journal-btnin:#F2994A; /* CTA 깜빡임 A (앰버) */
--journal-btnout:#D9552B; /* CTA 깜빡임 B (딥오렌지) */
/* ★2026-07-29 신설 — 대표색을 '글자색'으로 그대로 쓰면 밝은 사이트(연두·초록·살구)는
흰 배경에서 대비 1.9~2.7:1로 거의 안 보인다. 배경·테두리엔 --journal-key, 글자엔 --journal-ink를 쓴다.
ink 값은 대비 4.5:1(WCAG AA)을 넘도록 사이트별로 계산해 넣는다. */
--journal-ink:#1E5AC4;
--journal-tint:color-mix(in srgb, var(--journal-key) 10%, transparent);
--journal-tint-2:color-mix(in srgb, var(--journal-key) 5%, transparent);
--journal-shadow:color-mix(in srgb, var(--journal-key) 15%, transparent);
--journal-dark:color-mix(in srgb, var(--journal-key), black 12%);
}
/* ---------- 본문 기본 ---------- */
/* ★2026-07-29 미르 지적 — 참고사이트(golifehack)는 본문에 word-break:keep-all을 쓰지 않는다.
한글은 기본값(normal)이면 어느 글자에서든 줄이 바뀌어 각 줄이 오른쪽 끝까지 꽉 차므로,
양쪽정렬이 아닌데도 양쪽정렬처럼 가지런해 보인다(마지막 줄만 자연스럽게 짧아짐).
우리는 keep-all(낱말 안 쪼갬)을 써서 줄 끝이 들쭉날쭉했다 — 본문에서는 걷어낸다.
★단 제목·버튼·카드처럼 짧고 눈에 띄는 곳은 낱말이 잘리면 어색해서 keep-all을 유지한다.
★문단 아래 여백도 확대(미르: "따닥따닥 붙어 있어 답답하다"). */
.entry-content p{
font-size:18px !important; line-height:1.8 !important;
margin-bottom:2em !important; word-break:normal;
}
.entry-content li{ word-break:normal; }
/* ---------- 대제목 : 박스형 → 왼쪽에서 옅어지는 밑줄 ---------- */
.entry-content h2{
font-size:32px !important; font-weight:800 !important; line-height:1.38 !important;
margin-top:72px !important; margin-bottom:32px !important; padding:0 0 16px !important;
background:none !important; border-left:none !important; border-radius:0 !important;
position:relative; color:#1a1a1a; letter-spacing:-.02em; word-break:keep-all;
}
.entry-content h2::after{
content:""; position:absolute; left:0; bottom:0; width:300px; max-width:100%; height:4px;
background:linear-gradient(to right,var(--journal-key),transparent); border-radius:2px;
transform:scaleX(.7); transform-origin:left;
transition:transform .5s cubic-bezier(.25,1,.5,1);
}
.entry-content h2:hover::after{ transform:scaleX(1); }
/* ---------- 소제목 : 박스형 → 왼쪽 세로 그라데이션 막대 ---------- */
.entry-content h3{
font-size:24px !important; font-weight:700 !important; line-height:1.45 !important;
margin-top:34px !important; margin-bottom:18px !important; padding:0 !important;
background:none !important; border-left:none !important; border-radius:0 !important;
display:flex; align-items:flex-start; gap:10px;
color:#22222a; letter-spacing:-.01em; word-break:keep-all;
}
.entry-content h3::before{
content:""; display:block; width:8px; height:24px; flex-shrink:0; margin-top:.3em;
background:linear-gradient(to bottom,var(--journal-key),transparent);
border-radius:4px; transition:all .3s ease;
}
.entry-content h3:hover::before{ height:28px; background:var(--journal-key); }
/* ---------- 강조 : 색으로만(굵기는 낮춤) ---------- */
.entry-content strong,.entry-content b{
color:var(--journal-ink) !important; font-weight:600 !important;
padding:0 2px; border-radius:3px; transition:background .2s ease;
}
.entry-content strong:hover,.entry-content b:hover{ background:var(--journal-tint); }
/* ---------- 표 : 라운드 + 컬러 헤더 ---------- */
/* ★2026-07-29 미르 피드백 "표 테두리가 잘 안 보인다" — 옅은 테두리 + 그림자 강화 */
.entry-content table{
width:100% !important; margin-top:30px !important; margin-bottom:30px !important; border-collapse:collapse !important;
border-radius:16px !important; overflow:hidden !important; font-size:.95rem !important;
border:1px solid #dde2e8 !important;
box-shadow:0 4px 16px rgba(20,30,45,.11) !important;
}
.entry-content table:hover{ box-shadow:0 8px 24px rgba(20,30,45,.16) !important; }
.entry-content thead,.entry-content thead tr{
background:var(--journal-key) !important; color:var(--journal-keytext) !important;
}
.entry-content th{
padding:14px 16px !important; text-align:center !important; font-weight:600 !important;
color:var(--journal-keytext) !important; background:transparent !important; border:none !important;
}
.entry-content td{
padding:12px 16px !important; border:none !important;
border-bottom:1px solid #e3e7ec !important; word-break:normal;
}
.entry-content tbody tr:last-child td{ border-bottom:none !important; }
.entry-content tbody tr{ transition:background .2s ease; }
.entry-content tbody tr:hover{ background:#f8f9fa; }
/* ---------- 인용구 : 왼쪽 굵은선 + 배경 따옴표 ---------- */
.entry-content blockquote{
margin-top:36px !important; margin-bottom:36px !important; padding:24px 28px 24px 34px !important;
background:#f8f9fa !important; border-left:4px solid var(--journal-key) !important;
border-radius:0 8px 8px 0 !important; position:relative; overflow:visible !important;
font-style:italic; transition:all .3s ease;
}
.entry-content blockquote:hover{
background:#f0f2f5 !important; transform:translateX(5px); box-shadow:0 3px 10px rgba(0,0,0,.05);
}
.entry-content blockquote::before{
content:'"'; position:absolute; top:0; left:12px; font-size:58px; line-height:1;
color:var(--journal-key); opacity:.2; font-family:Georgia,serif; pointer-events:none;
}
.entry-content blockquote p{ margin:0 0 8px !important; position:relative; z-index:1; }
/* ---------- 이미지 : 전부 가운데 정렬 ---------- */
.entry-content img:not(.emoji):not(.wp-smiley){
max-width:100% !important; height:auto !important; display:block !important;
margin-left:auto !important; margin-right:auto !important;
border-radius:10px !important; box-shadow:0 3px 12px rgba(0,0,0,.08);
transition:all .3s ease;
}
.entry-content img:not(.emoji):not(.wp-smiley):hover{ transform:scale(1.01); box-shadow:0 6px 15px rgba(0,0,0,.15); }
/* ★2026-07-29 미르 피드백 "카드뉴스 한 장이 비대하게 크다" —
카드뉴스·차트는 1080×1080 정사각이라 폭 100%면 700×700으로 화면을 잡아먹는다.
본문 이미지 최대 폭을 520px로 제한한다(썸네일 420 < 본문이미지 520 < 본문폭 700). */
.entry-content img:not(.emoji):not(.wp-smiley){ max-width:520px !important; }
/* ★2026-07-29 수정(미르 발견) — 홈 상단 커버 이미지가 위 520px 규칙에 걸려,
블록(폭 1265px)을 꽉 채우지 못하고 520px짜리로 가운데에만 떠 있었다.
커버 블록의 배경 이미지는 '블록을 꽉 채우는' 것이 정상 동작이므로 되돌린다.
★교훈: `.entry-content img` 같은 넓은 규칙은 글 본문뿐 아니라 홈·아카이브의
블록 이미지까지 함께 잡는다. 이미지 규칙을 손볼 땐 홈 화면도 반드시 확인할 것. */
/* ★선택자에 :not() 2개를 그대로 달아둔 것은 우선순위 때문이다. 위 520px 규칙이
`img:not(.emoji):not(.wp-smiley)`(클래스 3개)라, 이쪽도 같은 수 이상이어야 이긴다.
(2026-07-29 실수 — 처음엔 :not 없이 썼다가 그대로 520px에 져서 안 고쳐졌다) */
.entry-content img.wp-block-cover__image-background:not(.emoji):not(.wp-smiley){
max-width:none !important; width:100% !important; height:100% !important;
object-fit:cover !important; border-radius:0 !important;
box-shadow:none !important; margin:0 !important;
}
.entry-content img.wp-block-cover__image-background:not(.emoji):not(.wp-smiley):hover{
transform:none !important; box-shadow:none !important;
}
/* 워드프레스가 이모지를 ![]()
로 바꾸므로, 글자처럼 인라인 유지 */
.entry-content img.emoji,.entry-content img.wp-smiley{
display:inline !important; width:1em !important; height:1em !important;
margin:0 .07em !important; vertical-align:-.1em !important;
border-radius:0 !important; box-shadow:none !important;
}
/* ---------- 본문 맨 위 썸네일 (2026-07-29 미르 요청) ---------- */
.entry-content .journal-thumb{ margin-top:0 !important; margin-bottom:34px !important; text-align:center; }
.entry-content .journal-thumb img:not(.emoji):not(.wp-smiley){
width:100% !important; max-width:420px !important; aspect-ratio:1 / 1; object-fit:cover;
border-radius:14px !important; margin:0 auto !important;
box-shadow:0 6px 20px var(--journal-shadow) !important;
}
/* ★2026-07-29 수정(미르 발견) — 데스크톱인데도 썸네일이 300px로 작게 나왔다.
위 규칙(420px)이 다른 무언가에 우선순위로 지고 있어, 선택자를 figure까지 명시해
확실히 이기게 한다. 배포 후 실제 화면에서 폭을 재서 확인할 것. */
.entry-content figure.journal-thumb img:not(.emoji):not(.wp-smiley){
width:100% !important; max-width:420px !important; height:auto !important;
}
@media (max-width:768px){
.entry-content img:not(.emoji):not(.wp-smiley){ max-width:100% !important; }
.entry-content .journal-thumb img:not(.emoji):not(.wp-smiley),
.entry-content figure.journal-thumb img:not(.emoji):not(.wp-smiley){ max-width:300px !important; }
}
/* ---------- 접히는 목차 (새 형식) ---------- */
.entry-content .journal-toc{
margin-top:30px; margin-bottom:44px; border:1px solid #eaeaea; border-radius:12px; overflow:hidden;
box-shadow:0 4px 15px rgba(0,0,0,.1); transition:all .3s ease;
}
.entry-content .journal-toc:hover{ box-shadow:0 8px 25px rgba(0,0,0,.15); transform:translateY(-3px); }
.entry-content .journal-toc-head{
display:flex; align-items:center; justify-content:space-between;
padding:16px 25px; background:var(--journal-key); color:var(--journal-keytext);
cursor:pointer; user-select:none; transition:background .3s ease;
}
.entry-content .journal-toc-head:hover{ background:var(--journal-dark); }
.entry-content .journal-toc-title{ font-size:1.15rem; font-weight:600; letter-spacing:.5px; }
.entry-content .journal-toc-icon{
width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
border-top:6px solid currentColor; transition:transform .3s ease;
}
/* ★2026-07-29 수정(미르 발견: "목차가 안 열린다") — 기본값을 뒤집었다.
이전에는 '닫힘'이 기본이고 JS가 af-open을 붙여야 열렸는데, 워드프레스가 본문의
토글