/* ==========================================================================
   GLOW99 서비스 허브 (/consulting) — 2026-09-12 개편
   AI 리서치 / AI 챗봇 / AI 사진분석 / MY GLOW 와 같은 디자인 언어
   (딥그린 #1c3527 · off-white #f4f9f6 · 1px border · 그림자 최소 · Pretendard · mono eyebrow).
   토큰을 직접 정의해 다른 CSS 에 의존하지 않는다. 모든 선택자는 co- 접두사. 외부 프레임워크 없음.
   ========================================================================== */

/* ---------- Tokens ---------- */
.co {
  --glow-900: #1c3527; --glow-700: #244331; --glow-600: #305d43; --glow-400: #6ea885;
  --glow-100: #e3eee7; --glow-50: #f4f9f6;
  --ink: #17211b; --ink-2: #2c3830; --muted: #56625a; --muted-2: #65716a;
  --line: #d6e2da; --line-2: #c3d2c8; --paper: #fff;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
      "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 12px; --radius-sm: 8px;
  --wrap: 1200px; --gutter: clamp(16px, 4vw, 40px); --header-h: 60px;
}
@media (min-width: 1600px) { .co { --wrap: 1360px; } }

/* ---------- Base ---------- */
.co, .co *, .co *::before, .co *::after { box-sizing: border-box; }
body.co {
  margin: 0; background: var(--glow-50); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere;
}
.co :where(h1, h2, h3, h4, p, ul, ol, li, dl, dd, figure) { margin: 0; }
.co :where(ul, ol) { padding: 0; list-style: none; }
.co :where(a) { color: inherit; text-decoration: none; }
.co :where(button) { font: inherit; color: inherit; cursor: pointer; }
.co [hidden] { display: none !important; }
.co :focus-visible { outline: 2px solid var(--glow-600); outline-offset: 2px; border-radius: 4px; }
.co-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.co-skip { position: absolute; left: 12px; top: -48px; z-index: 300; padding: 8px 14px; background: var(--glow-900); color: #fff; border-radius: var(--radius-sm); }
.co-skip:focus { top: 10px; }
.co-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.co-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--glow-600);
}
.co-label::before { content: ""; width: 22px; height: 1.5px; background: currentColor; opacity: .7; }

.co-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700; text-decoration: none;
  color: #fff; background: var(--glow-900); border: 1px solid var(--glow-900);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.co-btn:hover { background: var(--glow-700); border-color: var(--glow-700); }
.co-btn span { transition: transform .15s ease; }
.co-btn:hover span { transform: translateX(3px); }
.co-btn--ghost { color: var(--glow-900); background: var(--paper); border-color: var(--line-2); }
.co-btn--ghost:hover { background: var(--glow-50); border-color: var(--glow-600); }
@media (prefers-reduced-motion: reduce) { .co-btn span { transition: none; } }

/* ---------- Header ---------- */
.co-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: rgba(244, 249, 246, .96); border-bottom: 1px solid var(--line); color: var(--glow-900); backdrop-filter: blur(6px); }
.co-header-inner { height: 100%; display: flex; align-items: center; gap: 16px; }
.co-logo { display: inline-flex; flex: 0 0 auto; }
.co-logo-mark {
  display: block; width: 92px; height: 24px; background-color: currentColor;
  -webkit-mask: url("/images/logos/logoWhite.png") center / contain no-repeat;
          mask: url("/images/logos/logoWhite.png") center / contain no-repeat;
}
.co-app { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--glow-600); padding-left: 16px; border-left: 1px solid var(--line-2); line-height: 20px; white-space: nowrap; }
.co-header-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.co-hlink { font-size: 14px; font-weight: 500; opacity: .85; white-space: nowrap; }
.co-hlink:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }

/* ---------- Masthead ---------- */
.co-main { padding-bottom: 64px; }
.co-mast { padding: 44px 0 12px; max-width: 44ch; }
.co-title { margin-top: 14px; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.22; font-weight: 800; letter-spacing: -.03em; color: var(--glow-900); }
.co-lede { margin-top: 12px; font-size: 16.5px; color: var(--muted); max-width: 42ch; }

/* ---------- Section head ---------- */
.co-sec { margin-top: 40px; }
.co-sec-head { max-width: 52ch; }
.co-sec-head h2 { margin-top: 8px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; color: var(--glow-900); }
/* 외부(홈 WORK/GLOW DESK)에서 #co-build · #co-reports 앵커로 진입 시 고정 헤더에 가리지 않도록 */
.co #co-build, .co #co-reports { scroll-margin-top: 84px; }
.co-sec-head p { margin-top: 8px; font-size: 15px; color: var(--muted); }

/* ---------- Featured: 맞춤형 개발 ---------- */
.co-featured {
  margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px 36px;
  padding: 34px 36px; border: 1px solid var(--line); border-top: 3px solid var(--glow-900);
  border-radius: var(--radius); background: var(--paper);
}
.co-featured h2 { margin-top: 12px; font-size: clamp(23px, 2.8vw, 30px); font-weight: 800; letter-spacing: -.025em; color: var(--glow-900); line-height: 1.28; }
.co-featured-lede { margin-top: 12px; font-size: 15.5px; color: var(--ink-2); max-width: 42ch; }
.co-featured-cta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.co-price-note { font-size: 14px; color: var(--muted); }
.co-price-note b { font-weight: 700; color: var(--ink); }

.co-cap { display: grid; gap: 16px; align-content: start; }
.co-cap-group { }
.co-cap-group dt { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--glow-600); }
.co-cap-group dd { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.co-cap-group dd span { padding: 4px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--glow-50); font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* ---------- Report product cards ---------- */
.co-plans { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.co-plan { display: flex; flex-direction: column; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.co-plan-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--glow-600); }
.co-plan-title { margin-top: 8px; font-size: 17px; font-weight: 800; letter-spacing: -.015em; color: var(--glow-900); }
.co-plan-desc { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.co-plan-incl { margin-top: 14px; display: grid; gap: 6px; }
.co-plan-incl li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.co-plan-incl li::before { content: ""; position: absolute; left: 3px; top: .58em; width: 6px; height: 3px; border-left: 1.5px solid var(--glow-600); border-bottom: 1.5px solid var(--glow-600); transform: rotate(-45deg); }
.co-plan-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.co-plan-price { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.co-plan-price small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.co-plan-cta { margin-top: 14px; width: 100%; min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--glow-600); background: var(--paper); color: var(--glow-700); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.co-plan-cta:hover { background: var(--glow-900); border-color: var(--glow-900); color: #fff; }

/* ---------- Process (two tracks) ---------- */
.co-tracks { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.co-track { padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.co-track > .co-label { margin-bottom: 4px; }
.co-track h3 { font-size: 17px; font-weight: 800; color: var(--glow-900); letter-spacing: -.015em; }
.co-track ol { margin-top: 16px; display: grid; gap: 14px; counter-reset: st; }
.co-track ol li { counter-increment: st; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; }
.co-track ol li::before { content: counter(st, decimal-leading-zero); grid-row: span 2; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--glow-600); padding-top: 2px; }
.co-track ol strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.co-track ol span { font-size: 13.5px; color: var(--muted); }

/* ---------- Trust ---------- */
.co-trust { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.co-trust-item { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.co-trust-item h3 { font-size: 15px; font-weight: 700; color: var(--glow-900); }
.co-trust-item p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ---------- FAQ ---------- */
.co-faq { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.co-faq-item + .co-faq-item { border-top: 1px solid var(--line); }
.co-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: none; border: 0; text-align: left; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.co-faq-q:hover { background: var(--glow-50); }
.co-faq-q .co-faq-ico { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
.co-faq-q .co-faq-ico::before, .co-faq-q .co-faq-ico::after { content: ""; position: absolute; background: var(--glow-600); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; }
.co-faq-q .co-faq-ico::before { left: 8px; top: 2px; width: 2px; height: 14px; }
.co-faq-q .co-faq-ico::after { left: 2px; top: 8px; width: 14px; height: 2px; }
.co-faq-q[aria-expanded="true"] .co-faq-ico::before { transform: scaleY(0); opacity: 0; }
.co-faq-a { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height .22s ease, padding .22s ease; }
.co-faq-a p { font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.co-faq-item[data-open="1"] .co-faq-a { max-height: 400px; padding: 0 22px 20px; }
@media (prefers-reduced-motion: reduce) { .co-faq-a { transition: none; } }

/* ---------- Contact ---------- */
.co-contact { margin-top: 40px; padding: 34px 36px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glow-900); color: #fff; }
.co-contact .co-label { color: #cfe3d6; }
.co-contact h2 { margin-top: 10px; font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; letter-spacing: -.02em; }
.co-contact p { margin-top: 10px; font-size: 15px; color: #cfe0d6; max-width: 46ch; }
.co-contact-cta { margin-top: 22px; }
.co-contact .co-btn { background: #fff; color: var(--glow-900); border-color: #fff; }
.co-contact .co-btn:hover { background: var(--glow-100); border-color: var(--glow-100); }
.co-contact-info { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.co-contact-info dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #a9c6b6; }
.co-contact-info dd { margin-top: 6px; font-size: 15px; font-weight: 600; }
.co-contact-info dd small { font-weight: 400; color: #a9c6b6; }

.co-foot { padding: 28px 0 8px; font-size: 12.5px; color: var(--muted-2); line-height: 1.7; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .co-featured { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .co-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .co { --header-h: 56px; }
  .co-hlink--wide { display: none; }
  .co-mast { padding: 26px 0 8px; }
  .co-featured { padding: 24px 20px; }
  .co-featured-cta { flex-direction: column; align-items: stretch; }
  .co-featured-cta .co-btn { width: 100%; }
  .co-plans { grid-template-columns: minmax(0, 1fr); }
  .co-tracks { grid-template-columns: minmax(0, 1fr); }
  .co-contact { padding: 24px 20px; }
  .co-contact-info { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .co-contact .co-btn { width: 100%; }
}
@media (max-width: 420px) {
  .co-logo-mark { width: 78px; height: 20px; }
  .co-header-nav { gap: 14px; }
  .co-trust { grid-template-columns: minmax(0, 1fr); }
}