/* ============================================================
   kadecho.dev — 사이트 스타일 (원본 소스, 커밋 대상)
   build.js가 이 폴더(assets/)를 site/assets/ 로 복사합니다.
   HTML은 /assets/style.css 로 참조합니다.
   ============================================================ */

/* ---------- 테마 토큰 ---------- */
:root,
:root[data-theme="dark"] {
  --bg: #0e1116;
  --bg-soft: #141922;
  --card: #161c26;
  --card-hover: #1b2230;
  --border: #232b38;
  --text: #e6ebf3;
  --muted: #9aa7bd;
  --accent: #6ee7b7;
  --accent-2: #7aa2ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
  --ring: rgba(122, 162, 255, .45);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-soft: #f5f7fa;
  --card: #ffffff;
  --card-hover: #f7f9fc;
  --border: #e2e8f0;
  --text: #16202e;
  --muted: #5a6b83;
  --accent: #0f9d76;
  --accent-2: #3b6fe0;
  --shadow: 0 1px 2px rgba(16, 32, 55, .06), 0 8px 24px rgba(16, 32, 55, .07);
  --ring: rgba(59, 111, 224, .35);
  color-scheme: light;
}

/* ---------- 기본 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; }

a {
  color: var(--accent-2);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: 22px;
}

/* ---------- 헤더 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg); /* color-mix 미지원 브라우저 대비 */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-weight: 700;
  font-size: 1.53rem; /* 기존 1.02rem × 1.5 */
  letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; opacity: .85; }

.logo { width: 26px; height: 26px; display: block; }

/* 워드마크. 글자는 그대로 두고 그림으로 덮습니다.
   CSS가 안 먹거나 이미지를 못 받아오면 "kadecho.dev" 글자가 그대로 보이고,
   화면 낭독기도 글자를 읽습니다. 그림만 넣으면 둘 다 잃습니다.

   테마마다 파일이 다른 이유는 색이 파일 안에 박혀 있기 때문입니다.
   배경은 비치므로(마스크로 뚫어 둠) 어느 배경에 올려도 됩니다.
   테마 색을 바꾸면 npm run wordmark 로 다시 만들어야 합니다.

   nowing = K 와 V 의 날개(스와시)를 뺀 판. 날개가 있는 예전 판도
   assets/logo/wordmark-{dark,light}[-solid].svg 로 남겨 두었습니다.

   solid = 본문 글자색 단색. 그라데이션 판(-solid 없는 파일)도 있지만 쓰지 않습니다.
   민트에서 파랑으로 넘어가는 그라데이션은 개발 도구와 AI 스타트업의 관용구라,
   읽는 사람(작은 회사 사장)에게 "여기는 IT 하는 사람들 자리"로 읽힙니다.
   단색은 브랜드가 소리치지 않고 글이 앞에 섭니다. */
.brand .wordmark {
  display: block;
  width: 124px;
  height: 30px;
  background: url(/assets/logo/wordmark-nowing-dark-solid.svg) no-repeat left center;
  background-size: contain;
  text-indent: -200vw;
  overflow: hidden;
  white-space: nowrap;
}

:root[data-theme="light"] .brand .wordmark {
  background-image: url(/assets/logo/wordmark-nowing-light-solid.svg);
}

/* 좁은 화면에서는 오른쪽 메뉴에 자리를 내줍니다 */
@media (max-width: 480px) {
  .brand .wordmark { width: 104px; height: 25px; }
}

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: .93rem;
}

.nav a { color: var(--muted); }
.nav a:hover { color: var(--text); text-decoration: none; }

.nav .sep {
  width: 1px;
  height: 16px;
  background: var(--border);
}

.iconbtn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 9px;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.iconbtn:hover { background: var(--card-hover); border-color: var(--accent-2); }

/* ---------- 메인 ---------- */
main.wrap {
  flex: 1;
  padding-block: 44px 72px;
}

/* ---------- 히어로 ---------- */
.hero { padding-block: 26px 40px; }

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.22;
  letter-spacing: -.035em;
  font-weight: 800;
}

.hero p {
  margin: 0;
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 56ch;
}

.grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .62rem 1.15rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  color: #0b0f14;
}
.btn-primary:hover { opacity: .9; }

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent-2); background: var(--bg-soft); }

/* ---------- 섹션 제목 ---------- */
.section-title {
  margin: 8px 0 18px;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  scroll-margin-top: 80px;
}

/* ---------- 글 목록 ---------- */
.postlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.post-item {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.post-item:hover {
  text-decoration: none;
  background: var(--card-hover);
  border-color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border));
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.post-item time {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.post-item h2 {
  margin: .3rem 0 .4rem;
  font-size: 1.28rem;
  line-height: 1.35;
  letter-spacing: -.02em;
  font-weight: 700;
}

.post-item p {
  margin: 0;
  color: var(--muted);
  font-size: .96rem;
}

/* ---------- 태그 ---------- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: .7rem;
}

.tag {
  font-size: .76rem;
  padding: .16rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--muted);
  letter-spacing: .01em;
}

/* ---------- 본문(글/소개) ---------- */
.article { padding-bottom: 8px; }

.article-head {
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border);
}

.article-head time {
  font-size: .85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 제목 위 한 줄: 날짜 · 글쓴이 — 읽기 전에 누가 썼는지 보이도록 */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
}
.article-meta .dot { color: var(--border); }
.article-meta .byline {
  color: var(--muted);
  font-weight: 600;
}
.article-meta .byline:hover { color: var(--accent-2); text-decoration: none; }

.article-head h1 {
  margin: .35rem 0 0;
  font-size: clamp(1.7rem, 4.6vw, 2.35rem);
  line-height: 1.3;
  letter-spacing: -.03em;
  font-weight: 800;
}

.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }

.prose h2 {
  margin: 2.4rem 0 .9rem;
  font-size: 1.42rem;
  line-height: 1.4;
  letter-spacing: -.02em;
  font-weight: 700;
}

.prose h3 {
  margin: 1.9rem 0 .7rem;
  font-size: 1.14rem;
  font-weight: 700;
}

.prose p { margin: 0 0 1.15rem; }

.prose ul,
.prose ol {
  margin: 0 0 1.15rem;
  padding-left: 1.35rem;
}
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--accent); }

.prose strong { font-weight: 700; color: var(--text); }

.prose a { text-decoration: underline; text-underline-offset: 3px; }

.prose blockquote {
  margin: 1.6rem 0;
  padding: .9rem 1.2rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--bg-soft);
  color: var(--muted);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr {
  margin: 2.6rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .88em;
  padding: .15em .4em;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}

.prose pre {
  margin: 1.5rem 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  line-height: 1.6;
}
.prose pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: .875rem;
}

.prose img { border-radius: 12px; }

.prose table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: .94rem;
}
.prose th,
.prose td {
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  text-align: left;
}
.prose th { background: var(--bg-soft); font-weight: 700; }

/* ---------- 저자 카드 (글 하단) ---------- */
.author-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 48px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}

.author-avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.author-avatar .logo { width: 28px; height: 28px; }

.author-body { min-width: 0; }

.author-label {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

.author-name {
  margin: .15rem 0 .4rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.author-bio {
  margin: 0;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.65;
}

.author-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: .8rem 0 0;
  font-size: .88rem;
}
.author-links a { color: var(--accent-2); }
.author-links a:hover { text-decoration: underline; }

/* 다른 언어판 안내 줄. 홈 맨 위에 놓입니다.
   자동으로 언어를 바꿔 보내는 대신 눈에 보이게 알리는 자리라, 지나치지 않을 만큼만 눈에 띄게 합니다. */
.lang-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 22px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: .88rem;
}
.lang-notice a { color: var(--accent-2); font-weight: 600; white-space: nowrap; }
.lang-notice a:hover { text-decoration: underline; }

/* 글 끝의 연락 한 줄.
   테두리도 배경도 없는 평범한 문장으로 둡니다. 상자에 넣는 순간 광고처럼 읽히고,
   그러면 글 전체의 신뢰까지 같이 깎입니다. */
.post-contact {
  margin: 18px 2px 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.65;
}
.post-contact a { color: var(--accent-2); }
.post-contact a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .author-card { padding: 18px; gap: 13px; }
  .author-avatar { width: 44px; height: 44px; }
  .author-avatar .logo { width: 24px; height: 24px; }
}

.backlink {
  display: inline-block;
  margin-top: 34px;
  font-size: .93rem;
  color: var(--muted);
}
.backlink:hover { color: var(--accent-2); text-decoration: none; }

/* ---------- 뉴스레터 ---------- */
.newsletter {
  margin-top: 56px;
  padding: 28px 26px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card); /* color-mix 미지원 브라우저 대비 */
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    var(--card);
}

.newsletter h3 {
  margin: 0 0 .4rem;
  font-size: 1.16rem;
  letter-spacing: -.02em;
  font-weight: 700;
}

.newsletter > p {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: .95rem;
}

.subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subscribe input {
  flex: 1 1 220px;
  min-width: 0;
  padding: .62rem .85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
}
.subscribe input::placeholder { color: var(--muted); }
.subscribe input:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ---------- 광고 슬롯 ---------- */
.ad-slot {
  margin: 40px 0 8px;
  padding: 22px 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  background: var(--bg-soft);
}

/* ---------- 푸터 ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--muted);
  font-size: .87rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 24px;
}

.foot-links {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--accent-2); text-decoration: none; }

/* 아이콘 링크(스레드). fill 이 currentColor 라 위의 색·hover 규칙을 그대로 물려받습니다.
   inline-flex 로 감싸는 이유는 svg 밑에 생기는 기준선 여백을 없애 RSS 글자와 높이를 맞추기 위해서입니다. */
.foot-icon {
  display: inline-flex;
  align-items: center;
}

/* ---------- 소개 페이지 스레드 한 줄 ---------- */
/* 바로 위 "연락:" 줄과 짝을 이루도록 문단 간격을 좁혔습니다. */
.about-threads {
  margin-top: -.6em;
}
.about-threads a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------- 반응형 ---------- */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 18px; }
  main.wrap { padding-block: 32px 56px; }
  .nav { gap: 12px; font-size: .88rem; }
  .post-item { padding: 17px 18px; }
  .newsletter { padding: 22px 18px; }
  .cta .btn { flex: 1 1 auto; }
}

/* ---------- 접근성/인쇄 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

@media print {
  .site-header, .site-footer, .newsletter, .ad-slot, .cta, .backlink { display: none; }
  body { background: #fff; color: #000; }
}