/* ==========================================================================
   FAROS 테마 메인 스타일
   구조: 1.디자인 토큰 → 2.리셋 → 3.타이포 → 4.레이아웃 유틸 → 5.헤더 → 6.푸터
   페이지별 스타일은 각 태스크에서 이 파일 하단에 섹션 단위로 추가한다.
   ========================================================================== */

/* 1. 디자인 토큰 — 사이트 전체가 이 변수만 참조한다 (색 바꿀 땐 여기만) */
:root {
    --bg: #0d1420;            /* 기본 배경: 딥 네이비 */
    --bg-soft: #141d2e;       /* 살짝 밝은 배경(카드·교차 섹션) */
    --text: #e8ecf3;          /* 본문 텍스트 */
    --muted: #9aa7bd;         /* 보조 텍스트 */
    --accent: #f5b301;        /* 포인트: 로고 옐로 계열 */
    --accent-ink: #1a1405;    /* 옐로 버튼 위 글자색 */
    --line: rgba(255, 255, 255, .08);  /* 구분선 */
    --wrap: 1200px;           /* 콘텐츠 최대 폭 */
    --header-h: 64px;         /* 고정 헤더 높이 */
}

/* 2. 리셋 — 최소한만 */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* 3. 타이포그래피 — Pretendard(자체 호스팅, fonts/pretendard.css에서 @font-face) */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
                 "Noto Sans KR", "Malgun Gothic", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    word-break: keep-all;      /* 한국어 어절 단위 줄바꿈 */
}
h1, h2, h3 { line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 .6em; }
h1 { font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700; }
p { margin: 0 0 1em; }

/* 4. 레이아웃 유틸 */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
@media (min-width: 1024px) { .section { padding: 104px 0; } }
.section-title { color: var(--accent); font-size: .85rem; font-weight: 700;
                 letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; }

/* 버튼 — 주(옐로)·부(외곽선) 두 종류 */
.btn { display: inline-block; padding: 13px 26px; border-radius: 6px;
       font-weight: 700; font-size: .95rem; text-decoration: none;
       transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* 5. 고정 헤더 */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
               background: rgba(13, 20, 32, .85); backdrop-filter: blur(10px);
               border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between;
                height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800;
         font-size: 1.15rem; letter-spacing: .04em; text-decoration: none; }
.brand img { height: 30px; width: auto; }
.site-main { padding-top: var(--header-h); }

/* 내비게이션: 데스크톱은 가로 나열 */
.nav-list { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-list a { text-decoration: none; font-size: .92rem; font-weight: 600;
              color: var(--muted); transition: color .15s; }
.nav-list a:hover, .nav-list .current-menu-item a { color: var(--text); }
.nav-toggle { display: none; }

/* 모바일(<768px): 햄버거 + 펼침 메뉴 */
@media (max-width: 767px) {
    .nav-toggle { display: block; background: none; border: 0; cursor: pointer;
                  padding: 8px; color: var(--text); }
    .nav-toggle svg { display: block; }
    .site-nav { position: fixed; top: var(--header-h); left: 0; right: 0;
                background: var(--bg-soft); border-bottom: 1px solid var(--line);
                display: none; }
    .site-nav.open { display: block; }
    .nav-list { flex-direction: column; gap: 0; padding: 8px 0; }
    .nav-list a { display: block; padding: 14px 24px; font-size: 1rem; }
}

/* 6. 푸터 */
.site-footer { border-top: 1px solid var(--line); padding: 36px 0; margin-top: 72px; }
.footer-copy { color: var(--muted); font-size: .85rem; margin: 0; }

/* ==========================================================================
   7. HOME
   ========================================================================== */

/* 히어로: 그리드 텍스처(선형 그라디언트 반복)와 옐로 글로우를 CSS로만 그림 */
.hero { position: relative; padding: 110px 0 120px; overflow: hidden;
        background:
          radial-gradient(700px 360px at 78% 18%, rgba(245, 179, 1, .07), transparent 70%),
          linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
          var(--bg);
        background-size: auto, 48px 48px, 48px 48px, auto; }
.hero::after { /* 하단을 배경색으로 서서히 눌러 그리드가 자연스럽게 사라지게 */
        content: ""; position: absolute; inset: auto 0 0; height: 140px;
        background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero-title { margin-bottom: 20px; }
.hero-sub { color: var(--muted); font-size: clamp(1rem, 1.8vw, 1.2rem); margin-bottom: 36px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
@media (min-width: 1024px) { .hero { padding: 170px 0 190px; } }

/* 로고 벨트: 밝은 칩 + 그레이스케일 → 호버 원색 */
.belt-section { padding-top: 0; }
.belt-lead { color: var(--muted); font-size: .95rem; margin-bottom: 28px; }
.logo-belt { display: flex; flex-wrap: wrap; gap: 12px; max-width: var(--wrap);
             margin: 0 auto; padding: 0 20px; }
.logo-chip { display: flex; align-items: center; justify-content: center;
             background: #f6f7f9; border-radius: 8px; padding: 12px 18px;
             min-height: 58px; }
.logo-chip img { height: 30px; width: auto; filter: grayscale(1); opacity: .75;
                 transition: filter .2s, opacity .2s; }
.logo-chip:hover img { filter: none; opacity: 1; }

/* 서비스 4카드 */
.svc-grid { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 768px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(4, 1fr); } }
.svc-card { display: block; background: var(--bg-soft); border: 1px solid var(--line);
            border-radius: 10px; padding: 26px 22px; text-decoration: none;
            transition: border-color .2s, transform .2s; }
.svc-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.svc-card h3 { color: var(--text); margin-bottom: 8px; }
.svc-card p { color: var(--muted); font-size: .88rem; margin: 0; }

/* 숫자 스트립 */
.stats-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
               background: var(--bg-soft); padding: 40px 0; }
.stats-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 768px) { .stats-inner { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat strong { display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800;
               color: var(--accent); }
.stat span { color: var(--muted); font-size: .88rem; }

/* 인사이트 카드 */
.post-grid { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 768px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: flex; flex-direction: column; gap: 10px; background: var(--bg-soft);
             border: 1px solid var(--line); border-radius: 10px; padding: 24px 22px;
             text-decoration: none; transition: border-color .2s, transform .2s; }
.post-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.post-cat { color: var(--accent); font-size: .78rem; font-weight: 700;
            letter-spacing: .08em; text-transform: uppercase; }
.post-card h3 { color: var(--text); margin: 0; font-size: 1.05rem; }
.post-card p { color: var(--muted); font-size: .88rem; margin: 0; flex: 1; }
.post-card time { color: var(--muted); font-size: .8rem; }

/* CTA 밴드 */
.cta-band { text-align: center; padding: 88px 0;
            background: radial-gradient(560px 280px at 50% 0%, rgba(245, 179, 1, .08), transparent 70%),
                        var(--bg); border-top: 1px solid var(--line); }
.cta-band p { color: var(--muted); margin-bottom: 28px; }

/* ==========================================================================
   8. 내부 페이지 공통 + SERVICES
   ========================================================================== */

/* 페이지 머리 */
.page-head { padding: 72px 0 40px; }
.page-lead { color: var(--muted); max-width: 620px; }

/* 앵커 바로가기 */
.anchor-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.anchor-nav a { padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px;
                text-decoration: none; font-size: .9rem; font-weight: 600;
                color: var(--muted); transition: color .15s, border-color .15s; }
.anchor-nav a:hover { color: var(--accent); border-color: var(--accent); }

/* 영역 섹션 — 교차 배경으로 리듬 */
.svc-section.alt { background: var(--bg-soft); }
.svc-section { scroll-margin-top: calc(var(--header-h) + 12px); }
.svc-lead { color: var(--muted); font-size: 1.05rem; margin-bottom: 32px; }

/* 세부 항목 그리드: 용어(dt) + 설명(dd) */
.item-grid { display: grid; gap: 14px; margin: 0; }
@media (min-width: 768px) { .item-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .item-grid { grid-template-columns: repeat(3, 1fr); } }
.item { background: rgba(255,255,255,.03); border: 1px solid var(--line);
        border-radius: 10px; padding: 20px; }
.item dt { font-weight: 700; margin-bottom: 6px; }
.item dd { margin: 0; color: var(--muted); font-size: .88rem; }

/* 실적 링크·관련 인사이트 */
.svc-more { margin-top: 28px; }
.svc-more a { color: var(--accent); text-decoration: none; font-weight: 600; }
.svc-insight { display: block; margin-top: 14px; padding: 16px 20px;
               border-left: 3px solid var(--accent); background: rgba(245,179,1,.05);
               border-radius: 0 8px 8px 0; text-decoration: none; color: var(--text); }
.svc-insight span { color: var(--accent); font-size: .8rem; font-weight: 700;
                    letter-spacing: .08em; text-transform: uppercase; margin-right: 10px; }

/* ==========================================================================
   9. TRACK RECORD
   ========================================================================== */
.section.alt { background: var(--bg-soft); }

/* 로고 그룹 */
.logo-group { margin-bottom: 36px; }
.logo-group-title { font-size: .9rem; font-weight: 700; color: var(--muted);
                    letter-spacing: .06em; margin-bottom: 14px; }
.logo-group .logo-belt { padding: 0; }

/* 프로젝트 접기/펼치기 */
.proj-list { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.proj { border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.proj summary { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px;
                cursor: pointer; list-style: none; }
.proj summary::-webkit-details-marker { display: none; }
.proj summary::after { content: "+"; position: absolute; right: 22px; margin-top: 4px;
                       color: var(--accent); font-weight: 700; font-size: 1.1rem; }
.proj { position: relative; }
.proj[open] summary::after { content: "\2212"; }
.proj-title { font-weight: 700; padding-right: 36px; }
.proj-meta { color: var(--muted); font-size: .85rem; }
.proj > p { margin: 0; padding: 0 22px 18px; color: var(--muted); font-size: .92rem; }
.proj-note { margin-top: 28px; color: var(--muted); font-size: .88rem; }

/* ==========================================================================
   10. INSIGHTS (목록·본문)
   ========================================================================== */
.anchor-nav a.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.pagination { margin-top: 40px; display: flex; gap: 8px; justify-content: center; }
.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px;
                            text-decoration: none; color: var(--muted); font-size: .9rem; }
.pagination .page-numbers.current { background: var(--accent); color: var(--accent-ink);
                                    border-color: var(--accent); font-weight: 700; }

/* 본문: 좁은 컨테이너(약 700px)로 행 길이 제한 → 가독성 */
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.post-head { padding: 72px 0 8px; }
.post-head h1 { margin: 10px 0 12px; }
.post-head time { color: var(--muted); font-size: .9rem; }
.post-body { padding: 32px 0 16px; font-size: 1.02rem; line-height: 1.85; }
.post-body h2 { margin-top: 2em; }
.post-body h3 { margin-top: 1.6em; }
.post-body a { color: var(--accent); }
.post-body blockquote { margin: 1.5em 0; padding: 4px 22px; border-left: 3px solid var(--accent);
                        color: var(--muted); }
.post-body img { border-radius: 10px; margin: 1.5em auto; }

/* 표 — 규제 해설 글에 필수 */
.post-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .92rem; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.post-body th { background: var(--bg-soft); font-weight: 700; }

/* 코드 블록 — 기술 노트 글에 필수 (하이라이터 없이도 읽히는 기본 스타일) */
.post-body code { font-family: "JetBrains Mono", "D2Coding", ui-monospace, monospace;
                  font-size: .88em; background: rgba(255,255,255,.07);
                  padding: 2px 7px; border-radius: 5px; }
.post-body pre { background: #0a0f18; border: 1px solid var(--line); border-radius: 10px;
                 padding: 20px 22px; overflow-x: auto; line-height: 1.6; }
.post-body pre code { background: none; padding: 0; font-size: .86rem; }

/* 본문 하단 전환 장치 */
.post-foot { padding-bottom: 48px; }
.post-cta { text-align: center; margin-top: 40px; padding: 44px 24px;
            border: 1px solid var(--line); border-radius: 14px;
            background: radial-gradient(420px 200px at 50% 0%, rgba(245,179,1,.07), transparent 70%); }
.post-cta h2 { font-size: 1.3rem; }
.post-cta p { color: var(--muted); margin-bottom: 22px; }

/* ==========================================================================
   11. ABOUT + CONTACT
   ========================================================================== */
.about-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: repeat(3, 1fr); } }
.about-block h2 { font-size: 1.25rem; margin-bottom: 16px; }
.about-block p, .about-block li { color: var(--muted); }
.about-block strong { color: var(--text); }
.principle-list { list-style: none; margin: 0; padding: 0; display: flex;
                  flex-direction: column; gap: 14px; }
.principle-list li { padding-left: 18px; position: relative; font-size: .95rem; }
.principle-list li::before { content: ""; position: absolute; left: 0; top: .55em;
                             width: 7px; height: 7px; border-radius: 2px;
                             background: var(--accent); }

.company-info { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.company-info div { display: flex; gap: 16px; font-size: .95rem; }
.company-info dt { color: var(--muted); min-width: 64px; }
.company-info dd { margin: 0; }
.company-info a { color: var(--accent); text-decoration: none; }

.contact-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; } }

/* 문의 폼 (Task 8 쇼트코드 출력물) */
.faros-form { display: flex; flex-direction: column; gap: 16px; }
.faros-form label { font-size: .88rem; font-weight: 600; display: block; margin-bottom: 6px; }
.faros-form input, .faros-form select, .faros-form textarea {
    width: 100%; padding: 12px 14px; border-radius: 8px; font-size: .95rem;
    background: var(--bg-soft); border: 1px solid var(--line); color: var(--text);
    font-family: inherit; }
.faros-form input:focus, .faros-form select:focus, .faros-form textarea:focus {
    outline: none; border-color: var(--accent); }
.faros-form textarea { min-height: 160px; resize: vertical; }
/* 허니팟: 사람 눈과 스크린리더 모두에서 숨김 */
.faros-form .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-notice { padding: 14px 18px; border-radius: 8px; font-size: .92rem; }
.form-notice.ok { background: rgba(80, 200, 120, .12); border: 1px solid rgba(80, 200, 120, .4); }
.form-notice.err { background: rgba(220, 80, 80, .12); border: 1px solid rgba(220, 80, 80, .4); }