/* ==========================================================================
   정선 특허 — 전 페이지 공용 스타일
   색상·여백은 :root 변수만 바꾸면 사이트 전체에 적용됩니다.
   ========================================================================== */
:root{
  --ink:#17191D;
  --body:#3F444B;
  --muted:#72777F;
  --line:#E5E7EA;
  --bg:#FFFFFF;
  --bg-soft:#F4F5F6;
  --brand:#2E3339;
  --brand-dark:#1B1E22;
  --accent:#A17C2F;
  --hero-image:none;
  --sans:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--body);font-family:var(--sans);font-weight:300;
  font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:#fff;padding:14px 22px}
.skip:focus{left:0}

.sect{padding:clamp(72px,9vw,132px) 0;position:relative}

/* 옅은 배경 구역 — 도트 격자로 평평함을 덜어낸다 (이미지 없이 CSS 만) */
.sect--soft{
  background-color:var(--bg-soft);
  background-image:radial-gradient(rgba(46,51,57,.09) 1px, transparent 1px);
  background-size:22px 22px;
  background-position:-1px -1px;
}

/* 흰 구역 — 아주 옅은 제도용지 격자 */
.sect--grid{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(46,51,57,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,51,57,.045) 1px, transparent 1px);
  background-size:46px 46px, 46px 46px;
}
.label{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--brand)}
.sect h2{font-size:clamp(26px,3.6vw,42px);font-weight:700;color:var(--ink);line-height:1.42;letter-spacing:-.03em;margin-top:20px}
.sect .sub{margin-top:24px;font-size:17px;color:var(--muted);max-width:46em}
.head{margin-bottom:clamp(44px,6vw,72px);max-width:54em}

/* ---------- 헤더 ---------- */
.top{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:78px}
.logo{display:flex;align-items:baseline;gap:10px;margin-right:auto}
.logo b{font-size:21px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.logo span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--brand);text-transform:uppercase}
.menu{display:flex;gap:28px}
.menu a{font-size:15px;color:var(--body);position:relative;padding:6px 0;transition:color .2s}
.menu a:hover,.menu a[aria-current="page"]{color:var(--brand)}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--brand);transition:width .3s}
.menu a:hover::after,.menu a[aria-current="page"]::after{width:100%}
.top .cta{font-size:14px;font-weight:500;color:#fff;background:var(--brand);padding:11px 22px;border-radius:2px;transition:background .2s}
.top .cta:hover{background:var(--brand-dark)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;
  align-items:center;justify-content:center;font-size:19px;color:var(--ink);cursor:pointer;border-radius:2px}

/* ---------- 히어로 ---------- */
.hero{position:relative;min-height:clamp(480px,74vh,700px);display:flex;align-items:center;overflow:hidden;
  background-color:#141619;background-image:var(--hero-image);background-size:cover;background-position:center}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(110% 85% at 12% 18%,rgba(201,165,92,.20),transparent 58%),
             linear-gradient(118deg,#141619 0%,#2E3339 58%,#3D434B 100%)}
.hero--photo::before{background:linear-gradient(100deg,rgba(20,22,25,.90),rgba(46,51,57,.62))}

/* 히어로 기하 패턴 — 동심원(권리 범위) + 45도 격자(도면) */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    repeating-radial-gradient(circle at 84% 24%,
      transparent 0 86px, rgba(201,165,92,.20) 86px 87px, transparent 87px 172px),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.035) 0 1px, transparent 1px 26px);
  -webkit-mask-image:linear-gradient(105deg, transparent 0%, #000 42%, #000 100%);
  mask-image:linear-gradient(105deg, transparent 0%, #000 42%, #000 100%);
}
.hero .wrap{position:relative;z-index:2;padding-top:56px;padding-bottom:56px}
.hero .label{color:#D6B370}
.hero h1{margin-top:24px;color:#fff;font-weight:900;letter-spacing:-.025em;line-height:1.18;font-size:clamp(30px,5.4vw,62px)}
.hero .kor{margin-top:26px;font-size:clamp(17px,2vw,24px);font-weight:400;color:#EDEEF0;letter-spacing:-.02em;line-height:1.6}
.hero .lede{margin-top:22px;max-width:42em;font-size:16.5px;color:rgba(237,238,240,.82);line-height:1.95}
.btns{margin-top:42px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;font-size:15px;font-weight:500;padding:16px 32px;border-radius:2px;
  border:1px solid transparent;transition:all .22s}
.btn--solid{background:#fff;color:var(--brand)}
.btn--solid:hover{background:#EDEEF0}
.btn--line{border-color:rgba(255,255,255,.5);color:#fff}
.btn--line:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--brand{background:var(--brand);color:#fff}
.btn--brand:hover{background:var(--brand-dark)}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{background:var(--bg-soft)}

/* ---------- 서브페이지 헤더 ---------- */
.subhero{background:#17191D;color:#fff;padding:clamp(56px,8vw,96px) 0 clamp(48px,6vw,72px);
  position:relative;overflow:hidden}
.subhero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-radial-gradient(circle at 90% 0%,
      transparent 0 70px, rgba(201,165,92,.17) 70px 71px, transparent 71px 142px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 24px);
  -webkit-mask-image:linear-gradient(100deg, transparent 0%, #000 50%);
  mask-image:linear-gradient(100deg, transparent 0%, #000 50%);
}
.subhero .wrap{position:relative;z-index:1}
.subhero .label{color:#D6B370}
.subhero h1{margin-top:20px;font-size:clamp(28px,4.6vw,50px);font-weight:900;letter-spacing:-.03em;line-height:1.24}
.subhero p{margin-top:22px;max-width:44em;font-size:17px;color:#B0B4BA;line-height:1.9}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#949AA2}
.crumb a:hover{color:#D6B370}

/* ---------- 카드 3개 (클릭 가능) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:28px}
.card{background:#fff;border:1px solid var(--line);border-radius:3px;padding:40px 34px;display:flex;flex-direction:column;
  transition:transform .28s,box-shadow .28s,border-color .28s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(23,25,29,.10);border-color:#CDD1D6}
.card .no{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent)}
.card h3{margin-top:20px;font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.45}
.card p{margin-top:16px;font-size:15.5px;color:var(--body);flex:1}
.card .more{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;font-weight:500;color:var(--brand);display:flex;align-items:center;gap:8px}
.card:hover .more{gap:14px}
.card .more::after{content:"→";transition:transform .25s}
.tags{margin-top:24px;display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:12.5px;color:var(--muted);border:1px solid var(--line);padding:6px 12px;border-radius:2px}

/* ---------- 2단 ---------- */
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.two h3{font-size:clamp(21px,2.5vw,28px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.5}
.two p{margin-top:22px;font-size:16px}
.steps{margin-top:38px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:58px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--line)}
.step .n{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--brand);padding-top:4px}
.step strong{display:block;font-size:17px;font-weight:700;color:var(--ink)}
.step span{display:block;margin-top:8px;font-size:15px;color:var(--muted)}
.panel{background:var(--bg-soft);border:1px solid var(--line);border-radius:3px;padding:36px 32px}
.panel h4{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.panel ul{margin-top:22px;list-style:none}
.panel li{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--body)}
.panel li:last-child{border-bottom:none}
.panel .note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);line-height:1.8}

/* ---------- ML 시스템 ---------- */
.sys{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.sys > div{background:#fff;padding:30px 28px}
.sys .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.sys h4{margin-top:12px;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.sys p{margin-top:12px;font-size:14.5px;color:var(--muted);line-height:1.8}

.creed{margin-top:44px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);padding:34px 32px}
.creed h4{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.creed p{margin-top:16px;font-size:15.5px}
.creed ul{margin-top:20px;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
.creed li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--body)}

/* ---------- 게시판 ---------- */
.board{border-top:2px solid var(--ink)}
.board article{border-bottom:1px solid var(--line);transition:background .2s}
.board article:hover{background:var(--bg-soft)}
.board a{display:grid;grid-template-columns:130px 1fr 120px;gap:28px;padding:26px 8px;align-items:baseline}
.board .bt{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--accent)}
.board h3{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.5}
.board p{margin-top:9px;font-size:15px;color:var(--muted);max-width:56em}
.board .bd{font-family:var(--mono);font-size:13px;color:var(--muted);text-align:right}
.board-empty{padding:60px 0;text-align:center;color:var(--muted);border-bottom:1px solid var(--line)}

/* 게시판 본문 */
.post{max-width:820px;margin:0 auto}
.post h2{font-size:clamp(21px,2.6vw,28px);font-weight:700;color:var(--ink);letter-spacing:-.02em;
  line-height:1.5;margin:52px 0 0}
.post h3{font-size:19px;font-weight:700;color:var(--ink);margin:38px 0 0}
.post p{margin-top:18px;font-size:16.5px}
.post ul,.post ol{margin-top:18px;padding-left:22px}
.post li{margin-top:9px;font-size:16.5px}
.post strong{font-weight:700;color:var(--ink)}
.post blockquote{margin-top:22px;padding:18px 24px;background:var(--bg-soft);border-left:3px solid var(--brand);
  font-size:16px;color:var(--ink)}
.post code{font-family:var(--mono);font-size:.92em;background:var(--bg-soft);padding:2px 6px;border:1px solid var(--line)}
.post hr{margin:44px 0;border:0;border-top:1px solid var(--line)}
.post a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.post table{width:100%;margin-top:24px;border-collapse:collapse;font-size:15.5px}
.post th,.post td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.post th{background:var(--bg-soft);font-weight:700;color:var(--ink);font-size:14.5px}
.post-meta{display:flex;gap:16px;align-items:center;font-family:var(--mono);font-size:12.5px;color:var(--muted);
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.post-meta .t{color:var(--accent);letter-spacing:.1em}
.post-nav{max-width:820px;margin:64px auto 0;padding-top:28px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- 통계 ---------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.figs > div{background:#fff;padding:30px 24px;text-align:center}
.figs .v{font-size:clamp(26px,3.6vw,38px);font-weight:900;color:var(--brand);line-height:1.1;letter-spacing:-.03em}
.figs .l{margin-top:10px;font-size:14px;color:var(--muted);line-height:1.6}
.srcnote{margin-top:26px;font-size:13.5px;color:var(--muted);line-height:1.9;
  padding:20px 24px;background:var(--bg-soft);border:1px solid var(--line)}

/* ---------- 전문가 ---------- */
.person{display:grid;grid-template-columns:290px 1fr;gap:60px;align-items:start}
.person .photo{aspect-ratio:3/4;border:1px solid var(--line);border-radius:3px;
  background:linear-gradient(150deg,#EDEEF0,#DCDEE2);display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.9}
.person h3{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.person .role{margin-top:10px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--brand)}
.person > div > p{margin-top:24px;font-size:16px;max-width:42em}
.qual{margin-top:32px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.qual h5{grid-column:1/-1;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-top:22px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.qual h5:first-child{margin-top:0}
.qual li{list-style:none;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}

.rec{border-top:2px solid var(--ink)}
.rec .row{display:grid;grid-template-columns:220px 1fr;gap:30px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.rec dt{font-size:14px;font-weight:500;color:var(--muted)}
.rec dd{font-size:16.5px;color:var(--ink)}

/* ---------- 푸터 ---------- */
.foot{background:#17191D;color:#B0B4BA;padding:clamp(64px,8vw,104px) 0 44px;
  position:relative;overflow:hidden}
.foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-radial-gradient(circle at 12% 108%,
      transparent 0 92px, rgba(201,165,92,.14) 92px 93px, transparent 93px 186px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 26px);
  -webkit-mask-image:linear-gradient(20deg, #000 0%, transparent 62%);
  mask-image:linear-gradient(20deg, #000 0%, transparent 62%);
}
.foot .wrap{position:relative;z-index:1}
.foot-top{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;padding-bottom:54px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot .label{color:#D6B370}
.foot h2{margin-top:20px;color:#fff;font-size:clamp(24px,3vw,36px);font-weight:700;line-height:1.45;letter-spacing:-.03em}
.foot .lede{margin-top:22px;font-size:16px;max-width:28em;color:#B0B4BA}
.foot .btn--solid{margin-top:30px;background:#D6B370;color:#231B08}
.fc dt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#D6B370;margin-top:24px}
.fc dt:first-child{margin-top:0}
.fc dd{margin-top:7px;font-size:16px;color:#EDEFF2}
.fc dd a:hover{color:#D6B370}
.foot-base{padding-top:30px;font-size:13px;color:#858B93;line-height:1.9}

.rise{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rise.on{opacity:1;transform:none}

/* ---------- 반응형 ---------- */
@media (max-width:1000px){
  .wrap{padding:0 24px}
  .menu,.top .cta{display:none}
  .burger{display:flex}
  .top.open .menu{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:78px;
    background:#fff;border-bottom:1px solid var(--line);padding:8px 24px 20px}
  .top.open .menu a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .top.open .menu a::after{display:none}
  .cards{grid-template-columns:1fr;gap:18px}
  .two{grid-template-columns:1fr;gap:44px}
  .sys{grid-template-columns:1fr}
  .creed{padding:26px 22px}
  .creed ul{grid-template-columns:1fr}
  .figs{grid-template-columns:repeat(2,1fr)}
  .board a{grid-template-columns:1fr;gap:8px;padding:22px 4px}
  .board .bd{text-align:left}
  .person{grid-template-columns:1fr;gap:32px}
  .person .photo{max-width:230px}
  .qual{grid-template-columns:1fr}
  .rec .row{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .foot-top{grid-template-columns:1fr;gap:44px}
  .post table{display:block;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
  html{scroll-behavior:auto}
}