@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════
   만작(滿酌) — 공용 디자인 토큰 + 컴포넌트
   페이지 전용 스타일은 css/pages/{page}.css 로 분리한다.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── 색 ───────────────────────────────────────────────────────
       Primary 는 브랜드 확정값(#C1440E, 단청 계열 주홍). 바꾸지 말 것.
       stage 는 단청의 다른 축(뇌록)을 깊게 내린 값으로, 페이지에 명암
       박자를 만드는 어두운 밴드와 푸터에만 쓴다. */
    --paper:      #faf6f0;   /* 지면 — 순백 지양 */
    --paper-sunk: #f2ebe1;   /* 가라앉힌 면 */
    --stage:      #0e3a35;   /* 무대 — 어두운 밴드 */
    --stage-up:   #17514a;   /* 무대 위 구획선 */
    --ink:        #1b1917;   /* 본문 — 순검정 지양 */
    --ink-soft:   #6e6459;
    --rule:       #ddd2c4;   /* 헤어라인 */
    --primary:    #c1440e;
    --primary-dk: #a1370a;
    --primary-lt: #e8794a;   /* 어두운 지면 위에서 쓰는 주홍 */

    /* ── 글자 ─────────────────────────────────────────────────────
       세 역할을 서체가 아니라 '텍스트가 하는 일'로 나눈다.
         display — 이름과 제목. GmarketSans, 평평한 종결부의 기하학 국문체.
         sans    — 설명하는 말. Pretendard.
         mono    — 확인하는 값(사업자번호·업종코드·수치).
       GmarketSans 는 fonts/gmarket/ 에 조각으로 셀프호스팅돼 있다. */
    --display: 'GmarketSans', 'Pretendard', sans-serif;
    --sans:    'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --fs-display: clamp(2.75rem, 7vw, 5.5rem);
    --fs-h2:      clamp(1.9rem, 3.4vw, 2.9rem);
    --fs-lead:    clamp(1.0625rem, 1.5vw, 1.3125rem);
    --fs-body:    1rem;
    --fs-small:   .875rem;
    --fs-rec:     .8125rem;   /* 기록값(mono) */

    /* ── 여백 ───────────────────────────────────────────────────── */
    --wrap:      1240px;
    --gutter:    24px;
    --aside:     260px;       /* 섹션 제목 칸 */
    --sec-pad:   clamp(72px, 8vw, 124px);
}

/* ── 기본 ─────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.85;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
::selection { background: var(--primary); color: #fff; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* 건너뛰기 링크 — 키보드 사용자에게만 보인다 */
.skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    padding: 12px 20px; background: var(--ink); color: var(--paper);
}
.skip:focus { left: 0; }

/* ── 레이아웃 ─────────────────────────────────────────────────── */
.wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { border-top: 1px solid var(--rule); }
.section--sunk { background: var(--paper-sunk); }

/* 어두운 밴드 — 페이지의 명암 박자. 작업(증거) 섹션 하나에만 쓴다. */
.section--stage {
    background: var(--stage);
    border-top: 0;
    color: #cfe0dc;
}
.section--stage .sec__title { color: #fff; }

.section__inner { padding-block: var(--sec-pad); }

/* 섹션 제목 칸 + 본문 칸. 넓은 화면에서는 제목이 따라 내려온다. */
.section__grid { display: grid; gap: 26px; }

@media (min-width: 900px) {
    .section__grid {
        grid-template-columns: minmax(0, var(--aside)) minmax(0, 1fr);
        gap: 72px;
    }

    /* 본문이 지나가는 동안 지금 어느 섹션인지 계속 보이게 한다.
       장식이 아니라 위치 표시다. */
    .sec__head {
        position: sticky;
        top: 106px;   /* 헤더 66px + 여유 */
    }
}

/* ── 섹션 제목 ────────────────────────────────────────────────
   한글 제목 하나만 둔다. 그 위에 영문 eyebrow(ABOUT/SERVICES)를 얹으면
   읽는 사람에게 알려주는 것 없이 템플릿처럼 보이기만 한다. */
.sec__title {
    margin: 0;
    font-family: var(--display);
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
}

/* ── 글자 컴포넌트 ────────────────────────────────────────────── */
.eyebrow {
    font-family: var(--mono);
    font-size: var(--fs-rec);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--primary);
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.78;
}

.muted { color: var(--ink-soft); }
.section--stage .muted { color: #8fb0a9; }

/* 기록값 — 사업자번호·업종코드·수치처럼 '확인하는 값' */
.rec {
    font-family: var(--mono);
    font-size: var(--fs-rec);
    letter-spacing: .04em;
    color: var(--ink-soft);
}

.measure { max-width: 34em; }

/* 섹션 제목 아래 붙는 한 줄 부연 */
.sec__note {
    margin-top: 12px;
    font-size: var(--fs-small);
    color: var(--ink-soft);
}

.section--stage .sec__note { color: #8fb0a9; }

/* 사양표 — 라벨과 값이 짝을 이루는 기록. 소개와 작업 상세가 함께 쓴다. */
.spec {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 26px;
    max-width: 34em;
    font-size: var(--fs-small);
}

.spec dt { color: var(--ink-soft); white-space: nowrap; }
.spec dd { color: var(--ink); }

/* ── 버튼 ─────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: 16px 30px;
    border: 1px solid var(--ink);
    border-radius: 2px;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: background .22s ease, color .22s ease, border-color .22s ease;
}

.btn:hover { background: var(--ink); color: var(--paper); }

.btn--primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.btn--primary:hover { background: var(--primary-dk); border-color: var(--primary-dk); color: #fff; }

.btn--ghost { border-color: var(--rule); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* 어두운 밴드 위에 놓이는 보조 버튼 */
.btn--on-stage { border-color: rgba(255,255,255,.3); color: #fff; }
.btn--on-stage:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }
.section--stage .btn:focus-visible { outline-color: var(--primary-lt); }

/* ── 헤더 ─────────────────────────────────────────────────────── */
.head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--rule);
}

.head__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 66px;
}

.logo { display: inline-flex; align-items: baseline; gap: 9px; }
.logo__ko { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.logo__hanja { font-size: .8125rem; font-weight: 500; color: var(--primary); letter-spacing: .1em; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__link {
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--ink-soft);
    transition: color .2s ease;
}

/* '선이 왼쪽에서 자라는' 연출은 서비스 목록 한 곳에만 남긴다 —
   여러 곳에서 반복하면 브랜드 어법이 아니라 버릇으로 읽힌다. */
.nav__link:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-underline-offset: 6px;
}

@media (max-width: 599px) {
    .nav__link--sub { display: none; }
}

/* ── 푸터 ─────────────────────────────────────────────────────── */
.foot {
    background: var(--stage);
    color: #cfe0dc;
    padding-block: 64px 44px;
}

.foot a { color: #fff; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.foot__top {
    display: grid;
    gap: 34px;
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(255,255,255,.16);
}

@media (min-width: 800px) {
    .foot__top { grid-template-columns: 1fr auto; align-items: start; }
}

.foot__mark { display: inline-flex; align-items: baseline; gap: 9px; color: #fff; }
.foot__mark-ko { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.foot__mark-hanja { font-size: .8125rem; font-weight: 500; letter-spacing: .1em; color: var(--primary-lt); }

.foot__tagline { margin-top: 10px; font-size: var(--fs-small); color: #8fb0a9; }

/* 사업자정보 — 값이 비면 '준비 중'으로 정직하게 표시한다. */
.bizinfo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 18px;
    margin-top: 28px;
    font-size: var(--fs-small);
    line-height: 1.7;
}

.bizinfo dt { color: #7fa39c; white-space: nowrap; }
.bizinfo dd { color: #cfe0dc; }
.bizinfo dd.is-todo { color: #7fa39c; }
.bizinfo dd .rec { color: #cfe0dc; }

.foot__legal {
    margin-top: 26px;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .04em;
    color: #6f918b;
}

/* ── 스크롤 진입 연출 ───────────────────────────────────────────
   기본값은 '보이는 상태'다. 숨기는 건 JS가 실제로 관찰을 시작할 때만
   is-armed 로 걸어준다 — 그래야 JS가 죽거나 IntersectionObserver 가
   동작하지 않는 환경에서 본문이 통째로 사라지지 않는다. */
.reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-armed { opacity: 0; transform: translateY(16px); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}