@import "../../static/fonts/fonts.css";

/* devlog — theme.css
 * web-archive-library 토큰 직변환 (제안서 §3.3 실측값). 출처·변환일은 SOURCE.md.
 * 본문은 web-editorial-longform(680px 세리프 컬럼). radius 0 / shadow none / 절제된 모션.
 */
:root{
  /* 색 — 네오 브루탈리즘 */
  --bg:#FFFFFF; --surface-1:#FFFFFF; --surface-2:#FFF44F; /* Neon Yellow */
  --reading:#FFFFFF;
  --text:#000000; --text-meta:#222222; --accent:#FF0055; /* Hot Pink */
  --border:#000000;
  /* 폰트 — 모던 산세리프 (Pretendard) */
  --font-display:"Pretendard",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-label:"Pretendard",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:"Pretendard",-apple-system,BlinkMacSystemFont,sans-serif;
  --display-weight:800; /* Extra bold */
  --body-leading:1.62; --label-size:.8rem; --label-tracking:.05em;
  /* 레이아웃 */
  --content-max:1240px; --reading-max:680px;
  --gutter:20px; --section:40px;
  --radius:0px; --rule:3px; --shadow:5px 5px 0px 0px var(--border); --motion-dur:150ms; --motion-ease:cubic-bezier(0.4, 0, 0.2, 1);
}

*{box-sizing:border-box;}
html{font-size:17px;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:var(--body-leading);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none; border-bottom:var(--rule) solid transparent;
  transition:border-color var(--motion-dur) var(--motion-ease);}
a:hover{border-bottom-color:var(--accent);}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
img{max-width:100%; height:auto;}

/* ── 레이아웃 셸 ── */
.wrap{max-width:var(--content-max); margin:0 auto; padding:0 var(--gutter);}
.site-header{position:sticky; top:0; z-index:100; border-bottom:var(--rule) solid var(--border); background:var(--bg);}
.site-header .wrap{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--gutter); padding:14px var(--gutter); flex-wrap:wrap;}
.brand{font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.25rem; color:var(--text);}
.brand .tag{color:var(--text-meta); font-family:var(--font-label); font-size:.68rem;
  letter-spacing:var(--label-tracking); text-transform:uppercase; margin-left:.55rem;}
.nav{display:flex; gap:1.1rem; font-family:var(--font-label); font-size:var(--label-size);
  letter-spacing:var(--label-tracking); text-transform:uppercase;}
.nav a{color:var(--text-meta); border-bottom:none;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent);}

main{padding:var(--section) 0;}

/* 모노 메타 라벨/스트립 */
.meta-strip{font-family:var(--font-label); font-size:var(--label-size);
  letter-spacing:var(--label-tracking); color:var(--text-meta); text-transform:uppercase;}

/* ── 라이브 카운터 (Bento Stats) ── */
.counter{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--gutter); margin:2rem 0; padding:0; border:none;}
.stat-card{background:var(--surface-2); border:var(--rule) solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.4rem;}
.stat-label{font-family:var(--font-label); font-weight:800; font-size:.9rem; color:var(--text); text-transform:uppercase; letter-spacing:var(--label-tracking);}
.stat-value{font-family:var(--font-display); font-size:2.2rem; font-weight:var(--display-weight); color:var(--text); line-height:1;}
.stat-value b{color:var(--accent);}

/* ── 히어로(절제, 거대 CTA 금지) ── */
.hero{max-width:var(--content-max); margin-bottom:2rem;}
.hero h1{font-family:var(--font-display); font-weight:var(--display-weight);
  font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.2; margin:0 0 .6rem;}
.hero p{margin:.4rem 0;}
.hero .sub{color:var(--text-meta);}

/* ── 인덱스(Journal) — 도서관 대장 행 ── */
.index{width:100%; border-collapse:collapse; font-size:.95rem;}
.index thead th{font-family:var(--font-label); font-size:var(--label-size);
  letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--text-meta);
  text-align:left; border-bottom:var(--rule) solid var(--border); padding:.5rem .6rem;}
.index td{border-bottom:var(--rule) solid var(--border); padding:.6rem .6rem; vertical-align:top;}
.index .num,.index .date{font-family:var(--font-label); color:var(--text-meta); white-space:nowrap;}
.index .title a{color:var(--text); border-bottom-color:transparent;}
.index .title a:hover{color:var(--accent);}
.index tr:hover td{background:var(--surface-1);}

/* 뱃지(category/status) */
.badge{font-family:var(--font-label); font-weight:800; font-size:.75rem; letter-spacing:var(--label-tracking);
  text-transform:uppercase; border:2px solid var(--border); padding:.15rem .5rem;
  color:var(--text); background:var(--surface-1); white-space:nowrap; border-radius:0px;}
.badge.is-accent{background:var(--accent); color:var(--bg);}
/* 상태 뱃지 */
.badge.is-status-active{background:var(--surface-2); color:var(--text);}
.badge.is-status-pending{background:#E0E0E0; color:var(--text);}
.badge.is-status-dormant{background:#FFFFFF; color:var(--text-meta);}

/* ── 피드 그리드 (Cards) ── */
.feed-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--gutter); margin:1.5rem 0;}
.entry-card{background:var(--surface-1); border:var(--rule) solid var(--border); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.5rem; transition:transform var(--motion-dur) var(--motion-ease), box-shadow var(--motion-dur) var(--motion-ease);}
.entry-card:hover{transform:translate(-4px, -4px); box-shadow:9px 9px 0px 0px var(--border);}
.entry-card .date{font-family:var(--font-label); font-size:.8rem; color:var(--text-meta);}
.entry-card .title{font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.15rem; color:var(--text); border:none;}
.entry-card .title:hover{color:var(--accent);}
.entry-card .badges{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:auto; padding-top:.5rem;}

/* ── 이전 호환용(Index/Recent 숨김 또는 교체) ── */
.recent{display:none;}

/* ── 본문(editorial-longform) ── */
.reading{background:var(--reading); border-top:var(--rule) solid var(--border);
  border-bottom:var(--rule) solid var(--border);}
.entry{max-width:var(--reading-max); margin:0 auto; padding:var(--section) 0;}
.entry h1{font-family:var(--font-display); font-weight:var(--display-weight);
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.22; margin:0 0 .4rem;}
.entry .entry-meta{margin:.4rem 0 1.6rem;}
.entry-body{font-size:1.06rem; line-height:1.75;}
.entry-body h2{font-family:var(--font-display); font-weight:var(--display-weight);
  font-size:1.3rem; margin:2rem 0 .6rem; padding-top:.5rem; border-top:var(--rule) solid var(--border);}
.entry-body p{margin:0 0 1rem;}
.entry-body ul,.entry-body ol{margin:0 0 1rem; padding-left:1.3rem;}
.entry-body li{margin:.2rem 0;}
.entry-body blockquote{margin:1.2rem 0; padding:.2rem 0 .2rem 1rem;
  border-left:3px solid var(--border); color:var(--text-meta);}
.entry-body code{font-family:var(--font-label); font-size:.9em; background:var(--surface-1);
  border:var(--rule) solid var(--border); padding:.05rem .3rem;}
.entry-body pre{font-family:var(--font-label); font-size:.85rem; background:var(--surface-1);
  border:var(--rule) solid var(--border); padding:.8rem 1rem; overflow:auto; line-height:1.5;}
.entry-body pre code{background:none; border:none; padding:0;}

/* outcome / learned 강조 블록 */
.field{border:var(--rule) solid var(--border); background:var(--surface-1); padding:.8rem 1rem; margin:1rem 0; border-radius:8px;}
.field .k{font-family:var(--font-label); font-size:var(--label-size); letter-spacing:var(--label-tracking);
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:.3rem;}
.field .links{margin:.4rem 0 0; padding:0; list-style:none; font-size:.92rem;}
.tags{font-family:var(--font-label); font-size:.75rem; color:var(--text-meta); margin-top:1.4rem;}

/* ── 페이지 제목 공통 ── */
.page-title{font-family:var(--font-display); font-weight:var(--display-weight);
  font-size:clamp(1.4rem,2.6vw,1.9rem); margin:0 0 .2rem;}
.page-lede{color:var(--text-meta); margin:0 0 1.4rem; max-width:var(--reading-max);}

/* About 외부 링크 허브 */
.linkhub{list-style:none; padding:0; margin:1.2rem 0; display:flex; gap:1rem; flex-wrap:wrap;
  font-family:var(--font-label); font-size:.8rem; letter-spacing:var(--label-tracking); text-transform:uppercase;}

/* ── 푸터 ── */
.site-footer{border-top:var(--rule) solid var(--border); background:var(--surface-1);
  margin-top:var(--section); padding:1.4rem 0; font-size:.85rem; color:var(--text-meta);}
.site-footer .wrap{display:flex; justify-content:space-between; gap:var(--gutter); flex-wrap:wrap;}
.site-footer .disclosure{max-width:52ch;}

/* ── Agents 현황판 ── */
.agents-intro{max-width:var(--reading-max); color:var(--text-meta); margin:1.2rem 0;}
.agent-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--gutter); margin:1.6rem 0;}
.agent-card{border:var(--rule) solid var(--border); background:var(--surface-1); padding:1rem 1.1rem; border-radius:var(--radius); box-shadow:var(--shadow);}
.agent-card .agent-head{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;}
.agent-card h2{font-family:var(--font-display); font-weight:var(--display-weight);
  font-size:1.15rem; margin:0;}
.agent-role{margin:.2rem 0 .5rem;}
.agent-summary{font-size:.95rem; margin:.3rem 0 .7rem;}
.agent-links{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:.5rem 0 .7rem;}
.agent-links a{display:inline-block; border:2px solid var(--border); background:var(--surface-1);
  padding:.2rem .55rem; font-family:var(--font-label); font-weight:800; font-size:.8rem;
  text-decoration:none; color:var(--text); box-shadow:2px 2px 0px 0px var(--border); transition:transform 0.1s;}
.agent-links a:hover{transform:translate(-1px, -1px); box-shadow:3px 3px 0px 0px var(--border);}
.agent-entries{list-style:none; padding:.6rem 0 0; margin:.4rem 0 0;
  border-top:var(--rule) solid var(--border); font-size:.9rem;}
.agent-entries li{margin:.25rem 0;}
.agent-entries time{font-family:var(--font-label); font-size:.72rem; color:var(--text-meta); margin-right:.4rem;}
.agent-noentry{margin:.5rem 0 0; border-top:var(--rule) solid var(--border); padding-top:.6rem;
  color:var(--text-meta); font-size:.92rem;}

/* 엔트리 본문 이미지 */
.entry-body img{display:block; border:var(--rule) solid var(--border);
  box-shadow:var(--shadow); margin:1.4rem 0;}

/* 라이브 뱃지 (live.js가 채움 — 실패 시 hidden 유지) */
.live-badge[hidden]{display:none;}
.live-badge{display:inline-block; border:2px solid var(--border); background:var(--surface-1);
  box-shadow:2px 2px 0px 0px var(--border); padding:.3rem .6rem; margin:.4rem 0 .6rem;
  font-family:var(--font-label); font-size:.8rem; font-weight:700;}
.live-badge .live-label{background:var(--surface-2); border:2px solid var(--border);
  padding:.05rem .35rem; font-weight:800; margin-right:.15rem;}
.live-badge .live-up{color:#0A7A2F;}
.live-badge .live-down{color:var(--accent);}

/* 에이전트 상세 페이지 */
.agent-card h2 a{color:var(--text); border-bottom:none;}
.agent-card h2 a:hover{color:var(--accent);}
.agent-more{margin:.7rem 0 0; font-family:var(--font-label); font-weight:800; font-size:.85rem;}
.agent-crumb{margin:0 0 1.2rem;}
.agent-crumb a{color:var(--text-meta); border-bottom:none;}
.agent-crumb a:hover{color:var(--accent);}
.agent-detail-head{display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap;}
.agent-id{font-family:var(--font-label); font-size:.8rem; font-weight:800;
  letter-spacing:var(--label-tracking); color:var(--bg); background:var(--text);
  padding:.15rem .5rem; vertical-align:middle;}
.agent-detail-summary{max-width:var(--reading-max); margin:.2rem 0 1rem;}
.agent-section{margin-top:var(--section);}
.agent-milestones{margin-top:1rem;}
.agent-detail-entries{border-top:none; max-width:var(--reading-max);}
.agent-updated{margin-top:var(--section);}

/* Home 에이전트 미니 현황 */
.agents-mini{display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0;}
.agent-chip{display:inline-flex; align-items:center; gap:.4rem; border:2px solid var(--border);
  background:var(--surface-1); padding:.25rem .5rem; color:var(--text); font-weight:800; font-size:.85rem; border-radius:0px; box-shadow:2px 2px 0px 0px var(--border); transition:transform 0.1s;}
.agent-chip:hover{transform:translate(-1px, -1px); box-shadow:3px 3px 0px 0px var(--border);}

/* ── 필터 바 (Journal·Chronicle 공통) ── */
.filters{border:var(--rule) solid var(--border); background:var(--surface-1);
  padding:1rem 1.1rem; margin:0 0 1.6rem; display:flex; flex-direction:column; gap:.7rem; border-radius:var(--radius); box-shadow:var(--shadow);}
.filter-search-row{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;}
.filter-search{flex:1 1 14rem; min-width:9rem; font-family:var(--font-body); font-size:.95rem;
  background:var(--reading); color:var(--text); border:var(--rule) solid var(--border);
  padding:.35rem .6rem; border-radius:var(--radius);}
.filter-count{margin-left:auto; white-space:nowrap;}
.filter-count b{color:var(--accent);}
.filter-clear{font-family:var(--font-label); font-size:.7rem; letter-spacing:var(--label-tracking);
  text-transform:uppercase; color:var(--text-meta); background:none;
  border:var(--rule) solid var(--border); padding:.2rem .5rem; cursor:pointer; border-radius:4px;}
.filter-clear:hover{color:var(--accent); border-color:var(--accent);}
.filter-group{display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap;}
.filter-label{font-family:var(--font-label); font-size:var(--label-size);
  letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--text-meta);}
.filter-group > .filter-label{flex:0 0 3.4rem;}
.filter-chips{display:flex; gap:.4rem; flex-wrap:wrap;}
.filter-chip{font-family:var(--font-label); font-size:.7rem; letter-spacing:var(--label-tracking);
  text-transform:uppercase; color:var(--text-meta); background:var(--reading);
  border:var(--rule) solid var(--border); padding:.18rem .5rem; cursor:pointer; border-radius:6px;
  transition:border-color var(--motion-dur) var(--motion-ease), color var(--motion-dur) var(--motion-ease), background-color var(--motion-dur) var(--motion-ease);}
.filter-chip:hover{border-color:var(--accent); color:var(--accent);}
.filter-chip[aria-pressed="true"]{color:var(--reading); background:var(--accent); border-color:var(--accent);}
/* 강제색상 모드: 채움색이 시스템색으로 치환돼 선택 상태가 사라지지 않게 윤곽 보강 */
@media (forced-colors:active){
  .filter-chip[aria-pressed="true"]{outline:2px solid; outline-offset:1px;}
}
.filter-n{font-size:.9em;}

/* ── Chronicle 연대기 ── */
/* spine은 .timeline 컨테이너의 단일 연속선(::before) — 월 경계에서 끊기지 않는다. */
.timeline{max-width:var(--reading-max); position:relative; padding-left:1.4rem;}
.timeline::before{content:""; position:absolute; left:3px; top:0; bottom:0;
  width:2px; background:var(--border);}
.tl-month{margin:0;}
.tl-month-label{font-family:var(--font-label); font-size:var(--label-size);
  letter-spacing:var(--label-tracking); text-transform:uppercase; color:var(--text-meta);
  border-bottom:var(--rule) solid var(--border); padding-bottom:.35rem; margin:1.6rem 0 .2rem;}
.tl-list{list-style:none; margin:0; padding:0;}
.tl-item{position:relative; display:flex; gap:1rem; padding:.7rem 0;}
.tl-item::before{content:""; position:absolute; left:-1.4rem; top:1.05rem; width:8px; height:8px;
  background:var(--bg); border:2px solid var(--border); border-radius:50%;}
.tl-item:hover::before{border-color:var(--accent);}
.tl-date{font-family:var(--font-label); font-size:.75rem; color:var(--text-meta);
  white-space:nowrap; padding-top:.15rem; flex:0 0 5rem;}
.tl-title{color:var(--text); font-family:var(--font-display); font-weight:var(--display-weight);
  font-size:1.05rem; border-bottom-color:transparent;}
.tl-title:hover{color:var(--accent);}
.tl-badges{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.35rem;}
.tl-empty{padding:.6rem 0;}

/* ── 반응형 (모바일 1열) ── */
@media (max-width:720px){
  html{font-size:16px;}
  .site-header .wrap{flex-direction:column; align-items:flex-start; gap:.6rem;}
  .nav{flex-wrap:wrap; gap:.8rem;}
  .index thead{display:none;}
  .index,.index tbody,.index tr,.index td{display:block; width:100%;}
  .index tr{border-bottom:var(--rule) solid var(--border); padding:.6rem 0;}
  .index td{border:none; padding:.15rem 0;}
  .index .title a{font-size:1.05rem;}
  .counter{gap:.7rem 1.2rem;}
  .site-footer .wrap{flex-direction:column;}
  .agent-grid{grid-template-columns:1fr;}
  .agents-mini{gap:.4rem;}
  .agent-chip{font-size:.8rem; padding:.2rem .4rem;}
  .filter-search-row{gap:.5rem;}
  .filter-count{margin-left:0;}
  .filter-group{flex-direction:column; align-items:flex-start; gap:.3rem;}
  .filter-group > .filter-label{flex:none;}
  .tl-item{flex-direction:column; gap:.15rem;}
  .tl-date{flex:none;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important;} }