/* MAOR apex — 공통 베이스. 톤: "깊이는 구조에, 표면은 빛으로" — 명료한 빛·절제·여백·최소 기하. */
:root {
  /* 표면 = 빛 (명료한 빛 라이트 팔레트, 콘솔 v0.2 정합) */
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #eef3f9;
  --border: #e3eaf2;
  --text: #1b2a3a;
  --text-muted: #54657a;
  /* 스펙트럼 시그니처 (프리즘 굴절 — 공통 강조) */
  --spectrum-cyan: #5cc0ff;
  --spectrum-teal: #7bd0b0;
  --spectrum-violet: #b9a8e8;
  --accent: #5cc0ff;          /* 팔레트가 덮음 */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
/* C 팔레트 — 대외(랜딩·INTRO), teal-green 주조 "숲의 결" */
.pal-c { --accent: #7bd0b0; }
/* B 팔레트 — 내부(CORE·KITECH), cyan 주조 "명료한 빛" */
.pal-b { --accent: #5cc0ff; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, "Pretendard", "Apple SD Gothic Neo", "Segoe UI", system-ui, sans-serif;
  line-height: 1.7; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 헤더 */
.site-head {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 28px; max-width: 1080px; margin: 0 auto;
}
.site-head img { height: 30px; width: 30px; object-fit: contain; }
.site-head .wm { font-weight: 800; letter-spacing: -.3px; font-size: 16px; }
.site-head .wm small { color: var(--text-muted); font-weight: 600; margin-left: 6px; font-size: 12.5px; }

/* 히어로 */
.hero {
  position: relative; max-width: 1080px; margin: 8px auto 0; padding: 0 28px;
}
.hero-visual {
  width: 100%; border-radius: 18px; overflow: hidden; aspect-ratio: 16/7;
  background: var(--surface-2) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 40px rgba(27,42,58,.08);
}
.hero h1 { font-size: clamp(34px, 6vw, 56px); margin: 28px 0 8px; letter-spacing: -1px; }
.hero .essence { font-size: clamp(15px, 2.4vw, 19px); color: var(--text-muted); margin: 0 0 6px; font-weight: 500; }
.hero .sub { font-size: 13.5px; color: var(--text-muted); font-style: italic; opacity: .85; }

/* 가벼운 정문 마스트헤드 (메인 = 네비게이션 중심, 키비주얼 없음) */
.masthead { max-width: 1080px; margin: 0 auto; padding: 64px 28px 10px; text-align: center; }
.masthead h1 { font-size: clamp(40px, 7vw, 60px); letter-spacing: -1.5px; margin: 0 0 16px; font-weight: 800; }
.spectrum-accent { width: 60px; height: 3px; border-radius: 2px; margin: 0 auto 18px; opacity: .85;
  background: linear-gradient(90deg, var(--spectrum-cyan), var(--spectrum-teal), var(--spectrum-violet)); }
.masthead .essence { font-size: clamp(15px, 2.2vw, 18px); color: var(--text-muted); margin: 0 0 5px; font-weight: 500; }
.masthead .sub { font-size: 13px; color: var(--text-muted); font-style: italic; opacity: .8; }

/* 구획 */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
section.block { padding: 38px 0; border-top: 1px solid var(--border); margin-top: 38px; }
section.block:first-of-type { border-top: none; }
h2 { font-size: 20px; letter-spacing: -.3px; margin: 0 0 14px; }
h2 .spectrum { display: inline-block; width: 28px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 9px;
  background: linear-gradient(90deg, var(--spectrum-cyan), var(--spectrum-teal), var(--spectrum-violet)); }
h3 { font-size: 15px; margin: 18px 0 6px; }
p { margin: 0 0 12px; }
.muted { color: var(--text-muted); }

/* 4 카드 (랜딩) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 14px; }
.qcard {
  display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 20px; transition: .18s; position: relative; overflow: hidden;
}
.qcard:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(27,42,58,.09); border-color: var(--accent); }
.qcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .8; }
.qcard .ql { font-size: 12px; color: var(--text-muted); letter-spacing: .04em; }
.qcard .qn { font-size: 18px; font-weight: 750; margin: 4px 0 7px; color: var(--text); letter-spacing: -.3px; }
.qcard .qd { font-size: 13px; color: var(--text-muted); }
.qcard .qgate { position: absolute; right: 14px; top: 14px; font-size: 11px; color: var(--text-muted); }

/* 표 */
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; font-size: 12.5px; }
code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

/* 리스트 */
ul.clean { list-style: none; padding: 0; margin: 8px 0; }
ul.clean li { padding: 5px 0 5px 16px; position: relative; }
ul.clean li::before { content: ""; position: absolute; left: 0; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* 푸터 */
footer { max-width: 1080px; margin: 50px auto 0; padding: 22px 28px 40px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px; }

/* 뱃지 */
.badge { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 11px;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.slot { border: 1px dashed var(--border); border-radius: 8px; padding: 10px 13px; color: var(--text-muted);
  font-size: 12.5px; background: var(--surface-2); margin: 8px 0; }