/* AI는 연습이다 — 사이트 스타일
mockup/index.html 에서 그대로 옮겼다. 새로 만들지 않는다.
시안 라벨(.shim)만 뺐다 — 실제 사이트 요소가 아니다. */
:root{
color-scheme: light;
/* 종이 톤 팔레트 — 시안에서 가져옴. 강조색만 기존 주황으로 바꿨다. */
--paper:#f4f1e9; /* 페이지 */
--card:#fffdf8; /* 면(머리·표·카드) */
--band:#efe9db; /* 서술 칸 띠 */
--band-line:#ddd4c0;
--dash:#d6cdb8; /* 점선 */
--dash-bg:#faf7ee;
--line:#e0d9c8;
--line-soft:#ece5d6;
--row:#f0ebdd;
--row-alt:#fdfbf4;
--thead:#f7f2e6;
--ink:#17150f; /* 제목 */
--body:#433d34; /* 본문 — 종이 톤에 맞춰 한 단계 내렸다(전 #2e2a22, 12.65 → 9.51).
제목(--ink)은 그대로 둬서 제목과 본문이 갈린다 */
--serif-ink:#3a352b; /* 명조 본문 */
--sub:#4a4438;
--dek:#5d5648;
--muted:#5d5648;
--meta:#6f6858; /* 모노 메타 — 시안 값(#8a8172)은 3.4 라 올렸다 */
--dim:#736c5b; /* 아직 안 쓴 편 — 시안 값(#c2b9a4)은 1.7 이라 올렸다 */
--accent:#b3441e; /* 기존 주황 유지 (시안의 녹색 대신) */
--accent-line:#d9a893;
--amber-ink:#7d5f1c; /* 아직 안 채워진 것(.tbd) */
--serif:'Gowun Batang', 'Apple SD Gothic Neo', serif;
--sans:'IBM Plex Sans KR', system-ui, -apple-system, sans-serif;
--mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
--measure:688px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent}
body{margin:0; background:var(--paper); color:var(--body); font-family:var(--sans);
font-size:16px; line-height:1.85; word-break:keep-all; overflow-wrap:break-word}
.wrap{width:100%; max-width:var(--measure); margin:0 auto; padding:0 32px}
a{color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent;
touch-action:manipulation} /* 회색 깜빡임 없음 · 300ms 탭 지연 없음 */
h1,h2,h3{font-family:var(--serif); color:var(--ink); letter-spacing:-.01em}
.mono{font-family:var(--mono)}
/* 시안 라벨 — 실제 사이트 요소 아님 */
/* ── 머리 ── */
.top{background:var(--card); border-bottom:1px solid var(--line)}
.toprow{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
flex-wrap:wrap; padding-top:22px}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--meta)}
nav.main{display:flex; gap:20px; font-size:13.5px}
nav.main a{padding-bottom:2px; border-bottom:2px solid transparent; color:var(--sub)}
nav.main a.on{color:var(--ink); font-weight:500; border-bottom-color:var(--accent)}
.masthead{display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end;
justify-content:space-between; padding:18px 0 26px}
.mh-left{flex:1 1 300px; min-width:0}
.mh-left h1{margin:0; font-weight:700; font-size:clamp(30px,7vw,42px); line-height:1.2}
.creed{margin:12px 0 0; font-family:var(--serif); font-size:clamp(14px,3.4vw,16px);
line-height:1.7; color:var(--dek)}
/* 진행 표시 — 막대와 편 수를 뺐다(2026-08-24). 머리에서는 세지 않는다.
문장은 부제(.creed)와 같은 명조·같은 크기, 색만 한 단계 옅게(--dek → --meta).
상태 칩은 남긴다 — 문장은 블로그 전체 얘기고 칩은 연재 하나의 상태라 층위가 다르다.
크기가 다른 둘을 세우는 자리라 center 가 아니라 baseline 이다. */
.wipline{display:flex; align-items:baseline; gap:12px; margin-top:22px; padding-top:16px;
border-top:1px solid var(--line-soft); flex-wrap:wrap}
.wip{margin:0; font-family:var(--serif); font-size:clamp(14px,3.4vw,16px);
line-height:1.7; color:var(--meta)}
.chip{font-size:11.5px; padding:3px 8px; background:#f1ede1; border:1px solid var(--line);
color:var(--meta); border-radius:3px}
.mh-art{position:relative; flex:0 0 auto; width:268px}
.mh-art svg{display:block; width:268px; height:auto}
/* 속 페이지 머리 */
.innertop .toprow{padding:16px 0; align-items:center}
.innertop .wordmark{font-family:var(--serif); font-size:18px; font-weight:700; color:var(--ink)}
.innerright{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
main{padding:34px 0 44px}
.sechead{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
flex-wrap:wrap; padding-bottom:10px; border-bottom:2px solid var(--ink)}
.sechead h2{margin:0; font-size:19px}
.sechead a{font-family:var(--mono); font-size:11px; color:var(--meta)}
/* ── 글 목록 ── */
article.item{padding:26px 0; border-bottom:1px solid var(--line)}
/* 마지막 글 아래 선은 뺀다 — 나눌 것이 없는 선이라 푸터 윗줄과 겹쳐 보인다.
`.tl .r:last-child` · `.alsoread .ar:last-child` 와 같은 처리다. */
article.item:last-of-type{border-bottom:none}
/* 메타 줄 — 읽는 시간을 뺐다(2026-08-23). 남은 둘을 한 단계 키우고,
편 번호를 날짜보다 크고 진하게 둔다(연재물의 축이라서).
구분자는 두 값 사이에만 남으므로 간격을 좁히고 크기를 날짜 아래로 내렸다.
서로 크기가 다르니 center 가 아니라 baseline 으로 세운다. */
.itemmeta{display:flex; gap:8px; align-items:baseline; margin-bottom:10px; flex-wrap:wrap;
font-family:var(--mono); font-size:12.5px; color:var(--meta)}
.itemmeta .n{font-size:15px; font-weight:700; color:var(--accent); letter-spacing:-.01em}
.itemmeta .sl{font-size:12px; color:#c9c0ab}
/* 발행일이 아직 없을 때. 사건일로 대신 채우지 않고 빈 것을 그대로 보인다 —
호박색이 이 사이트에서 "아직 안 채워진 것" 의 색이다. */
.tbd{color:var(--amber-ink)}
article.item h3{margin:0 0 6px; font-weight:700; font-size:clamp(22px,5.4vw,27px); line-height:1.35}
.itemdek{margin:0 0 10px; font-family:var(--serif); font-size:16px; color:var(--dek); line-height:1.7}
.itemsum{margin:0; font-size:15px; line-height:1.85; color:var(--sub)}
/* ── 글 상세 ── */
.posthead{display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.tag{font-family:var(--mono); font-size:11px; color:var(--card); background:var(--accent); padding:3px 8px}
.post h1{margin:0 0 14px; font-weight:700; font-size:clamp(28px,7vw,38px); line-height:1.3;
letter-spacing:-.015em}
.postdek{margin:0 0 18px; font-family:var(--serif); font-size:clamp(15px,3.8vw,17px);
line-height:1.8; color:var(--dek)}
.postmeta{display:flex; gap:8px; flex-wrap:wrap; align-items:baseline;
font-family:var(--mono); font-size:12.5px;
color:var(--meta); padding-bottom:22px; border-bottom:2px solid var(--ink)}
.postmeta .sl{font-size:12px; color:#c9c0ab}
.post p.b{margin:0 0 20px; font-size:clamp(15.5px,4vw,16.5px); line-height:1.95; color:var(--body)}
.post p.b:first-of-type{margin-top:26px}
.post h2{margin:34px 0 12px; font-size:20px}
/* ① 시간순 표 */
.tl{margin:34px 0; background:var(--card); border:1px solid var(--line)}
.tl .cap{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
padding:12px 18px; border-bottom:1px solid var(--line); background:var(--thead)}
.tl .cap b{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--accent); font-weight:600}
.tl .cap span{font-family:var(--mono); font-size:10.5px; color:var(--meta)}
.tl .hd, .tl .r{display:grid; grid-template-columns:104px 1fr; gap:10px; padding:11px 18px;
align-items:baseline}
.tl .hd{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--meta);
padding:8px 18px; border-bottom:1px solid var(--line-soft)}
.tl .r{border-bottom:1px solid var(--row)}
.tl .r:nth-child(even){background:var(--row-alt)}
.tl .r:last-child{border-bottom:0}
.tl .t{font-family:var(--mono); font-size:12.5px; color:var(--ink); font-variant-numeric:tabular-nums}
.tl .w{font-size:14.5px; color:var(--body); line-height:1.6}
.tl .r.key{background:#fbf3ef}
.tl .r.key .t{color:var(--accent); font-weight:600}
.tl .r.key .w{color:var(--ink); font-weight:500}
/* ② 서술 칸 */
.voice{margin:32px 0; padding:26px 22px; background:var(--band);
border-top:1px solid var(--band-line); border-bottom:1px solid var(--band-line)}
.voice .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--accent);
font-weight:600; margin-bottom:12px}
.voice p{margin:0 0 14px; font-family:var(--serif); font-size:clamp(16px,4.2vw,17.5px);
line-height:1.95; color:var(--serif-ink)}
.voice p:last-child{margin-bottom:0}
/* ③ 사실 확인 메모 */
.check{margin:36px 0 0; padding:20px 22px; background:var(--dash-bg); border:1px dashed var(--dash)}
.check .hd{display:flex; align-items:baseline; gap:8px; margin-bottom:12px; flex-wrap:wrap}
.check .hd b{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--meta); font-weight:600}
.check .hd span{font-family:var(--mono); font-size:10.5px; color:var(--meta)}
.check p{margin:0 0 10px; font-size:13.5px; line-height:1.8; color:var(--sub)}
.check p:last-child{margin-bottom:0}
.check strong{font-weight:600; color:var(--ink)}
.check code{font-family:var(--mono); font-size:12.5px; color:var(--meta)}
.prevnext{margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.prevnext .lab{font-family:var(--mono); font-size:10.5px; color:var(--meta); margin-bottom:5px}
.prevnext .ttl{font-family:var(--serif); font-size:15.5px; color:var(--serif-ink)}
.prevnext .ttl.off{color:var(--dim)}
/* ── 함께 읽을 글 ── */
/* 누름 영역과 hover 는 목록 항목(article.item) 규칙을 그대로 나눠 쓴다 — 아래
"누를 수 있는 항목" 절에 선택자를 같이 적어 뒀다. 여기서는 크기와 간격만 잡는다.
제목 크기는 이전/다음(.prevnext .ttl) 과 같은 15.5px 이다 — 둘 다 "다른 글 제목" 이라
같은 크기여야 페이지 아래쪽이 흔들리지 않는다. */
.alsoread{margin-top:34px; padding-top:22px; border-top:1px solid var(--line)}
.alsoread .lab{font-family:var(--mono); font-size:10.5px; color:var(--meta); margin-bottom:6px}
.alsoread .ar{padding:14px 0; border-bottom:1px solid var(--line-soft)}
.alsoread .ar:last-child{border-bottom:0; padding-bottom:0}
.alsoread .ar h3{margin:0 0 4px; font-size:15.5px; font-weight:700; line-height:1.55}
.alsoread .ar p{margin:0; font-size:13.5px; line-height:1.8; color:var(--sub)}
/* ── 글 아래 반응 버튼 ── */
/* 크게 만들지 않는다 — 글이 끝난 자리에 조용히 놓인 두 칸이다. */
.react{margin:30px 0 0; padding:18px 0 0; border-top:1px solid var(--line-soft)}
.react .lab{margin:0 0 10px; font-family:var(--mono); font-size:11px; color:var(--meta)}
.react .btns{display:flex; gap:8px; flex-wrap:wrap}
.react .rb{font-family:var(--sans); font-size:13px; color:var(--sub); background:var(--card);
border:1px solid var(--line); border-radius:3px; padding:8px 14px;
cursor:pointer; touch-action:manipulation}
.react .done{margin:0; font-family:var(--serif); font-size:15px; color:var(--serif-ink)}
/* 이 줄은 반드시 .btns 뒤에 있어야 한다. 브라우저 기본값 [hidden]{display:none} 은
.react .btns{display:flex} 에 밀리고, 같은 무게(0,2,0)면 뒤에 쓴 쪽이 이긴다.
앞에 두면 눌러도 버튼이 안 사라진다 — 실제로 그렇게 썼다가 잡았다. */
.react [hidden]{display:none}
/* ── 연재 ── */
.series h2{margin:0 0 6px; font-size:26px}
.series .lede{margin:0 0 26px; font-size:14px; line-height:1.8; color:var(--meta)}
.card{display:block; background:var(--card); border:1px solid var(--dash); padding:26px 26px 22px;
margin-bottom:16px}
.cardtop{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:12px}
.cardtop .st{font-family:var(--mono); font-size:11px; color:var(--card); background:var(--accent); padding:3px 8px}
.cardtop .when{font-family:var(--mono); font-size:11px; color:var(--meta)}
.cardname{display:flex; align-items:center; gap:10px; margin:0 0 8px}
.cardname h3{margin:0; font-weight:700; font-size:clamp(23px,6vw,28px)}
.card p{margin:0 0 20px; font-size:14.5px; line-height:1.85; color:var(--sub)}
.cardfoot{margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
font-family:var(--mono); font-size:11.5px; color:var(--sub)}
.cardfoot b{color:var(--accent); font-weight:600}
.slots{display:flex; gap:16px; flex-wrap:wrap}
.slot{flex:1 1 200px; border:1px dashed var(--dash); padding:22px; min-height:96px;
display:flex; flex-direction:column; justify-content:center}
.slot .lab{font-family:var(--mono); font-size:10.5px; color:var(--meta); margin-bottom:6px}
.slot .ttl{font-family:var(--serif); font-size:17px; color:var(--dim)}
/* ── 목차 ── */
.toc .tochead{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
flex-wrap:wrap; margin-bottom:6px}
.toc .tochead h2{margin:0; display:flex; align-items:center; gap:10px; font-size:clamp(22px,5.6vw,26px)}
.toc .tochead .cnt{font-family:var(--mono); font-size:11.5px; color:var(--sub)}
.toc .lede{margin:0 0 24px; font-size:14px; color:var(--meta)}
.actblock{margin-bottom:26px}
.acthead{display:flex; align-items:baseline; gap:10px; padding-bottom:8px;
border-bottom:1px solid var(--ink); margin-bottom:4px; flex-wrap:wrap}
.acthead.pale{border-bottom-color:var(--band-line)}
.actname{font-family:var(--serif); font-size:16px; color:var(--ink)}
.acthead.pale .actname{color:var(--meta)}
.acthint{font-family:var(--mono); font-size:10.5px; color:var(--meta)}
.tocrow{display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:baseline;
padding:11px 0; border-bottom:1px solid var(--line-soft)}
.tocno{font-family:var(--mono); font-size:11.5px; color:var(--dim)}
.toctitle{font-size:15px; color:var(--dim)}
.tocrow.done .tocno{color:var(--accent)}
.tocrow.done .toctitle{color:var(--ink)}
.tocst{font-family:var(--mono); font-size:10.5px; color:var(--accent)}
/* ── 소개 ── */
.about h2{margin:0 0 22px; font-weight:700; font-size:clamp(25px,6.4vw,30px)}
.about h3{margin:32px 0 10px; font-family:var(--sans); font-size:15px; color:var(--ink)}
.about p{margin:0 0 16px; font-size:15.5px; line-height:1.95; color:var(--body)}
.about strong{font-weight:600; color:var(--ink)}
/* "지금까지 만든 것" — 로고를 이름 옆에 세운다. 글줄 첫 줄 높이에 맞춰 살짝 내린다. */
.made{border-top:1px solid var(--line)}
.made .it{display:flex; gap:12px; align-items:flex-start; padding:18px 0;
border-bottom:1px solid var(--line-soft)}
.made .it .mimilogo{margin-top:5px}
.made p{margin:0; font-size:15px; line-height:1.9; color:var(--body)}
.made .next{margin:0; padding:14px 0 0; font-size:13.5px; color:var(--dim)}
/* ── 개인정보처리방침 ── */
.policy h2{margin:0 0 6px; font-size:26px}
.policy .stamp{margin:0 0 20px; font-family:var(--mono); font-size:11.5px; color:var(--meta)}
.policy .draft{margin:0 0 26px; padding:20px 22px; background:var(--band);
border-top:1px solid var(--band-line); border-bottom:1px solid var(--band-line);
font-size:14.5px; line-height:1.85; color:var(--serif-ink); font-family:var(--serif)}
.policy h3{margin:28px 0 8px; font-family:var(--sans); font-size:15px; color:var(--ink)}
.policy p{margin:0 0 14px; font-size:14.5px; line-height:1.9; color:var(--body)}
.policy p:last-child{margin-bottom:0}
.policy strong{font-weight:600; color:var(--ink)}
.policy a{color:var(--accent); border-bottom:1px solid var(--accent-line)}
/* 주소 자리 — 사람이 채울 때까지 비워 둔 한 줄이라 눈에 띄게 둔다 */
.policy .mail{font-family:var(--mono); font-size:13px; color:var(--meta);
padding:12px 14px; background:var(--band); border:1px dashed var(--dash)}
/* ── 푸터 ── */
footer{border-top:1px solid var(--line); background:var(--card)}
footer .wrap{padding-top:24px; padding-bottom:32px}
.disclaimer{margin:0 0 14px; font-size:11.5px; line-height:1.75; color:var(--meta)}
.flinks{display:flex; gap:16px; font-size:12px; color:var(--sub); flex-wrap:wrap}
.flinks .sl{color:var(--dash)}
.copy{margin:10px 0 0; font-family:var(--mono); font-size:10.5px; color:var(--meta)}
.mimilogo{flex:0 0 auto; display:block}
.mimilogo .lg-a{stroke:var(--accent)}
.mimilogo .lg-b{stroke:var(--ink)}
.mimilogo .lg-x{fill:var(--accent); opacity:.35}
@media (max-width:600px){
.wrap{padding:0 20px}
/* 머리는 폰에서도 좌우로 둔다 — 왼쪽 글 60% · 오른쪽 그림 40%.
세로로 쌓지 않으려고 nowrap 을 건다. 그러면 두 칸이 실제로 줄어들어야 하므로
min-width:0 이 반드시 있어야 한다 — flex 기본값(auto)이면 내용이 칸을 밀어
가로 스크롤이 생긴다.
구분선(.wipline)은 왼쪽 칸 안에 있으니 이 배치에서 저절로 왼쪽에서만 그어진다. */
.masthead{flex-wrap:nowrap; gap:14px; padding:14px 0 20px}
.mh-left{flex:0 0 calc(60% - 7px); min-width:0}
.mh-art{flex:0 0 calc(40% - 7px); width:auto; min-width:0}
.mh-art svg{width:100%}
/* 칸이 좁아진 만큼 제목과 문장을 한 단계 내린다.
.wip 은 부제(.creed)와 같은 크기라는 약속이라 같이 내린다.
12px 아래로는 안 내린다 — 390·430 에서는 이미 두 줄이고,
320 에서 두 줄을 만들려면 10px 까지 가야 하는데(잰 값: 11px 일 때
자연폭 310px, 둘째 줄이 161px 칸을 16px 넘긴다) 그건 너무 작다. */
.mh-left h1{font-size:clamp(23px,6.4vw,30px)}
.creed{margin-top:8px; font-size:clamp(12px,3vw,13.5px)}
.wipline{margin-top:14px; padding-top:12px; gap:8px}
.wip{font-size:clamp(12px,3vw,13.5px)}
.tl .hd, .tl .r{grid-template-columns:92px 1fr; row-gap:4px}
}
/* 480px 부터 그림 칸이 170px 아래로 내려간다(480 에서 169 · 320 에서 105).
그 크기에서는 곁가지가 뭉갠다 — 키보드·머그·김을 감추고
노트북만 남긴다. 남은 노트북은 빈 자리만큼 키워 가운데에 세운다.
책상 선도 같이 커지면서 viewBox 밖으로 나가는데, 잘리면서 오히려 화면
끝까지 이어진다. 크기·자리는 노트북 상자(78,20)~(198,126) 를 132 높이에
맞춘 값이다: 1.2 배 뒤 남는 여백의 절반씩 민다. */
@media (max-width:480px){
.art-side{display:none}
.art-core{transform-box:view-box; transform-origin:0 0;
transform:translate(-31.6px,-21.6px) scale(1.2)}
}
/* ── 누를 수 있는 항목 ─────────────────────────
제목에 걸린 링크를 항목 전체로 늘린다(::after 가 블록을 덮는다).
링크는 여전히 하나뿐이라 탭 순서·읽어 주기가 어지럽지 않고,
뱃지 안에 새 링크가 생기지도 않는다. 배경은 건드리지 않는다. */
article.item, .alsoread .ar{position:relative; cursor:pointer}
/* 제목 줄을 좌우 끝으로 벌린다 — 화살표가 항목 오른쪽 끝에 서고,
baseline 정렬이라 제목 첫 줄과 높이가 맞는다. 목록 전체에서 세로로 정렬된다. */
article.item h3 a, .alsoread .ar h3 a{display:flex; align-items:baseline; gap:1rem; color:var(--ink)}
article.item h3 a::after, .alsoread .ar h3 a::after{content:""; position:absolute; inset:0}
article.item h3 .arw, .alsoread .ar h3 .arw{margin-left:auto; flex:0 0 auto; font-weight:400}
.arw{display:inline-block; color:var(--dim);
transform:translateX(0); transition:transform .16s ease, color .16s ease}
article.item:focus-within h3 a, .alsoread .ar:focus-within h3 a{color:var(--accent)}
article.item:focus-within .arw, .alsoread .ar:focus-within .arw{color:var(--accent); transform:translateX(3px)}
article.item h3 a:focus-visible, .alsoread .ar h3 a:focus-visible{outline:none}
article.item:focus-within, .alsoread .ar:focus-within{outline:2px solid var(--accent); outline-offset:6px}
/* 목차 — 쓴 편만 눌린다 */
.tocrow.done{position:relative; cursor:pointer}
.tocrow.done .toctitle a{color:var(--ink)}
.tocrow.done .toctitle a::after{content:""; position:absolute; inset:0}
.tocrow.done .arw{margin-left:.4em; font-size:.9em}
.tocrow.done:focus-within .toctitle a{color:var(--accent)}
.tocrow.done:focus-within .arw{color:var(--accent); transform:translateX(3px)}
.tocrow.done .toctitle a:focus-visible{outline:none}
.tocrow.done:focus-within{outline:2px solid var(--accent); outline-offset:4px}
.tocrow:not(.done){cursor:default} /* 아직 안 쓴 편 — 화살표도 없다 */
/* 마우스가 있는 기기에서만 hover 를 준다.
터치에서 hover 규칙이 걸리면 탭한 뒤 그 상태가 남는다. */
@media (hover:hover){
.react .rb:hover{border-color:var(--accent-line); color:var(--ink)}
article.item:hover h3 a, .alsoread .ar:hover h3 a{color:var(--accent)}
article.item:hover .arw, .alsoread .ar:hover .arw{color:var(--accent); transform:translateX(3px)}
.tocrow.done:hover .toctitle a{color:var(--accent)}
.tocrow.done:hover .arw{color:var(--accent); transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){ .arw{transition:none} }