/* ============================================================
   seulki.log — 3-column reading theme
   왼쪽 정체성 | 가운데 제목 | 오른쪽 본문 · Color Hunt 뉴트럴 · 각진 네모
   가이드: accent 바 금지 · 라운드 금지 · 강조는 굵기/배경/밑줄로
   ============================================================ */

@font-face {
  font-family: "Pretendard Variable";
  src: url("../fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color Hunt: 222831 · 393E46 · 948979 · DFD0B8 (light) */
  --paper:      #DFD0B8;
  --band:       #D2C3A6;
  --card:       #E6DBC6;
  --ink:        #222831;
  --ink-soft:   #393E46;
  --ink-faint:  #6E6656;
  --line:       #C3B393;
  --line-soft:  #D0C1A2;
  --accent:     #948979;          /* 토프: 배경/아바타/호버 채움 전용 (본문 링크색 아님) */
  --accent-wash:#948979;

  --font-body: "Pretendard Variable", "Pretendard", -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;

  --reader: 1;
  --tracking: -0.015em;   /* 자간 -15 */
  --mx: clamp(1.4rem, 5vw, 2.2rem);
  --measure: 42rem;       /* 읽기 한 칼럼 폭 (본문 페이지) */
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#222831; --band:#393E46; --card:#2E343D; --ink:#DFD0B8; --ink-soft:#B7AE96;
    --ink-faint:#847B6B; --line:#3D434C; --line-soft:#31363E; --accent:#A99C84; --accent-wash:#A99C84;
  }
}
:root[data-theme="dark"] {
  --paper:#222831; --band:#393E46; --card:#2E343D; --ink:#DFD0B8; --ink-soft:#B7AE96;
  --ink-faint:#847B6B; --line:#3D434C; --line-soft:#31363E; --accent:#A99C84; --accent-wash:#A99C84;
}
:root[data-theme="light"] {
  --paper:#DFD0B8; --band:#D2C3A6; --card:#E6DBC6; --ink:#222831; --ink-soft:#393E46;
  --ink-faint:#6E6656; --line:#C3B393; --line-soft:#D0C1A2; --accent:#948979; --accent-wash:#948979;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: calc(1.0625rem * var(--reader));
  line-height: 1.85;
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease, color .4s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--mx); }

/* ============================================================
   홈 3열 = 20% : 30% : 50% · 여백 우선 · 채움 배경 없음 · 좌상단 정렬
   왼쪽열: (위) 정체성·메뉴  (아래) 연결하기
   ============================================================ */
.app { display: grid; grid-template-columns: 2fr 3fr 5fr; grid-template-rows: auto 1fr; height: 100vh; }
.app > * { overflow-y: auto; }
.rail         { grid-column: 1; grid-row: 1; border-right: 1px solid var(--line); }
.rail-connect { grid-column: 1; grid-row: 2; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.index        { grid-column: 2; grid-row: 1 / 3; border-right: 1px solid var(--line); }
.reader       { grid-column: 3; grid-row: 1 / 3; }

/* ── 왼쪽 위: 정체성 · 메뉴 (여백 넉넉, 좌상단) ── */
.rail { padding: 2.7rem 1.8rem 1.2rem; display: flex; flex-direction: column; gap: 1.7rem; }
.rail .mark { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.rail .desc { font-size: .8rem; line-height: 1.7; color: var(--ink-soft); margin: 0; max-width: 15rem; }
.rail-nav { display: flex; flex-direction: column; gap: .3rem; font-size: .86rem; line-height: 1.2; }
.rail-nav .grp { font-size: .68rem; letter-spacing: .08em; color: var(--ink-faint);
  text-transform: uppercase; margin: .95rem 0 .2rem; }
.rail-nav a { color: var(--ink-soft); width: max-content; line-height: 1.2; padding: .05rem 0; }
.rail-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── 왼쪽 아래: 연결하기 (인스타 DM + 메일) ── */
.rail-connect { padding: 1.2rem 1.8rem 2rem; gap: 1.4rem; }
.rc-in { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.rc-in .connect-form { width: 100%; gap: .55rem; margin-top: .2rem; }
.rc-in .connect-form input, .rc-in .connect-form textarea { font-size: .82rem; padding: .5rem .6rem; }
.rc-in .connect-form textarea { min-height: 3.4rem; }
.rc-in .cf-send { font-size: .82rem; padding: .5rem 1rem; width: max-content; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: .6rem;
  font-size: .72rem; color: var(--ink-faint); padding-top: 1.6rem; }
.rail-connect .theme { align-self: flex-start; border: 1px solid var(--line); color: var(--ink-soft);
  padding: .3rem .7rem; }
.rail-connect .theme:hover { border-color: var(--ink); color: var(--ink); }

/* ── 가운데: 글 제목 목록 (한 줄: 카테고리 · 제목 · 업로드일) ── */
.index { padding: 2.4rem 0 3rem; }
.ix-item { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 0 .9rem; align-items: baseline;
  text-align: left; border-top: 1px solid var(--line-soft); padding: 1rem 1.8rem; }
.ix-item:first-of-type { border-top: none; }
.ix-item:hover { background: var(--card); }
.ix-item.active { background: var(--band); }
.ix-item .c { font-size: .7rem; font-weight: 600; color: var(--ink-faint); }
.ix-item .t { font-size: .83rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.ix-item.active .t { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ix-item .d { font-size: .7rem; color: var(--ink-faint); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right; }

/* ── 오른쪽: 글 내용 ── */
.reader { padding: 2.7rem clamp(1.6rem,3vw,3.6rem) 4rem; }
.panel { display: none; max-width: 36rem; }
.panel.active { display: block; }
.panel > h1 { font-size: calc(1.55rem * var(--reader)); font-weight: 700; line-height: 1.32;
  letter-spacing: -.03em; margin: 0 0 .85rem; text-wrap: balance; }
.panel > .meta { font-size: .72rem; color: var(--ink-faint); display: flex; gap: .85rem;
  flex-wrap: wrap; align-items: center; margin: 0 0 2rem; padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--line); }
.panel-open { margin: 1.6rem 0 0; font-size: .72rem; }
.panel-open a { text-decoration: underline; text-underline-offset: 2px; color: var(--ink-soft); }
.panel-open a:hover { color: var(--ink); }

/* ============================================================
   비홈 페이지: masthead
   ============================================================ */
.masthead-o { border-bottom: 1px solid var(--line); }
.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 1.6rem var(--mx) 1.3rem; max-width: var(--measure); margin: 0 auto;
  flex-wrap: wrap;
}
.mark { font-size: .95rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.controls { display: flex; align-items: center; gap: 1.2rem; }
.controls .navlink { font-size: .84rem; font-weight: 500; color: var(--ink-soft); }
.controls .navlink:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fs { display: inline-flex; align-items: baseline; gap: .1rem; }
.fs button, .theme {
  font-family: var(--font-body); background: none; border: none; cursor: pointer;
  color: var(--ink-faint); padding: .25rem .4rem; line-height: 1; border-radius: 0;
  transition: color .2s ease;
}
.fs button:hover, .theme:hover { color: var(--ink); }
.fs button.on { color: var(--ink); }
.fs .a1 { font-size: .7rem; } .fs .a2 { font-size: .84rem; } .fs .a3 { font-size: 1rem; }
.theme { font-size: .78rem; font-weight: 500; text-transform: uppercase; }

/* #독립자본 (footer 등) — accent 바 아님, 텍스트 강조만 */
.term { color: var(--ink); font-weight: 700; white-space: nowrap; }
.term::before { content: "#"; opacity: .5; font-weight: 400; }

/* ---- 연도별 목록 (전체글 · 분류 페이지) ---- */
.year { font-size: .8rem; font-weight: 700; color: var(--ink-faint); letter-spacing: .04em;
  margin: 2.4rem 0 .1rem; font-variant-numeric: tabular-nums; }
.list { display: flex; flex-direction: column; }
.item { display: grid; grid-template-columns: 3rem 1fr; gap: 0 1.2rem; align-items: baseline;
  padding: 1.5rem 0; border-top: 1px solid var(--line-soft); }
.item:first-of-type { border-top: none; }
.idate { font-size: .82rem; color: var(--ink-faint); font-variant-numeric: tabular-nums;
  white-space: nowrap; letter-spacing: 0; }
.ibody h3 { margin: 0 0 .3rem; font-weight: 600; font-size: calc(1.2rem * var(--reader));
  line-height: 1.42; letter-spacing: -0.02em; text-wrap: balance; }
.ibody h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.isum { margin: 0 0 .5rem; color: var(--ink-soft); font-size: calc(.94rem * var(--reader));
  line-height: 1.72; max-width: 34rem; }
.icat { font-size: .76rem; font-weight: 600; color: var(--ink-faint); }

/* ============================================================
   글 페이지 (single) & 목록/분류 헤더
   ============================================================ */
.post { padding-top: clamp(2.4rem,6vw,3.6rem); padding-bottom: 1rem; }
.post .h1 { font-size: calc(1.55rem * var(--reader)); font-weight: 700;
  line-height: 1.35; margin: 0 0 .9rem; text-wrap: balance; letter-spacing: -0.025em; }
.post .post-meta { font-size: .72rem; font-weight: 450; color: var(--ink-faint);
  margin: 0 0 2.2rem; display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }
.post .post-meta a { color: var(--ink-soft); font-weight: 550; }
.post .post-meta a:hover { text-decoration: underline; text-underline-offset: 2px; }
.post .post-meta .num { font-variant-numeric: tabular-nums; }

.post-content { font-size: calc(.92rem * var(--reader)); line-height: 1.9; color: var(--ink); }
.post-content > * + * { margin-top: 1.25em; }
.post-content h2 { font-size: calc(1.08rem * var(--reader)); font-weight: 700; line-height: 1.4;
  margin-top: 2.4em; margin-bottom: .2em; letter-spacing: -0.02em; }
.post-content h3 { font-size: calc(.98rem * var(--reader)); font-weight: 700; margin-top: 1.8em; margin-bottom: .1em; }
.post-content p { margin: 0; }
.post-content a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line); }
.post-content a:hover { text-decoration-color: var(--ink); }
.post-content strong { font-weight: 700; }
.post-content ul, .post-content ol { margin: 0; padding-left: 1.3em; }
.post-content li { margin: .35em 0; }
/* 인용: 왼쪽 바 없음. 배경 블록으로 */
.post-content blockquote { margin: 0; background: var(--card); border: 1px solid var(--line);
  padding: .9rem 1.1rem; color: var(--ink-soft); }
.post-content code { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: .9em;
  background: var(--card); padding: .1em .35em; border-radius: 0; letter-spacing: 0; }
.post-content pre { background: var(--card); border: 1px solid var(--line); border-radius: 0;
  padding: 1rem 1.1rem; overflow-x: auto; }
.post-content pre code { background: none; padding: 0; }
.post-content img { border-radius: 0; }
.post-content hr { border: none; border-top: 1px solid var(--line); margin: 2.4em 0; }

/* summary shortcode (브리핑, AEO 블록) — 왼쪽 바 없음, 전체 테두리 + 배경 + 굵기 */
.summary-box { background: var(--card); border: 1px solid var(--line); border-radius: 0;
  padding: 1.1rem 1.3rem; margin-top: 2em; }
.summary-box .label { font-size: .72rem; font-weight: 700; color: var(--ink);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .5rem; }
.summary-box p { margin: .3em 0; }

.author-box { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.author-box p { font-size: .94rem; color: var(--ink-soft); line-height: 1.75; margin: 0; }
.author-box .name { font-weight: 700; color: var(--ink); }
.author-box a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* list / taxonomy pages */
.page-head { padding-top: clamp(2.4rem,6vw,3.6rem); }
.page-head h1 { font-size: calc(clamp(1.4rem,3vw,1.8rem) * var(--reader)); font-weight: 700; margin: 0 0 .5rem; letter-spacing: -0.02em; }
.page-head .lede { color: var(--ink-soft); margin: 0; }

/* ---- footer (작가 소개 + 저작권, 컨택트 영역에 바로 붙게) ---- */
footer.site { border-top: 1px solid var(--line); margin-top: 0; }
.footin { padding: 1.6rem 0 3rem; display: flex; flex-direction: column; gap: .9rem; }
.author-bio { display: flex; flex-direction: column; gap: .3rem; max-width: 34rem; }
.author-bio p { margin: 0; font-size: .8rem; line-height: 1.7; color: var(--ink-soft); }
.author-bio b { color: var(--ink); font-weight: 700; }
.author-bio a { width: max-content; font-size: .78rem; color: var(--ink);
  text-decoration: underline; text-underline-offset: 2px; }
.colo { font-size: .74rem; color: var(--ink-faint); text-align: left; margin: 0; }
.rail-foot .author-bio p, .rail-foot .author-bio a { font-size: .74rem; }

/* ---- 메일 팝업(모달) ---- */
.mail-modal { border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink);
  padding: 0; max-width: 30rem; width: calc(100% - 2rem); }
.mail-modal::backdrop { background: rgba(0,0,0,.45); }
.mail-modal-in { padding: 1.5rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .7rem; }
.mail-modal-h { font-size: .95rem; font-weight: 700; margin: 0; }
.modal-close { align-self: flex-end; background: none; border: 0; padding: 0; margin: -.3rem -.3rem -.5rem 0;
  font-size: 1.1rem; line-height: 1; color: var(--ink-faint); cursor: pointer; }
.modal-close:hover { color: var(--ink); }
.mail-modal .connect-form { gap: .7rem; }
.mail-modal .cf-foot { margin-top: .3rem; }

/* ---- reactions bar (조회 · 좋아요 · 공유) — 각진 ---- */
.reactions {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 2.4rem 0 0; padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--ink-soft);
}
.reactions .num { font-variant-numeric: tabular-nums; }
.reactions button {
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: 0; padding: .3rem .75rem; cursor: pointer; font: inherit;
  line-height: 1; display: inline-flex; align-items: center; gap: .4rem;
  transition: border-color .15s, color .15s, background .15s;
}
.reactions button:hover { border-color: var(--ink); color: var(--ink); }
.react-like .ic { font-size: 1.05rem; }
.react-like.on { color: var(--ink); border-color: var(--ink); background: var(--band); }
.react-views { color: var(--ink-faint); }
.react-share-group { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; }
.react-share-label { color: var(--ink-faint); }
.react-share { padding: .22rem .6rem; font-size: .82rem; }
.react-shares { color: var(--ink-faint); }
@media (max-width: 560px) {
  .react-share-group { margin-left: 0; }
}

/* ---- 컨택트 (홈 왼쪽열 아래 · 글 페이지 아래 공통) — 글씨만, 각진 ---- */
.contact { margin-top: clamp(2rem, 5vw, 3rem); padding: 0; }
.contact-in { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.contact-in .connect-form { width: 100%; max-width: 30rem; }
/* 인스타 DM · 메일 보내기: 버튼 없이 글씨만 (밑줄 텍스트) */
.c-ig, .c-mail-toggle { font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.c-ig:hover, .c-mail-toggle:hover { text-decoration-color: var(--ink); }

.connect-form { display: flex; flex-direction: column; gap: .9rem; }
.cf-row { display: flex; flex-direction: column; gap: .9rem; }   /* 이름·이메일도 세로 1열 */
.cf-row .cf-field { flex: 1; }
.cf-field { display: flex; flex-direction: column; gap: .35rem; }
.cf-label { font-size: .8rem; font-weight: 550; color: var(--ink-soft); }
.connect-form input[type="text"],
.connect-form input[type="email"],
.connect-form textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  padding: .6rem .7rem; width: 100%;
  transition: border-color .15s ease;
}
.connect-form textarea { resize: vertical; min-height: 5.5rem; line-height: 1.6; }
.connect-form input:focus, .connect-form textarea:focus { outline: none; border-color: var(--ink); }
.cf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.cf-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cf-send {
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  background: var(--ink); color: var(--paper); border: none; border-radius: 0;
  padding: .65rem 1.4rem; transition: opacity .15s ease;
}
.cf-send:hover { opacity: .88; }
.cf-send:disabled { opacity: .5; cursor: default; }
.cf-status { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.cf-status.ok { color: var(--ink); }
.cf-status.err { color: #A33B2C; }

.author-ig { margin: .55rem 0 0; font-size: .9rem; }
.author-ig a { color: var(--ink); font-weight: 550; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 820px) {
  .connect-in, .connect-in.has-form { grid-template-columns: 1fr; }
  .cf-row { flex-direction: column; }
}

/* ============================================================
   반응형
   ============================================================ */
/* 홈 모바일: 30:70 (정체성 | 제목목록), 그 아래 연결하기 전체폭 1열. 제목 탭 → 전체 페이지 */
@media (max-width: 820px) {
  body.home .app { grid-template-columns: 3fr 7fr; grid-template-rows: auto auto; height: auto; }
  body.home .app > * { overflow-y: visible; }
  body.home .rail { grid-column: 1; grid-row: 1; }
  body.home .index { grid-column: 2; grid-row: 1; border-right: 0; }
  body.home .reader { display: none; }
  body.home .rail-connect { grid-column: 1 / 3; grid-row: 2; border-right: 0;
    border-top: 1px solid var(--line); }
  body.home .rc-in { max-width: 30rem; }
  body.home .rail .desc { max-width: none; }
}
/* 비홈 목록 */
@media (max-width: 560px) {
  .item { grid-template-columns: 1fr; gap: .3rem; }
  .footin { flex-direction: column; align-items: flex-start; }
  .colo { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}