:root {
  --blog-bg: #f6f6f3;
  --blog-surface: #ffffff;
  --blog-text: #17191e;
  --blog-muted: #626775;
  --blog-line: #d9dbe3;
  --blog-accent: #1b7f73;
  --blog-link: #9f4721;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--blog-text);
  background: var(--blog-bg);
  font-family: "Manrope", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blog-link); }

.blog-shell {
  width: min(1120px, calc(100% - 2.4rem));
  margin: 0 auto;
}

.blog-header {
  border-bottom: 1px solid var(--blog-line);
  background: rgba(246, 246, 243, 0.96);
}

.blog-nav {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.blog-brand img {
  display: block;
  width: auto;
  height: 26px;
}

.blog-nav nav {
  display: flex;
  gap: 1.1rem;
}

.blog-nav nav a {
  color: var(--blog-muted);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
}

.blog-nav nav a[aria-current="page"] { color: var(--blog-text); }

.blog-index {
  min-height: calc(100vh - 160px);
  padding: clamp(4rem, 9vw, 7rem) 0;
}

.blog-intro {
  max-width: 780px;
  padding-bottom: 3.2rem;
  border-bottom: 1px solid var(--blog-line);
}

.blog-eyebrow,
.article-category {
  margin: 0 0 0.65rem;
  color: var(--blog-accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog-intro h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.7rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.article-header h1 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.blog-intro > p:last-child,
.article-description {
  max-width: 720px;
  margin: 1rem 0 0;
  color: var(--blog-muted);
  font-size: 1.06rem;
  line-height: 1.72;
}

.post-list {
  max-width: 860px;
  padding-top: 3rem;
}

.post-list > h2 {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-item {
  padding: 2rem 0;
  border-top: 1px solid var(--blog-line);
}

.post-item:first-of-type { border-top: 0; }

.post-meta,
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  color: var(--blog-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.post-item h3 {
  max-width: 720px;
  margin: 0.65rem 0 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.28;
}

.post-item h3 a {
  color: var(--blog-text);
  text-decoration: none;
}

.post-item h3 a:hover { text-decoration: underline; }

.post-item > p {
  max-width: 720px;
  margin: 0.75rem 0 0;
  color: var(--blog-muted);
  line-height: 1.68;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: 0.28rem 0.52rem;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  color: var(--blog-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.article-shell {
  width: min(820px, calc(100% - 2.4rem));
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.article-header {
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--blog-line);
}

.article-meta { margin-top: 1.15rem; }

.blog-content {
  padding-top: 2.2rem;
  font-size: 1.04rem;
  line-height: 1.82;
}

.blog-content h2 {
  margin: 3.2rem 0 0.9rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.3;
}

.blog-content h3 {
  margin: 2.2rem 0 0.7rem;
  font-size: 1.25rem;
}

.blog-content p { margin: 0.9rem 0; }

.blog-content ul,
.blog-content ol {
  margin: 1rem 0;
  padding-left: 1.35rem;
}

.blog-content li { margin: 0.38rem 0; }

.blog-content blockquote {
  margin: 2rem 0;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--blog-accent);
  background: var(--blog-surface);
}

.blog-content blockquote p { margin: 0; }

.blog-content img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
}

.blog-content img[src*="#width-25"] { width: 25%; }
.blog-content img[src*="#width-50"] { width: 50%; }
.blog-content img[src*="#width-75"] { width: 75%; }
.blog-content img[src*="#width-100"] { width: 100%; }
.blog-content img[src$="-align-left"] { margin-left: 0; margin-right: auto; }
.blog-content img[src$="-align-center"] { margin-left: auto; margin-right: auto; }
.blog-content img[src$="-align-right"] { margin-left: auto; margin-right: 0; }

.blog-content table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  background: var(--blog-surface);
}

.blog-content th,
.blog-content td {
  padding: 0.75rem;
  border: 1px solid var(--blog-line);
  text-align: left;
  vertical-align: top;
}

.blog-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--blog-line);
  color: var(--blog-muted);
  font-size: 0.85rem;
}

.blog-footer .blog-shell {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.blog-footer p { margin: 0; }

@media (max-width: 640px) {
  .blog-shell,
  .article-shell { width: min(100% - 1.4rem, 820px); }

  .blog-nav {
    min-height: 58px;
    gap: 0.8rem;
  }

  .blog-nav nav { gap: 0.72rem; }
  .blog-nav nav a { font-size: 0.82rem; }
  .blog-brand img { height: 22px; }
  .blog-index { padding: 3rem 0; }
  .blog-intro { padding-bottom: 2.2rem; }
  .post-list { padding-top: 2rem; }
  .article-shell { padding: 3rem 0; }
  .blog-content { font-size: 1rem; }
  .blog-footer .blog-shell { flex-direction: column; }
}
/* Editorial blog layout */
.blog-intro { padding-bottom: 2.5rem; }
.blog-intro-actions, .cta-links { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.75rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:2.8rem; padding:.7rem 1rem; border:1px solid transparent; border-radius:999px; font-weight:700; text-decoration:none; }
.button-primary { background:var(--blog-accent); color:#fff; }
.button-secondary { border-color:var(--blog-line); background:var(--blog-surface); color:var(--blog-text); }
.text-link { color:var(--blog-link); font-weight:700; text-decoration-thickness:1px; text-underline-offset:.18em; }
.category-nav { display:flex; gap:.6rem; flex-wrap:wrap; padding:1rem 0 2.5rem; border-top:1px solid var(--blog-line); }
.category-pill, .tag-list li { display:inline-flex; align-items:center; min-height:2rem; padding:.35rem .75rem; border:1px solid var(--blog-line); border-radius:999px; background:var(--blog-surface); color:var(--blog-muted); font-size:.82rem; text-decoration:none; }
.category-pill:hover, .category-pill.is-active { border-color:var(--blog-accent); color:var(--blog-accent); }
.featured-post { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.9fr); gap:clamp(1.5rem,5vw,4rem); align-items:center; padding:clamp(1.25rem,4vw,2.5rem); border:1px solid var(--blog-line); border-radius:1.25rem; background:var(--blog-surface); box-shadow:0 1rem 2.5rem rgba(23,25,30,.06); }
.featured-copy h2 { max-width:16ch; margin:.65rem 0 1rem; font-size:clamp(1.65rem,3vw,2.5rem); line-height:1.15; }
.featured-copy h2 a, .post-item h3 a { color:var(--blog-text); text-decoration:none; }
.featured-copy > p:not(.blog-eyebrow):not(.post-meta) { max-width:48ch; color:var(--blog-muted); }
.featured-image { display:block; overflow:hidden; border-radius:.9rem; background:var(--blog-bg); }
.featured-image img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .25s ease; }
.featured-image:hover img { transform:scale(1.025); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin:clamp(3.5rem,8vw,6rem) 0 1.5rem; }
.section-heading h2 { margin:.35rem 0 0; }
.section-note { max-width:30ch; margin:0 0 .25rem; color:var(--blog-muted); font-size:.95rem; }
.post-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.post-item { display:flex; flex-direction:column; min-width:0; padding:1rem; border:1px solid var(--blog-line); border-radius:1rem; background:var(--blog-surface); }
.post-image-wrap { overflow:hidden; margin:-1rem -1rem 1.25rem; border-radius:1rem 1rem 0 0; background:var(--blog-bg); }
.post-image-wrap img { display:block; width:100%; aspect-ratio:16/8; object-fit:cover; }
.post-item h3 { margin:.65rem 0 .7rem; font-size:1.3rem; line-height:1.25; }
.post-item > p { flex:1; margin:0; color:var(--blog-muted); }
.post-read { display:inline-block; margin-top:1.25rem; }
.blog-cta, .article-cta { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:clamp(3.5rem,8vw,6rem); padding:clamp(1.5rem,4vw,2.5rem); border-radius:1.25rem; background:#e8f1ee; }
.blog-cta h2, .article-cta h2 { max-width:25ch; margin:.35rem 0 .75rem; font-size:clamp(1.35rem,2.4vw,2rem); }
.blog-cta p:not(.blog-eyebrow), .article-cta p:not(.blog-eyebrow) { max-width:55ch; margin:0; color:var(--blog-muted); }
.article-hero { margin:2rem 0 0; overflow:hidden; border-radius:1rem; background:var(--blog-bg); }
.article-hero img { display:block; width:100%; max-height:34rem; object-fit:cover; }
.article-cta { margin-top:3.5rem; }
.article-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  margin-top:4rem;
  padding:1.5rem 0 0;
  border-top:1px solid var(--blog-line);
}
.article-tools h2 { margin:.25rem 0 .45rem; font-size:1.3rem; letter-spacing:-.025em; }
.article-tools p:not(.blog-eyebrow) { max-width:45rem; margin:0; color:var(--blog-muted); font-size:.94rem; }
.article-tool-links { display:flex; flex:0 0 auto; gap:.6rem; }
.article-tool-links a {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:2.6rem;
  padding:.65rem .9rem;
  border:1px solid #d9e5e2;
  border-radius:999px;
  color:var(--blog-accent);
  background:#f4f9f8;
  font-size:.9rem;
  font-weight:700;
  text-decoration:none;
}
.article-tool-links a:hover { border-color:#a9cec6; background:#eaf5f2; }
.related-posts { padding:4.5rem 0 5rem; border-top:1px solid var(--blog-line); background:#f8f8f6; }
.related-shell { width:min(1173px,calc(100% - 2.4rem)); margin:0 auto; }
.related-shell > h2 { margin:.35rem 0 1.75rem; font-size:clamp(1.5rem,2.5vw,2rem); letter-spacing:-.03em; }
.related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.related-card {
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid #e1e3e7;
  border-radius:1rem;
  background:#fff;
  box-shadow:0 .2rem .7rem rgba(20,30,45,.03);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.related-card:hover,
.related-card:focus-within { transform:translateY(-5px); border-color:#c7ded9; box-shadow:0 .8rem 1.6rem rgba(20,55,50,.1); }
.related-card-image { overflow:hidden; background:#eef1ef; }
.related-card-image img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .25s ease; }
.related-card:hover .related-card-image img { transform:scale(1.02); }
.related-card-copy { padding:1.2rem 1.25rem 1.4rem; }
.related-card .post-meta span { color:var(--blog-accent); text-transform:uppercase; letter-spacing:.05em; }
.related-card h3 { margin:.65rem 0 .7rem; font-size:1.16rem; line-height:1.35; letter-spacing:-.02em; }
.related-card h3 a { color:var(--blog-text); text-decoration:none; transition:color .2s ease; }
.related-card h3 a::after { position:absolute; inset:0; content:""; }
.related-card:hover h3 a,
.related-card:focus-within h3 a { color:var(--blog-accent); }
.related-card-copy > p:last-child { display:-webkit-box; margin:0; overflow:hidden; color:var(--blog-muted); font-size:.9rem; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
@media (max-width:600px) {
  .featured-post, .post-grid { grid-template-columns:1fr; }
  .section-heading, .blog-cta, .article-cta { display:block; }
  .section-note { margin-top:.75rem; }
  .blog-cta .cta-links, .article-cta .cta-links { margin-top:1.25rem; }
  .article-tools { display:block; }
  .article-tool-links { margin-top:1.15rem; }
  .related-grid { grid-template-columns:1fr; }
}

/* Reference-inspired editorial layout */
body { background: #fff; }
.button-primary { background:#1b7f73; color:#fff; }
.button-secondary { border-color:#dfe2e7; background:#fff; color:#242831; }
.text-link { color:#1b7f73; }
.blog-header { position:fixed; inset:0 0 auto; z-index:50; border:0; background:transparent; pointer-events:none; }
.blog-header .blog-shell { width:min(1173px,calc(100% - 2rem)); max-width:none; min-width:0; }
.blog-nav { min-height:56px; margin-top:1.5rem; padding:.35rem 1.5rem; border:1px solid transparent; border-radius:.9rem; background:rgba(238,238,237,.88); box-shadow:0 .15rem .8rem rgba(20,30,45,.04); backdrop-filter:blur(12px); pointer-events:auto; transition:width .3s ease,padding .3s ease,background-color .3s ease,box-shadow .3s ease; }
.blog-header.is-compact .blog-shell { width:min(780px,calc(100% - 2rem)); }
.blog-header.is-compact .blog-nav { padding-left:1rem; padding-right:1rem; background:rgba(238,238,237,.94); box-shadow:0 .35rem 1.1rem rgba(20,30,45,.09); }
.blog-brand img { height:30px; }
.blog-nav nav { gap: 1.35rem; }
.blog-nav nav a { color: #50545c; font-weight: 600; }
.blog-nav nav a[aria-current="page"] { color: #1b7f73; }
.blog-index { width:min(1173px,calc(100% - 2.4rem)); padding-top:clamp(7rem,9vw,8.5rem); }
.blog-breadcrumb { display:flex; align-items:center; gap:.7rem; margin-bottom:1.6rem; color:#8a8e97; font-size:.9rem; }
.blog-breadcrumb a { color:inherit; text-decoration:none; }
.blog-breadcrumb strong { color:#4b4f57; }
.blog-intro { max-width: none; padding-bottom: 2.5rem; border-bottom: 0; text-align:center; }
.intro-labels { display:flex; align-items:center; gap:.8rem; margin-bottom:1.7rem; color:#989ba2; font-size:.75rem; font-weight:700; letter-spacing:.14em; }
.intro-label { padding:.35rem .7rem; border-radius:999px; background:#e8f1ee; color:#1b7f73; }
.blog-intro h1 { max-width: none; font-size:clamp(3rem,5vw,4.25rem); letter-spacing:-.055em; line-height:1.03; white-space:nowrap; }
.blog-intro h1 em { color:#1b7f73; font-style:normal; }
.blog-intro > p:last-child { display:none; }
.blog-intro-actions { margin-top:2rem; }
.category-nav { padding:.5rem 0 1.65rem; margin-bottom:2.25rem; border-bottom:1px solid #e5e6e8; border-top:0; }
.category-pill { padding:.5rem .9rem; border-color:#e3e5e8; color:#666b75; background:#fff; font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; }
.category-pill.is-active { border-color:#b8d7d0; background:#eef6f5; color:#1b7f73; }
.post-item[hidden] { display:none; }
.featured-post { grid-template-columns:1fr 1fr; gap:0; height:392px; min-height:392px; padding:0; overflow:hidden; border-color:#e1e3e7; border-radius:1.05rem; box-shadow:0 .35rem 1rem rgba(20,30,45,.05); }
.featured-copy { order:2; display:flex; flex-direction:column; justify-content:flex-start; min-height:392px; padding:2.1rem 2.25rem; }
.featured-copy .blog-eyebrow { color:#1b7f73; }
.featured-copy h2 { max-width:none; margin:.9rem 0 1rem; font-size:clamp(1.65rem,2.7vw,2.25rem); line-height:1.12; letter-spacing:-.035em; }
.featured-copy > p:not(.blog-eyebrow):not(.post-meta) { color:#70757e; }
.featured-copy .text-link { margin-top:1rem; }
.featured-image { order:1; border-radius:0; }
.featured-image img { height:100%; min-height:392px; aspect-ratio:auto; object-fit:cover; }
.section-heading { margin:clamp(3.75rem,7vw,5.5rem) 0 1.75rem; }
.section-heading .blog-eyebrow { color:#1b7f73; }
.post-list { max-width:none; }
.post-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; align-items:stretch; }
.post-item { position:relative; height:533px; min-height:533px; padding:0 0 1.15rem; overflow:hidden; border-color:#e1e3e7; border-radius:.95rem; box-shadow:0 .2rem .7rem rgba(20,30,45,.025); transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.post-item:hover,
.post-item:focus-within { transform:translateY(-6px); border-color:#c7ded9; box-shadow:0 .85rem 1.8rem rgba(20,55,50,.11); }
.post-image-wrap { margin:0 0 1.15rem; border-radius:0; }
.post-image-wrap img { width:100%; height:220px; aspect-ratio:auto; object-fit:cover; }
.post-item > .post-meta, .post-item > h3, .post-item > p, .post-item > .tag-list, .post-item > .post-read { margin-left:1.1rem; margin-right:1.1rem; }
.post-item > .post-meta { margin-top:0; color:#858991; }
.post-item > .post-meta span { color:#1b7f73; text-transform:uppercase; letter-spacing:.06em; }
.post-item h3 { display:-webkit-box; min-height:3.15em; max-height:3.15em; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:1.22rem; line-height:1.25; letter-spacing:-.025em; }
.post-item h3 a { color:var(--blog-text); text-decoration:none; transition:color .2s ease; }
.post-item h3 a::after { position:absolute; inset:0; content:""; }
.post-item:hover h3 a,
.post-item:focus-within h3 a { color:var(--blog-accent); text-decoration:none; }
.post-item h3 a:focus-visible { outline:0; }
.post-item:has(h3 a:focus-visible) { outline:3px solid rgba(27,127,115,.28); outline-offset:3px; }
.post-item > p { display:-webkit-box; min-height:4.8em; max-height:4.8em; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; font-size:.94rem; line-height:1.6; }
.post-item > .tag-list { align-content:flex-start; min-height:3.9rem; max-height:3.9rem; margin-top:auto; overflow:hidden; }
.blog-cta, .article-cta { background:#eef6f5; }
@media (max-width: 800px) {
  .post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .featured-copy { order:2; min-height:0; }
  .featured-image { order:1; }
  .featured-image img { min-height:240px; height:240px; }
}
@media (max-width: 560px) {
  .featured-post, .post-grid { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:1fr; }
  .blog-nav nav { gap:.7rem; }
  .blog-nav nav a { font-size:.78rem; }
  .blog-brand img { max-width:110px; }
  .blog-intro h1 { font-size:clamp(2.45rem,12vw,4rem); white-space:normal; }
  .post-grid { grid-template-columns:1fr; }
}

@media (max-width:900px) {
  .blog-header .blog-shell,
  .blog-header.is-compact .blog-shell { width:calc(100% - 1.4rem); min-width:0; }
  .blog-nav { margin-top:.7rem; padding-left:.85rem; padding-right:.85rem; }
  .blog-index { padding-top:6.5rem; }
  .featured-post { height:auto; min-height:0; }
  .featured-copy { min-height:0; }
}

@media (prefers-reduced-motion:reduce) {
  .post-item { transition:none; }
  .post-item:hover,
  .post-item:focus-within { transform:none; }
}