/* ceo-homepage site/ — 시안 B「육수 장부」 토큰 반영 (R1b 프론트)
   원천: design/proposal-B.css (design/proposal-B-r2 로 정련 중). 값은 전부 :root 의 --토큰에만 둔다 —
   정련본이 나오면 이 블록의 값만 교체하고, 아래 규칙은 var() 로만 참조한다.
   외부 요청 0: 폰트는 assets/fonts/ 로컬 파일. */

/* 폰트 — design/fonts-b 의 OFL 서브셋(KS X 1001 한글 2,350자 범위), 라이선스는 fonts/licenses/ */
@font-face{font-family:"HahmletB";src:url("fonts/Hahmlet-400-KSX1001.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"HahmletB";src:url("fonts/Hahmlet-700-KSX1001.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"GothicA1B";src:url("fonts/GothicA1-Regular-KSX1001.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"GothicA1B";src:url("fonts/GothicA1-Bold-KSX1001.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* 색 — 장부지·청먹·괘선녹·갈적·연필 (대비는 모눈 선이 겹친 최악 배경 기준: ink 9.96, rule 5.13, red 5.08, pencil 5.13) */
  --paper:#f4efe3;
  --ink:#1e2b26;
  --rule:#3f5a4a;        /* 괘선·여백 라벨 전용 */
  --red:#8e3b22;         /* 마진선·강조 */
  --pencil:#5a534a;      /* 보조 텍스트 */
  --grid-line:rgba(63,90,74,.09);     /* 24px 모눈 */
  --row-line:rgba(63,90,74,.45);      /* 구역 하단 괘선 */
  --margin-line:var(--red);
  --margin-line-opacity:.55;

  /* 서체 — 지금은 시스템 스택(heading=세리프, body=고딕) */
  --font-display:"HahmletB","Hahmlet","Nanum Myeongjo","AppleMyungjo","Noto Serif KR","Batang",Georgia,serif;
  --font-body:"GothicA1B","Gothic A1","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Helvetica Neue",Arial,sans-serif;

  /* 타이포 스케일 (시안 B: 본문 16px / 행간 1.875 = 30px 장부 행) */
  --fs-small:.8rem;
  --fs-label:.78rem;
  --fs-body:1rem;
  --fs-lead:1.15rem;
  --fs-h2:1.6rem;
  --fs-h1:clamp(2.4rem,6.5vw,5rem);   /* 서브페이지 제목. 홈 이름(5~10.5rem)은 시안 확정 후 .page-title--hero 로 */
  --lh-body:1.875;
  --lh-tight:1.15;

  /* 모눈·간격 — 24px 단위 */
  --u:24px;
  --page-pad:max(16px,4vw);

  /* 12칼럼 + 장부 여백 칼럼(왼쪽 2칼럼) */
  --cols:12;
  --gutter:var(--u);
  --margin-cols:2;
  --measure:38rem;
}

/* reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:var(--u) var(--u);
  color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  word-break:keep-all;overflow-wrap:break-word;
  min-height:100vh;display:flex;flex-direction:column;
}
img,svg,video{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
a{color:inherit;text-underline-offset:.2em}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-tight)}
h1{font-weight:700;letter-spacing:-.02em}
h2{font-weight:600;font-size:var(--fs-h2)}
p{max-width:var(--measure)}
address{font-style:normal}

/* 접근성 */
.skip-link{
  position:absolute;left:var(--page-pad);top:0;transform:translateY(-120%);
  background:var(--ink);color:var(--paper);padding:.5em 1em;z-index:100;text-decoration:none;
}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;
}

/* 12칼럼 그리드 — 구역(row)은 '여백 칼럼 + 본문' 두 덩어리 */
.row-grid,.row{
  display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);
  padding-inline:var(--page-pad);
}
.row{position:relative;padding-block:calc(var(--u) * 3);border-bottom:1px solid var(--row-line)}
.row::before{ /* 마진선: 여백 칼럼 오른쪽 끝 */
  content:"";position:absolute;top:0;bottom:0;
  left:calc(var(--page-pad) + (100% - 2 * var(--page-pad) - (var(--cols) - 1) * var(--gutter)) / var(--cols) * var(--margin-cols) + (var(--margin-cols) - .5) * var(--gutter));
  border-left:2px solid var(--margin-line);opacity:var(--margin-line-opacity);
}
.margin{
  grid-column:1 / span var(--margin-cols);font-family:var(--font-body);
  font-size:var(--fs-label);font-weight:700;color:var(--rule);letter-spacing:.06em;line-height:1.6;
  font-variant-numeric:tabular-nums;
}
.body{grid-column:calc(var(--margin-cols) + 1) / -1;padding-left:calc(var(--u) * .5)}
.body>*+*{margin-top:var(--u)}

/* 사이트 머리·내비게이션 */
.site-header{border-bottom:2px solid var(--rule);background:var(--paper)}
.site-header .row-grid{padding-block:calc(var(--u) * .75);align-items:baseline;font-size:var(--fs-small)}
.site-name{grid-column:1 / span 3;font-weight:700;text-decoration:none}
.site-nav{grid-column:4 / -1;display:flex;flex-wrap:wrap;gap:.2em 1.4em;justify-content:flex-end}
.site-nav a{text-decoration:none;font-variant-numeric:tabular-nums;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--red)}
.site-nav a[aria-current="page"]{font-weight:700;border-bottom-color:var(--red)}

/* 본문 */
main{flex:1}
.page-title{font-size:var(--fs-h1)}

/* 홈 히어로 (proposal-B-r2) */
.hero{padding-block:calc(var(--u) * 4) calc(var(--u) * 3)}
.hero .margin{align-self:start;padding-top:1.2em}
.hero__name{font-size:clamp(5rem,13vw,10.5rem);line-height:1;letter-spacing:-.02em}
.hero__sub{font-family:var(--font-display);font-size:var(--fs-lead);color:var(--pencil);margin-top:calc(var(--u) * .75)}
.hero__top{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u) * 2)}
.hero__line{
  margin-top:calc(var(--u) * 2);padding-block:calc(var(--u) * .5);
  border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);
  font-family:var(--font-display);font-size:var(--fs-lead);line-height:1.75;max-width:46em;
}
/* 인물 컷: 정사각 최대 240px, 1px 테두리 + 종이 여백 + 위쪽 테이프 한 조각. 그림자·둥근 모서리·원형 크롭 없음 */
.portrait{position:relative;flex:0 0 auto;width:min(240px,28vw);margin-top:calc(var(--u) * .5)}
.portrait__frame{position:relative;aspect-ratio:1 / 1;border:1px solid var(--ink);padding:8px;background:var(--paper)}
.portrait__frame::before{
  content:"";position:absolute;top:-10px;left:50%;width:72px;height:20px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(244,239,227,.85);border:1px solid var(--row-line);
}
.portrait img{display:block;width:100%;height:100%;object-fit:cover}
.portrait figcaption{margin-top:.4em;font-size:var(--fs-small);color:var(--pencil)}
.img-note{grid-column:1 / -1;margin-top:var(--u);font-size:var(--fs-small);color:var(--pencil);max-width:none}

/* 장부 표 (시안 B): 연도·월·기록. 390px 에서도 월 열을 숨기지 않고 폭만 줄인다 */
.book{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.book th{font-size:.75rem;color:var(--rule);text-align:left;font-weight:700;border-bottom:2px solid var(--ink);padding:0 0 .3em}
.book td{padding:.45em .8em .45em 0;border-bottom:1px solid var(--row-line);vertical-align:top}
.book td:first-child{font-family:var(--font-display);font-weight:700;color:var(--red);width:5.5em}
.book td:nth-child(2){color:var(--pencil);width:3.5em}
.book .book__group th{padding-top:calc(var(--u) * 1.5);font-size:.8rem;letter-spacing:.06em;border-bottom:1px solid var(--rule)}
.sub{font-size:var(--fs-lead);color:var(--rule);margin-top:calc(var(--u) * 2)}
.note{color:var(--pencil);font-size:var(--fs-small)}

/* 인용·목록 (R5) */
.quote{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.5;max-width:30em}
.quote--s{font-size:1.1rem;padding-left:var(--u);border-left:2px solid var(--rule)}
.quote footer{font-family:var(--font-body);font-size:var(--fs-small);color:var(--pencil);margin-top:.5em}
.creed{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.4;max-width:24em}
.lines li{padding:.45em 0;border-bottom:1px solid var(--row-line);max-width:var(--measure)}
.more a{font-size:var(--fs-small)}
.site-footer .row-grid{align-items:start}

/* 출처 영역(R10b) — 장부 하단 주석 느낌의 작은 글씨 */
.src-block{padding:calc(var(--u) * 1.5) var(--page-pad) calc(var(--u) * 2);border-top:1px solid var(--row-line)}
.src-title{font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;color:var(--rule);margin-bottom:.5em}
.src-list li{font-size:var(--fs-small);color:var(--pencil);line-height:1.7;padding:.15em 0;max-width:none}

/* 사이트 바닥 */
.site-footer{border-top:2px solid var(--rule);background:var(--paper);padding-block:calc(var(--u) * 1.5);font-size:var(--fs-small);color:var(--pencil)}
.site-footer strong{color:var(--ink)}
.site-footer a{color:var(--ink)}
.margin-span{grid-column:1 / -1}

@media (max-width:760px){
  .row::before{left:var(--page-pad);opacity:.45}
  .site-name,.site-nav{grid-column:1 / -1}
  .site-nav{justify-content:flex-start;margin-top:.4em}
  .margin{grid-column:1 / -1;margin-bottom:calc(var(--u) * .5);padding-left:12px}
  .body{grid-column:1 / -1;padding-left:12px}
  .hero .margin{padding-top:0}
  .hero__top{flex-direction:column-reverse;gap:var(--u)}
  .portrait{width:160px}
  .hero__line{font-size:1.05rem}
  .book{font-size:.9rem}
  .book td{padding-right:.5em}
  .book td:first-child{width:3.4em}
  .book td:nth-child(2){width:2.4em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .skip-link,.site-nav{display:none}
}