:root {
  /* 색상 */
  --page: #f7f8fc;
  --paper: #ffffff;
  --ink: #222c3d;
  --soft-ink: #596579;
  --muted: #667085;
  --line: #e5eaf1;
  --blue: #2f67c8;
  --blue-pale: #e5efff;
  --green: #147a55;
  --green-pale: #e2f5ec;
  --orange: #9a570f;
  --orange-pale: #fff0dc;
  --focus: #1d4ed8;

  /* 공통 레이아웃 */
  --content-max: 800px;
  --page-inline: 16px;
  --page-block-start: 36px;
  --page-block-end: 60px;
  --section-space: 43px;
  --surface-radius: 9px;

  /* 공통 컴포넌트 크기 */
  --header-height: 62px;
  --search-width: 124px;
  --search-height: 32px;
  --card-padding: 16px;
  --tag-panel-padding: 14px;
  --tag-panel-bottom-space: 38px;
  --stream-gap: 12px;
  --stream-meta-width: 52px;

  /* 모바일을 기준으로 한 글자 크기 */
  --font-body: 1rem;
  --line-body: 1.7;
  --font-brand: 0.9375rem;
  --font-search: 0.75rem;
  --font-section: 0.875rem;
  --font-card-title: 1.125rem;
  --font-card-copy: 0.875rem;
  --font-meta: 0.75rem;
  --font-page-title: 2rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: var(--font-body);
  letter-spacing: 0;
  line-height: var(--line-body);
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--blue);
}

/* 키보드 사용자가 현재 위치를 확인할 수 있는 공통 포커스 */
:where(a, button, input):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

button,
input {
  font: inherit;
}

/* 헤더와 공통 페이지 폭 */
.site-header {
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: var(--header-height);
  justify-content: space-between;
  padding-inline: max(
    var(--page-inline),
    calc((100% - var(--content-max)) / 2 + var(--page-inline))
  );
}

.brand {
  align-items: center;
  display: inline-flex;
  font-size: var(--font-brand);
  font-weight: 800;
  gap: 7px;
}

.brand-icon {
  display: block;
  height: 30px;
  object-fit: contain;
  width: 30px;
}

.search-bar {
  align-items: center;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  height: var(--search-height);
  overflow: hidden;
  width: var(--search-width);
}

.search-bar:focus-within {
  border-color: var(--blue);
}

.search-bar input {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: var(--font-search);
  height: 100%;
  min-width: 0;
  outline: 0;
  padding: 0 0 0 10px;
  width: 100%;
}

.search-bar input::placeholder {
  color: var(--muted);
}

.search-bar button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--soft-ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  height: 100%;
  justify-content: center;
  padding: 0;
  width: 31px;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* 반복 헤더를 건너뛰는 링크는 포커스될 때만 표시 */
.skip-link {
  background: var(--ink);
  color: var(--paper);
  left: var(--page-inline);
  padding: 8px 12px;
  position: fixed;
  top: 0;
  transform: translateY(-150%);
  z-index: 10;
}

.skip-link:focus {
  color: var(--paper);
  transform: translateY(0);
}

main {
  margin: 0 auto;
  max-width: var(--content-max);
  padding: var(--page-block-start) var(--page-inline) var(--page-block-end);
}

/* 찾을 수 없는 경로 */
.not-found-state {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  max-width: 560px;
  padding: 28px 0;
}

.not-found-state > p {
  color: var(--blue);
  font-size: var(--font-meta);
  font-weight: 800;
  margin: 0;
}

.not-found-state h1 {
  font-size: var(--font-page-title);
  line-height: 1.3;
  margin: 4px 0;
}

.not-found-state > span {
  color: var(--soft-ink);
  display: block;
  font-size: var(--font-card-copy);
}

.not-found-state .back-to-all {
  margin-bottom: 0;
  margin-top: 24px;
}

/* 전체 글 전용 화면 */
.articles-page {
  max-width: var(--content-max);
}

.articles-heading {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}

.articles-heading p {
  color: var(--blue);
  font-size: var(--font-meta);
  font-weight: 800;
  margin: 0;
}

.articles-heading h1 {
  font-size: var(--font-page-title);
  line-height: 1.3;
  margin: 4px 0;
}

.articles-heading span {
  color: var(--soft-ink);
  font-size: var(--font-card-copy);
}

.article-tag-filter {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0;
}

.article-tag-filter a {
  border-radius: 999px;
  color: var(--soft-ink);
  font-size: var(--font-meta);
  padding: 6px 8px;
}

.article-tag-filter a.is-current {
  background: var(--blue-pale);
  color: var(--blue);
  font-weight: 800;
}

.all-articles-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

/* 태그와 검색 결과 화면 */
.archive-heading,
.article-heading {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}

.archive-heading p {
  color: var(--blue);
  font-size: var(--font-meta);
  font-weight: 800;
  margin: 0;
}

.archive-heading h1,
.article-heading h1 {
  font-size: var(--font-page-title);
  line-height: 1.3;
  margin: 4px 0;
}

.archive-heading span,
.article-heading > p {
  color: var(--soft-ink);
  font-size: var(--font-card-copy);
  margin: 0;
}

.result-section {
  margin-top: var(--section-space);
}

.result-list {
  display: grid;
  gap: 12px;
}

.result-list .stream-item {
  display: block;
}

.search-page-form {
  margin-top: 24px;
}

.search-page-form label {
  display: block;
  font-size: var(--font-section);
  font-weight: 700;
  margin-bottom: 8px;
}

.search-page-form div {
  display: flex;
  gap: 8px;
}

.search-page-form input {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
}

.search-page-form button {
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 7px;
  color: var(--paper);
  cursor: pointer;
  font-size: var(--font-section);
  font-weight: 700;
  padding: 0 15px;
}

/* 글 상세 */
.article-detail {
  margin: 0 auto;
  max-width: 680px;
}

.article-heading .article-tags {
  margin-bottom: 14px;
}

.article-meta {
  color: var(--muted);
  display: flex;
  font-size: var(--font-meta);
  gap: 8px;
  margin-top: 16px;
}

.article-meta span::before {
  content: "·";
  margin-right: 8px;
}

.article-body {
  font-size: var(--font-body);
  line-height: 1.8;
  margin-top: 40px;
}

.article-body h2 {
  font-size: 1.375rem;
  line-height: 1.4;
  margin: 40px 0 12px;
}

.article-body p {
  margin: 0 0 20px;
}

.article-body pre {
  background: #1f2937;
  border-radius: var(--surface-radius);
  color: #e5e7eb;
  font-size: 0.8125rem;
  line-height: 1.7;
  margin: 24px 0;
  overflow-x: auto;
  padding: 16px;
}

.back-to-all {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  color: var(--blue);
  font-size: var(--font-section);
  font-weight: 700;
  gap: 6px;
  margin-bottom: 16px;
  min-height: 36px;
  padding: 0 13px;
}

.back-to-all [aria-hidden="true"] {
  font-size: 1.1em;
  line-height: 1;
}

/* 태그 탐색 */
.profile-hero {
  text-align: left;
}

.tag-panel,
.stream-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--surface-radius);
}

.coming-soon-copy {
  color: var(--soft-ink);
  font-size: var(--font-card-copy);
  line-height: 1.7;
  margin: 0;
}

.tag-panel {
  margin-bottom: var(--tag-panel-bottom-space);
  padding: var(--tag-panel-padding);
}

.tag-list,
.article-tags {
  display: flex;
  flex-wrap: wrap;
}

.tag-list {
  gap: 7px;
  justify-content: flex-start;
}

.article-tags {
  gap: 5px;
}

.tag-list a,
.article-tags a {
  border-radius: 999px;
  font-size: var(--font-meta);
  font-weight: 800;
  line-height: 1.2;
}

.tag-list a {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--soft-ink);
  padding: 7px 9px;
}

.article-tags a {
  background: var(--blue-pale);
  color: var(--blue);
  padding: 5px 7px;
}

.article-tags a:nth-child(2) {
  background: #f0f2f5;
  color: #556274;
}

.article-tags a:nth-child(3) {
  background: var(--orange-pale);
  color: var(--orange);
}

/* 글 목록 경로 내비게이션 */
.content-section,
.content-navigation {
  margin-top: var(--section-space);
}

.tab-list {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 19px;
}

.tab-list a {
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: var(--font-section);
  font-weight: 700;
  padding: 0 2px 11px;
}

.tab-list a.is-current {
  border-color: var(--blue);
  color: var(--ink);
}

.content-navigation + .content-section {
  margin-top: 0;
  padding-top: 22px;
}

.section-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 13px;
}

.section-heading h1,
.section-heading h2 {
  font-size: var(--font-section);
  margin: 0;
}

.section-heading a,
.section-heading span {
  color: var(--muted);
  font-size: var(--font-meta);
}

.section-heading a span {
  color: var(--blue);
  margin-left: 3px;
}

/* 글 목록 카드 */
.stream-list {
  display: grid;
  gap: 12px;
}

.stream-item {
  display: grid;
  gap: var(--stream-gap);
  grid-template-columns: var(--stream-meta-width) minmax(0, 1fr);
  padding: var(--card-padding);
}

.article-feed .stream-item {
  display: block;
}

.all-articles-list h2,
.result-list h2,
.stream-item h3 {
  font-size: var(--font-card-title);
  line-height: 1.45;
  margin: 9px 0 5px;
}

.stream-item p {
  color: var(--soft-ink);
  font-size: var(--font-card-copy);
  line-height: 1.65;
  margin: 0;
}

.article-date,
.entry-label {
  font-size: var(--font-meta);
}

.article-date {
  color: var(--muted);
  display: block;
  margin-top: 12px;
}

.entry-label {
  font-weight: 800;
}

.entry-label span,
.entry-label time {
  display: block;
}

.entry-label time {
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px;
}

.label-cloud {
  color: var(--green);
}

.label-web {
  color: var(--blue);
}

.label-project {
  color: var(--orange);
}

/* 페이지 이동 */
.pagination {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: flex;
  gap: 3px;
  justify-content: center;
  margin: 24px auto 0;
  padding: 4px;
  width: fit-content;
}

.pagination button,
.pagination span {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--soft-ink);
  display: inline-flex;
  font-size: var(--font-meta);
  height: 30px;
  justify-content: center;
  min-width: 30px;
  padding: 0;
}

.pagination span {
  background: var(--blue-pale);
  color: var(--blue);
  font-weight: 800;
}

.pagination button:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

/* 푸터 */
footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--font-meta);
  padding: 20px max(
    var(--page-inline),
    calc((100% - var(--content-max)) / 2 + var(--page-inline))
  );
  text-align: center;
}

/* 640px 이상: 넓은 모바일과 소형 태블릿 */
@media (min-width: 640px) {
  :root {
    --page-inline: 20px;
    --page-block-start: 42px;
    --page-block-end: 68px;
    --section-space: 48px;
    --search-width: 144px;
    --card-padding: 18px;
    --tag-panel-padding: 16px;
    --tag-panel-bottom-space: 42px;
    --stream-gap: 14px;
    --stream-meta-width: 60px;
    --font-brand: 1rem;
  }
}

/* 768px 이상: 태블릿과 일반 데스크톱 */
@media (min-width: 768px) {
  :root {
    --page-inline: 24px;
    --page-block-start: 48px;
    --page-block-end: 76px;
    --section-space: 54px;
    --search-width: 168px;
    --search-height: 34px;
    --card-padding: 20px;
    --tag-panel-padding: 18px;
    --tag-panel-bottom-space: 48px;
    --stream-gap: 17px;
    --stream-meta-width: 72px;
    --line-body: 1.75;
    --font-card-title: 1.1875rem;
    --font-page-title: 2.125rem;
  }
}

/* 1024px 이상: PC에서 본문과 카드 글자를 한 단계 확대 */
@media (min-width: 1024px) {
  :root {
    --header-height: 64px;
    --font-body: 1.0625rem;
    --font-search: 0.8125rem;
    --font-card-title: 1.25rem;
    --font-card-copy: 0.9375rem;
    --font-page-title: 2.25rem;
  }
}