:root {
  --sg-orange: #ff5a2c;
  --sg-soft: #ffb49d;
  --sg-black: #171513;
  --sg-paper: #f4f0e8;
  --sg-white: #fffdf9;
  --sg-gray: #6e6862;
}

.seogyo-page { background: var(--sg-paper); color: var(--sg-black); }
.seogyo-header .brand-mark { background: var(--sg-black); }
.seogyo-header:not(.is-scrolled) .brand-role,
.seogyo-header:not(.is-scrolled) .nav { color: #fff; }
.seogyo-header:not(.is-scrolled) .brand-mark { border: 1px solid rgba(255,255,255,.5); }
.seogyo-header .nav a::after { background: var(--sg-orange); }
.seogyo-page em { color: var(--sg-orange); font-style: normal; }
.sg-section-index, .sg-kicker { margin: 0; color: var(--sg-orange); font-size: .8rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sg-section-index.light { color: var(--sg-soft); }
.sg-heading { display: grid; grid-template-columns: 2fr 5fr; gap: 48px; align-items: start; margin-bottom: 64px; }
.sg-heading h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 5.2rem); line-height: 1.04; letter-spacing: -.055em; }

.sg-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 100vh; background: var(--sg-black); color: #fff; }
.sg-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 150px max(40px, calc((100vw - 1280px) / 2)) 80px; padding-right: 64px; }
.sg-back { width: fit-content; margin-bottom: 46px; color: #bbb4ae; font-size: .82rem; font-weight: 700; letter-spacing: .06em; }
.sg-hero h1 { margin: 18px 0 36px; font-size: clamp(3.8rem, 7.8vw, 8rem); line-height: .88; letter-spacing: -.07em; }
.sg-statement { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2.5rem); line-height: 1.3; }
.sg-statement strong { color: var(--sg-soft); }
.sg-summary { max-width: 610px; margin: 28px 0 42px; color: #cfc9c3; font-size: 1.06rem; line-height: 1.8; }
.sg-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding-top: 22px; border-top: 1px solid #48433f; }
.sg-meta dt { color: #928b85; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sg-meta dd { margin: 5px 0 0; font-size: .88rem; line-height: 1.45; }
.sg-hero-image { position: relative; min-height: 720px; margin: 0; overflow: hidden; }
.sg-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.sg-hero-image figcaption { position: absolute; right: 30px; bottom: 30px; left: 30px; display: flex; justify-content: space-between; gap: 20px; padding: 18px 22px; background: rgba(23,21,19,.84); backdrop-filter: blur(10px); }
.sg-hero-image figcaption span { color: var(--sg-soft); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }

.sg-glance { width: min(1280px, calc(100% - 64px)); margin: 0 auto; padding: 110px 0; }
.sg-glance-copy { max-width: 780px; margin: 28px 0 54px; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.5; letter-spacing: -.025em; }
.sg-glance dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid #a9a39d; }
.sg-glance dl div { padding: 26px 20px 26px 0; border-bottom: 1px solid #a9a39d; }
.sg-glance dt { color: var(--sg-orange); font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 800; letter-spacing: -.05em; }
.sg-glance dd { margin: 5px 0 0; color: var(--sg-gray); }

.sg-challenge, .sg-principles, .sg-evidence, .sg-role, .sg-next { width: min(1280px, calc(100% - 64px)); margin: 0 auto; padding: 130px 0; }
.sg-challenge { border-top: 1px solid #c7c1ba; }
.sg-challenge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sg-challenge-grid article { padding: 36px; background: var(--sg-white); }
.sg-challenge-grid article > span { color: var(--sg-orange); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.sg-challenge-grid h3 { margin: 12px 0 26px; font-size: clamp(1.7rem, 3vw, 2.7rem); }
.sg-challenge-grid ul { min-height: 170px; margin: 0 0 30px; padding-left: 1.2em; color: var(--sg-gray); line-height: 1.75; }
.sg-challenge-grid img { width: 100%; border: 1px solid #ece8e2; }

.sg-process { padding: 130px max(32px, calc((100vw - 1280px) / 2)); background: var(--sg-black); color: #fff; }
.sg-process-list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 76px; padding: 0; list-style: none; border-top: 1px solid #4b4641; }
.sg-process-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 28px 22px 28px 0; border-bottom: 1px solid #4b4641; }
.sg-process-list li > span { color: var(--sg-soft); font-size: .76rem; font-weight: 800; }
.sg-process-list strong { font-size: 1.15rem; }
.sg-process-list p { margin: 8px 0 0; color: #bdb7b1; line-height: 1.65; }
.sg-workshop { display: grid; grid-template-columns: 3fr 2fr; align-items: end; margin: 0; }
.sg-workshop img { width: 100%; }
.sg-workshop figcaption { display: grid; gap: 14px; padding: 34px; background: var(--sg-orange); }
.sg-workshop figcaption strong { font-size: 1.4rem; }
.sg-workshop figcaption span { color: #321006; line-height: 1.65; }

.sg-principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid #aaa39c; }
.sg-principle-grid article { min-height: 290px; padding: 26px 34px 32px 0; border-bottom: 1px solid #aaa39c; }
.sg-principle-grid article + article { padding-left: 34px; border-left: 1px solid #aaa39c; }
.sg-principle-grid span { color: var(--sg-orange); font-size: .76rem; font-weight: 800; }
.sg-principle-grid h3 { margin: 34px 0 18px; font-size: clamp(2.4rem, 4.5vw, 4.4rem); line-height: 1; }
.sg-principle-grid p { max-width: 320px; color: var(--sg-gray); line-height: 1.75; }

.sg-system { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--sg-orange); }
.sg-system-image img { width: 100%; height: 100%; min-height: 760px; object-fit: cover; }
.sg-system-copy { padding: 110px max(40px, calc((100vw - 1280px) / 2)) 110px 72px; color: #fff; }
.sg-system-copy h2 { margin: 24px 0 48px; font-size: clamp(2.6rem, 4.8vw, 5rem); line-height: 1.04; letter-spacing: -.05em; }
.sg-system-copy ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.45); }
.sg-system-copy li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.45); }
.sg-system-copy li > span { color: #4a1709; font-size: .72rem; font-weight: 800; }
.sg-system-copy strong { display: block; font-size: 1.03rem; }
.sg-system-copy li p { margin: 3px 0 0; color: #4a1709; line-height: 1.55; }

.sg-wide-photo { margin: 0; }
.sg-wide-photo img { width: 100%; max-height: 760px; object-fit: cover; }
.sg-wide-photo figcaption { padding-top: 16px; color: var(--sg-gray); font-size: .9rem; text-align: right; }

.sg-impact { padding: 130px max(32px, calc((100vw - 1280px) / 2)); background: var(--sg-black); color: #fff; }
.sg-impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.sg-impact-grid div { padding-top: 24px; border-top: 4px solid var(--sg-orange); }
.sg-impact-grid strong { font-size: 1.35rem; }
.sg-impact-grid p { color: #bfb8b2; line-height: 1.75; }

.sg-role { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.sg-role .sg-heading { display: block; margin: 0; }
.sg-role .sg-heading h2 { margin-top: 28px; }
.sg-role-copy > p { margin: 0 0 38px; font-size: 1.25rem; line-height: 1.75; }
.sg-role-copy ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid #aaa39c; }
.sg-role-copy li { padding: 17px 0; border-bottom: 1px solid #aaa39c; font-weight: 700; }

.sg-next { border-top: 1px solid #c7c1ba; }
.sg-next > div { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.sg-next a { display: grid; gap: 40px; padding: 32px; border: 1px solid #aaa39c; transition: color .2s, background .2s, transform .2s; }
.sg-next a:hover { color: #fff; background: var(--sg-orange); transform: translateY(-3px); }
.sg-next span { font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.sg-next strong { font-size: 1.2rem; }

@media (max-width: 940px) {
  .sg-hero, .sg-system { grid-template-columns: 1fr; }
  .sg-hero-copy { padding: 140px 32px 72px; }
  .sg-hero-image { min-height: 58vw; }
  .sg-heading, .sg-role { grid-template-columns: 1fr; gap: 36px; }
  .sg-glance dl, .sg-process-list { grid-template-columns: repeat(2, 1fr); }
  .sg-system-copy { padding: 86px 32px; }
  .sg-system-image img { min-height: 560px; }
}

@media (max-width: 680px) {
  .sg-challenge, .sg-principles, .sg-evidence, .sg-role, .sg-next, .sg-glance { width: calc(100% - 30px); padding-block: 88px; }
  .sg-challenge-grid, .sg-principle-grid, .sg-impact-grid, .sg-next > div, .sg-meta, .sg-workshop { grid-template-columns: 1fr; }
  .sg-glance dl, .sg-process-list { grid-template-columns: 1fr; }
  .sg-challenge-grid ul { min-height: 0; }
  .sg-principle-grid article + article { padding-left: 0; border-left: 0; }
  .sg-principle-grid article { min-height: 0; }
  .sg-heading { margin-bottom: 42px; }
  .sg-process, .sg-impact { padding: 88px 15px; }
  .sg-workshop figcaption { padding: 26px; }
  .sg-system-image img { min-height: 420px; }
}