:root{
  --paper:#F2F3EF; --panel:#E7E9E2; --ink:#0E1A2B; --blue:#2F3CE8; --mark:#F4E04D;
  --line:#CFD3CA; --muted:#556070;
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans KR',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.75;word-break:keep-all;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* header */
header.site{position:sticky;top:0;z-index:10;background:rgba(242,243,239,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;font-size:21px;letter-spacing:-.02em}
.brand img{width:34px;height:34px}
nav ul{list-style:none;display:flex;gap:6px}
nav a{display:block;padding:8px 16px;border-radius:999px;text-decoration:none;font-weight:500;font-size:15px}
nav a:hover{background:var(--panel)}
nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}

/* type */
h1,h2,h3{line-height:1.25;letter-spacing:-.03em}
h1{font-size:clamp(38px,6.4vw,72px);font-weight:900}
h2{font-size:clamp(28px,4vw,42px);font-weight:800}
h3{font-size:22px;font-weight:700}
.lead{font-size:19px;color:var(--muted);max-width:34em}
.mark{background:linear-gradient(transparent 58%,var(--mark) 58%)}

/* buttons */
.btn{display:inline-block;padding:14px 26px;border-radius:10px;font-weight:700;text-decoration:none;font-size:16px;border:2px solid var(--ink);transition:transform .15s}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.ghost{background:transparent}
.btn:hover{transform:translateY(-2px)}

/* hero */
.hero{padding:72px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero p.lead{margin:28px 0 36px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.redact{position:relative;display:inline-block}
.redact::after{content:"";position:absolute;inset:6% -4px 4% -4px;background:var(--ink);border-radius:4px;transform-origin:right center;animation:unredact 1.1s .7s cubic-bezier(.7,0,.2,1) forwards}
@keyframes unredact{to{transform:scaleX(0)}}

/* sections */
section.block{padding:84px 0;border-top:1px solid var(--line)}
section.block.dark{background:var(--ink);color:var(--paper);border:0}
section.block.dark .lead{color:#9FB0C8}
.sec-head{margin-bottom:48px}
.sec-head .lead{margin-top:14px}

/* area rows (home) */
.area{display:grid;grid-template-columns:260px 1fr auto;gap:36px;align-items:center;padding:32px 0;border-top:1px solid var(--line)}
.area:last-child{border-bottom:1px solid var(--line)}
.area img{border-radius:12px;width:260px}
.area p{color:var(--muted);margin-top:8px;max-width:36em}
.area a.more{font-weight:700;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;white-space:nowrap}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.steps li{list-style:none;padding:0 24px 0 0;border-top:3px solid var(--mark);padding-top:20px;counter-increment:s}
.steps li::before{content:counter(s);display:block;font-weight:900;font-size:40px;color:var(--mark);line-height:1;margin-bottom:12px}
.steps h3{font-size:19px;margin-bottom:6px}
.steps p{font-size:15px;color:#9FB0C8;line-height:1.65}

/* research page */
.topic{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding:80px 0;border-top:1px solid var(--line)}
.topic:nth-of-type(even) .topic-img{order:2}
.topic-img img{border-radius:14px;width:100%;position:sticky;top:96px}
.topic h2{margin-bottom:16px}
.topic p{color:var(--muted);margin-bottom:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 28px;list-style:none}
.tags li{padding:4px 14px;background:var(--panel);border-radius:999px;font-size:14px;font-weight:500;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:700;border-bottom:2px solid var(--ink)}
td:first-child{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;white-space:nowrap}
.sev{display:inline-block;padding:1px 10px;border-radius:6px;font-size:13px;font-weight:700;background:var(--mark)}
.sev.high{background:var(--ink);color:var(--mark)}
.note{background:var(--panel);border-left:4px solid var(--blue);padding:14px 18px;font-size:15px;border-radius:0 8px 8px 0;margin-top:20px}
.timeline{list-style:none;margin:8px 0 0;border-left:3px solid var(--ink);padding-left:22px}
.timeline li{position:relative;padding-bottom:14px;color:var(--ink);font-size:15.5px}
.timeline li::before{content:"";position:absolute;left:-30px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--mark);border:3px solid var(--ink)}
.timeline b{display:inline-block;min-width:64px}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.principles{list-style:none;display:grid;gap:22px;margin-top:8px}
.principles li{padding-left:20px;border-left:4px solid var(--mark)}
.principles h3{font-size:19px}
.principles p{color:var(--muted);font-size:15.5px}
form{display:grid;gap:16px}
label{font-weight:700;font-size:15px;display:grid;gap:6px}
input,textarea,select{font:inherit;padding:12px 14px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink);width:100%}
textarea{min-height:140px;resize:vertical}
.contact-list{list-style:none;margin-top:18px;display:grid;gap:8px;font-size:16px}
.contact-list b{display:inline-block;min-width:76px}

/* footer */
footer.site{background:var(--ink);color:#9FB0C8;padding:44px 0;font-size:14.5px}
footer.site .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer.site strong{color:var(--paper)}
footer.site p{max-width:34em}

@media (max-width:860px){
  .hero .wrap,.topic,.about-grid{grid-template-columns:1fr}
  .topic:nth-of-type(even) .topic-img{order:0}
  .topic-img img{position:static}
  .area{grid-template-columns:1fr;gap:16px}
  .area img{width:100%}
  .steps{grid-template-columns:1fr 1fr;row-gap:36px}
  header.site .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:8px}
}
@media (max-width:520px){.steps{grid-template-columns:1fr} nav a{padding:8px 12px}}
@media (prefers-reduced-motion:reduce){.redact::after{animation:none;transform:scaleX(0)} html{scroll-behavior:auto} .btn{transition:none}}