/* 글꼴은 pretendard.css (Pretendard 가변 글꼴, 글자 묶음별로 필요한 것만 받음) */

/* ==========================================================
   디자인 기준값
   배경은 세 가지만 쓴다: 흰색, 미색(cream), 먹색(dark)
   ========================================================== */
:root {
    /* 색: 에디토리얼 (먹색 글자, 미색 바탕, 무채색) + 포인트 한 색 */
    --ink: #171717;                  /* 메인 텍스트 */
    --paper: #faf9f6;                /* 배경 */
    --ink-sub: #666666;              /* 보조 텍스트 */
    --rule: #e7e5e1;                 /* 테두리 */
    --accent-on-dark: #ea580c;       /* 먹색 바탕 위 포인트 (대비 5.0:1). --accent 를 바꾸면 같이 맞춘다 */
    --accent: #c2410c;               /* 포인트 (짙은 앰버). 로고 IM, 밑줄·선·마우스 올림에 사용. 바꿀 땐 이 한 줄만 */
    --radius-btn: 8px;               /* 버튼 모서리 */

    /* 예전 이름 (여러 곳에서 쓰고 있어서 이름은 두고 값만 새 색으로) */
    --color-bg: var(--paper);
    --color-cream: var(--paper);
    --color-dark: var(--ink);
    --color-text: var(--ink);
    --color-muted: var(--ink-sub);
    --color-line: var(--rule);
    --color-line-strong: var(--rule);
    --color-point: var(--ink);       /* 강조·포커스 = 먹색 */
    --color-point-soft: #efede8;     /* 배지 바탕 */
    --color-point-ink: #444444;      /* 배지 글자 */

    /* 어두운 섹션 위 */
    --color-on-dark: #ffffff;
    --color-on-dark-muted: #b3b3b3;
    --color-on-dark-faint: #8c8c8c;
    --color-on-dark-line: #333333;
    --color-on-dark-point: #d4d4d4;

    /* 글자 */
    --font-base: 'Pretendard Variable', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --fs-body: 1.0625rem;            /* 17px */
    --fs-hero: clamp(2.5rem, 1.2rem + 5.2vw, 5rem);        /* 휴대폰 40px ~ PC 80px */
    --fs-section: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem); /* 30px ~ 46px */
    --lh-body: 1.7;
    --tracking-tight: -0.04em;

    /* 여백 */
    --space-section: clamp(88px, 9vw, 128px);
    --space-head: 56px;              /* 섹션 제목과 내용 사이 */

    --ease: cubic-bezier(0.23, 1, 0.32, 1);   /* 빠르게 출발해서 부드럽게 멈춤 */

    --max-width: 1200px;
    --header-height: 68px;
    --radius: 12px;
}

/* ==========================================================
   기본
   ========================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;   /* 내용이 짧아도 푸터가 화면 맨 아래에 붙게 */
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

main {
    flex: 1 0 auto;   /* 남는 높이를 본문이 차지 */
}

img {
    max-width: 100%;
    display: block;
}

/* ==========================================================
   레이아웃
   ========================================================== */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.container.narrow {
    max-width: 760px;   /* 상세 페이지 본문 */
}

.container.faq-wrap {
    max-width: 900px;
}

.section {
    padding: var(--space-section) 0;
    scroll-margin-top: var(--header-height);   /* 고정 헤더에 제목이 가리지 않게 */
}

.section-cream {
    background: var(--color-cream);
}

.section:not(.section-dark) + .section:not(.section-dark) {
    border-top: 1px solid var(--rule);
}

.section-dark {
    background: var(--color-dark);
    color: var(--color-on-dark);
}

.section-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: var(--space-head);
}

/* 섹션 위 작은 영문 라벨 */
.eyebrow {
    margin: 0;
    color: var(--ink-sub);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.section-dark .eyebrow {
    color: var(--color-on-dark-point);
}

.section-title {
    margin: 0;
    font-size: var(--fs-section);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: var(--tracking-tight);
}

.section-lead {
    margin: 16px 0 40px;
    color: var(--color-muted);
    font-size: 1.125rem;
}

/* 화면에 들어오면 한 번 떠오르기 (main.js 가 is-visible 을 붙인다)
   html.js 일 때만 숨겨서, 스크립트가 꺼져 있으면 처음부터 다 보이게 한다.
   --reveal-i: 같은 묶음 안의 순서 (main.js 가 넣음), 0.08초씩 차례로 */
.js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: calc(var(--reveal-i, 0) * 80ms);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ==========================================================
   공통 부품 (버튼, 배지, 링크)
   ========================================================== */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;   /* 손가락으로 누르기 편한 크기 */
    padding: 15px 30px;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    background: transparent;   /* button 태그 기본 회색 배경 제거 */
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.16s var(--ease);
}

/* 누르는 순간 살짝 들어가게 */
.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: var(--color-point);
    color: #fff;
}

.btn-primary:hover {
    background: #000;
}

/* 어두운 섹션 위의 메인 버튼은 흰색 */
.section-dark .btn-primary {
    background: #fff;
    color: var(--ink);
}

.section-dark .btn-primary:hover {
    background: var(--rule);
}

.btn-outline {
    border-color: var(--rule);
    color: var(--ink);
}

.btn-outline:hover {
    border-color: var(--ink);
}

.badge {
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--color-point-soft);
    color: var(--color-point-ink);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

/* 제목 + 배지 한 줄 (상세 페이지 머리) */
.project-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* 자세히 보기 → */
.more-link {
    align-self: flex-start;
    padding-bottom: 3px;
    border-bottom: 2px solid currentColor;
    font-size: 1rem;
    font-weight: 700;
    transition: color 0.2s var(--ease);
}

/* ==========================================================
   Hero (에디토리얼 색: 먹색 글자, 미색 바탕, 버튼 검정)
   ========================================================== */
.hero {
    background: var(--paper);
    color: var(--ink);
    scroll-margin-top: var(--header-height);
}

/* 왼쪽 글 + 오른쪽 작업 목차 */
.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: center;
    gap: 64px;
    padding-top: clamp(96px, 10vw, 136px);
    padding-bottom: clamp(88px, 9vw, 128px);
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.hero .eyebrow {
    color: var(--ink-sub);
}

.hero-title {
    max-width: 13em;
    margin: 0;
    font-size: var(--fs-hero);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.045em;
}

.hero-title em {
    font-style: normal;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--accent);   /* 밑줄만 포인트 (shorthand 뒤에 써야 적용됨) */
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.14em;
}

/* 화면 폭에 따라 줄바꿈 위치를 바꾼다 (글자는 그대로) */
.br-sm {
    display: none;
}

.hero-lead {
    max-width: 28em;
    margin: 0;
    color: var(--ink-sub);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}

.hero-text .btn-group {
    margin-top: 10px;
}

/* 오른쪽 작업 목차: 얇은 선으로 나눈 목록, 누르면 상세 페이지 */
.hero-index-label {
    margin: 0 0 12px;
    color: var(--ink-sub);
    font-size: 0.875rem;
    font-weight: 600;
}

.hero-index ol {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.hero-index a {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
}

.hero-index-num {
    color: var(--ink-sub);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.hero-index-body strong {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero-index-body span {
    display: block;
    margin-top: 2px;
    color: var(--ink-sub);
    font-size: 0.9375rem;
}

.hero-index-arrow {
    color: var(--ink-sub);
    transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}

/* 터치: 누르는 순간 (휴대폰에는 마우스 올림이 없어서) */
.hero-index a:active .hero-index-num,
.hero-index a:active .hero-index-arrow {
    color: var(--accent);
}

.hero-index a {
    -webkit-tap-highlight-color: transparent;   /* 회색 터치 상자 대신 위의 색 변화로 */
}

@media (hover: hover) {
    .hero-index a:hover .hero-index-num,
    .hero-index a:hover .hero-index-arrow {
        color: var(--accent);
    }

    .hero-index a:hover .hero-index-arrow {
        transform: translateX(4px);
    }
}

/* ==========================================================
   Services (번호 목록)
   ========================================================== */
.service-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--color-text);
}

.service-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: baseline;
    gap: 24px;
    padding: 34px 0;
    border-bottom: 1px solid var(--color-line);
}

.service-num {
    color: var(--ink-sub);
    font-size: 1rem;
    font-weight: 700;
}

.service-title {
    margin: 0;
    font-size: 1.4375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.service-desc {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.65;
}

/* ==========================================================
   Projects (화면과 설명을 나란히, 줄마다 좌우 번갈아)
   ========================================================== */
.work-list {
    display: flex;
    flex-direction: column;
    gap: 96px;
}

.work {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
    color: var(--color-text);
    text-decoration: none;
}

/* 짝수 번째: 화면을 오른쪽으로 */
.work-flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
}

.work-flip .work-shot {
    order: 2;
}

.work-shot {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius);
    background: var(--color-bg);
}

.work-shot picture {
    display: block;
    height: 100%;
}

.work-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.6s var(--ease);
}

.work-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.work-meta {
    margin: 0;
    color: var(--ink-sub);
    font-size: 0.9375rem;
    font-weight: 700;
}

.work-title {
    margin: 0;
    font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.375rem);
    font-weight: 900;
    letter-spacing: var(--tracking-tight);
}

.work-desc {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.75;
}

/* 화면을 공개하지 않는 프로젝트: 한 줄 띠 */
.work-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 48px;
    padding: 36px 40px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.2s var(--ease);
}

.work-strip-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.work-strip .work-title {
    font-size: 1.875rem;
}

.work-strip .work-desc {
    flex: 1 1 360px;
    font-size: 1rem;
    line-height: 1.7;
}

.work-strip .more-link {
    align-self: center;
}

/* 마우스가 있는 기기에서만 */
@media (hover: hover) {
    .work:hover .work-shot img {
        transform: scale(1.02);
    }

    .work:hover .more-link,
    .work-strip:hover .more-link {
        border-bottom-color: var(--accent);
    }

    .work-strip:hover {
        border-color: var(--accent);
    }
}

/* ==========================================================
   맡기시면 이렇게 일합니다 (어두운 섹션)
   ========================================================== */
.promise-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.promise-item {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 36px 32px;
    border: 1px solid var(--color-on-dark-line);
    border-radius: var(--radius);
}

.promise-num {
    color: var(--color-on-dark-muted);
    font-size: 0.9375rem;
    font-weight: 700;
}

.promise-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.45;
}

.promise-desc {
    margin: 0;
    color: var(--color-on-dark-muted);
    font-size: 1rem;
    line-height: 1.75;
}

/* ==========================================================
   진행 방식 (5단계)
   ========================================================== */
.process-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--color-text);
}

.process-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 20px 8px 0;
}

.process-num {
    color: var(--color-point);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
}

.process-title {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
}

.process-desc {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* ==========================================================
   자주 묻는 질문 (누르면 펼쳐짐)
   ========================================================== */
.faq-list {
    border-top: 2px solid var(--color-text);
}

.faq-item {
    border-bottom: 1px solid var(--color-line);
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 26px 0;
    font-size: 1.1875rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-plus {
    flex-shrink: 0;
    color: var(--color-point);
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.2s var(--ease);
}

.faq-item[open] .faq-plus {
    transform: rotate(45deg);   /* + → × */
}

.faq-item p {
    margin: 0 0 26px;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.75;
}

/* ==========================================================
   Contact (어두운 섹션): 왼쪽 문구, 오른쪽 안내·버튼·이메일
   ========================================================== */
.contact-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: start;
    gap: 56px;
}

.contact-title {
    margin: 0;
    font-size: clamp(2.125rem, 1.2rem + 3.6vw, 3.75rem);
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: -0.045em;
}

.contact-lead {
    margin: 20px 0 0;
    color: var(--color-on-dark-muted);
    font-size: 1.125rem;
    line-height: 1.75;
}

.contact-tips-title {
    margin: 0 0 12px;
    color: var(--color-on-dark-muted);
    font-size: 0.9375rem;
    font-weight: 600;
}

/* 알려주시면 좋은 것: 번호 + 얇은 선 */
.contact-tips {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    counter-reset: tip;
    border-top: 1px solid var(--color-on-dark-line);
}

.contact-tips li {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-on-dark-line);
    font-weight: 600;
    counter-increment: tip;
}

.contact-tips li::before {
    content: counter(tip);
    width: 1em;
    color: var(--color-on-dark-muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.section-dark .btn-outline {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-on-dark);
}

.section-dark .btn-outline:hover {
    border-color: var(--color-on-dark);
}

.contact-email {
    margin: 18px 0 0;
    color: var(--color-on-dark-muted);
    font-size: 0.9375rem;
    user-select: all;   /* 한 번 누르면 주소 전체 선택 */
}

.contact-reply {
    margin: 6px 0 0;
    color: var(--color-on-dark-muted);
    font-size: 0.9375rem;
}

/* ==========================================================
   프로젝트 상세
   ========================================================== */
.detail-head {
    padding-bottom: 40px;
}

.detail-back {
    display: inline-block;
    margin-bottom: 32px;
    color: var(--color-muted);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

.detail-back:hover {
    color: var(--color-point);
}

.detail-title {
    margin: 0;
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.detail-intro {
    margin: 16px 0 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.6;
}

.detail-note {
    margin: 8px 0 0;
    color: var(--color-muted);
}

.detail-actions {
    margin-top: 28px;
}

/* 화면 모음: 첫 장은 크게, 나머지는 3칸 */
.shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* 첫 장을 뺀 나머지가 2장이면 2칸 */
.shots-rest-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shot {
    margin: 0;
}

.shot-main {
    grid-column: 1 / -1;
}

.shot picture,
.shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--color-line);
    border-radius: 12px;
}

.shot img {
    height: auto;
    object-fit: cover;
    object-position: top;
}

.shot picture {
    overflow: hidden;
    border: 0;
}

.shot-main picture,
.shot-main img {
    border-radius: 16px;
}

.shot figcaption {
    margin-top: 10px;
    color: var(--color-muted);
    font-size: 0.875rem;
    text-align: center;
}

.detail-body {
    padding-top: 64px;
}

/* 상세 본문 */
.detail-section + .detail-section {
    margin-top: 72px;
}

.detail-section h2 {
    margin: 0 0 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-text);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.detail-section p {
    margin: 0;
    line-height: 1.8;
}

.detail-section h3 {
    margin: 0 0 6px;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* 핵심 기능: 왼쪽 분류, 오른쪽 내용 */
.feature-list {
    margin: 0;
}

.feature-list div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-line);
}

.feature-list dt {
    font-weight: 700;
}

.feature-list dd {
    margin: 0;
    color: var(--color-muted);
}

/* 기술적 결정: 번호 목록 (Services 와 같은 모양) */
.decision-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: decision;
}

.decision-list li {
    position: relative;
    padding: 20px 0 20px 56px;
    border-bottom: 1px solid var(--color-line);
    counter-increment: decision;
}

.decision-list li::before {
    content: counter(decision, decimal-leading-zero);
    position: absolute;
    top: 18px;
    left: 0;
    color: var(--ink-sub);
    font-size: 1.375rem;
    font-weight: 800;
}

.decision-list p {
    color: var(--color-muted);
}

.detail-empty {
    margin: 0;
    color: var(--color-muted);
    text-align: center;
}

.detail-next {
    padding-top: 0;
    border-top: 0;   /* 메인의 섹션 구분선은 상세 페이지에는 쓰지 않음 */
}

.detail-next-label {
    margin: 0 0 12px;
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 700;
}

.detail-next-list {
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-text);
}

.detail-next-list a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-line);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

.detail-next-list strong {
    font-size: 1.25rem;
    font-weight: 800;
}

.detail-next-list span {
    color: var(--color-muted);
}

.detail-next-list a:hover strong {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* ==========================================================
   404
   ========================================================== */
.not-found {
    display: flex;
    align-items: center;
    min-height: 60vh;
    text-align: center;
}

.not-found .container {
    width: 100%;
}

.not-found-code {
    margin: 0 0 8px;
    color: var(--color-point);
    font-size: clamp(4rem, 14vw, 7rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.not-found .btn-group {
    justify-content: center;
}

/* 상세 페이지 머리는 헤더 바로 아래라 위 여백을 줄인다 */
.detail-head {
    padding-top: 72px;
}

/* ==========================================================
   로고
   ========================================================== */
.logo {
    font-size: 1.3125rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.logo-im {
    color: var(--accent);   /* 로고 IM 만 포인트 색 */
}

/* ==========================================================
   헤더
   ========================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 249, 246, 0.96);   /* --paper, 아래 Hero 와 이어지게 */
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    transition: transform 0.3s var(--ease);
}

/* 아래로 내리는 동안 위로 숨김 (main.js), 위로 올리면 다시 내려온다 */
.site-header.is-hidden {
    transform: translateY(-100%);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 0.9375rem;
}

.nav a {
    color: var(--ink-sub);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

.nav a:not(.nav-cta):hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.nav .nav-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--radius-btn);
    background: var(--ink);
    color: #fff;
    font-weight: 700;
    transition: background 0.2s var(--ease), transform 0.16s var(--ease);
}

.nav .nav-cta:active {
    transform: scale(0.97);
}

.nav .nav-cta:hover {
    background: #000;
    color: #fff;
}

/* 모바일 메뉴 버튼 (PC 에서는 숨김) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

/* 열렸을 때 ☰ → X */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================
   푸터 (문의 섹션과 이어지는 먹색)
   ========================================================== */
.site-footer {
    padding: 40px 0;
    background: var(--color-dark);
    border-top: 1px solid var(--color-on-dark-line);   /* 메인에서는 위 문의 섹션과 같은 색이라 선으로 나눈다 */
    color: var(--color-on-dark-faint);
    font-size: 0.875rem;
}


.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.site-footer .logo {
    color: var(--color-on-dark);
    font-size: 1.125rem;
}

.site-footer .logo-im {
    color: var(--accent-on-dark);   /* 먹색 바탕에서 글자 대비 기준(4.5:1)을 넘게 */
}

.footer-slogan {
    margin: 6px 0 0;
}

.footer-meta {
    text-align: right;
}

.footer-links {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin: 0;
}

.footer-links a {
    color: var(--color-on-dark);
    font-weight: 600;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 4px;
}

.copyright {
    margin: 6px 0 0;
}

/* 태블릿 */
@media (max-width: 960px) {
    /* Hero: 문구와 버튼 먼저, 작업 목차는 아래 */
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .contact-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .work,
    .work-flip {
        gap: 40px;
    }
}

/* ==========================================================
   모바일 (768px 이하)
   ========================================================== */
@media (max-width: 768px) {
    :root {
        --space-head: 40px;
    }

    .service-item {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 6px 12px;
        padding: 24px 0;
    }

    .service-title {
        font-size: 1.1875rem;
    }

    .service-desc {
        grid-column: 2;
        font-size: 1rem;
    }

    /* 프로젝트: 화면 위, 설명 아래 (번갈아 배치 없음) */
    .work-list {
        gap: 64px;
    }

    .work,
    .work-flip {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .work-flip .work-shot {
        order: 0;
    }

    .work-strip {
        padding: 28px 24px;
    }

    /* 진행 5단계: 휴대폰은 한 줄 목록 (번호 | 제목·설명), 5번만 혼자 남지 않게 */
    .process-list {
        grid-template-columns: 1fr;
    }

    .process-item {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 2px 12px;
        padding: 18px 0;
        border-bottom: 1px solid var(--rule);
    }

    .process-num {
        grid-row: span 2;
        font-size: 1.75rem;
    }

    /* Hero 제목: 휴대폰은 '떠오른 생각을 / 현실로 만듭니다.' 로 짧게 나눠서
       글꼴이 늦게 적용돼도 줄 수가 바뀌지 않게 (아래 목록이 밀리지 않음) */
    .br-sm {
        display: inline;
    }

    .br-lg {
        display: none;
    }


    .faq-item summary {
        font-size: 1.0625rem;
    }

    .feature-list div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .shots {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 20px;
        background: var(--paper);
        border-bottom: 1px solid var(--rule);
        font-size: 1rem;
    }

    .nav.is-open {
        display: flex;
    }

    .nav a {
        padding: 14px 0;
        border-bottom: 1px solid var(--rule);
    }

    .nav .nav-cta {
        justify-content: center;
        margin-top: 12px;
        border-bottom: 0;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-meta {
        text-align: left;
    }

    .footer-links {
        justify-content: flex-start;
    }
}

/* 휴대폰: 작업 화면에 휴대폰용 세로 캡처가 있으면 위쪽을 크게 (글자가 읽히게).
   picture.php 의 480px 기준과 같아야 한다 */
@media (max-width: 480px) {
    .work-shot.has-mobile {
        aspect-ratio: 4 / 5;
    }
}

/* 좁은 휴대폰: Hero 버튼은 한 줄에 하나씩 꽉 차게 (글꼴이 늦게 와도 줄 수가 같고, 누르기 쉬움) */
@media (max-width: 480px) {
    .hero-text .btn-group {
        flex-direction: column;
    }

    .hero-text .btn {
        justify-content: center;
    }
}

/* 아주 좁은 휴대폰: 소개 문장 세 줄 자리를 미리 잡아서 아래가 밀리지 않게 */
@media (max-width: 380px) {
    .hero-lead {
        min-height: calc(3em * 1.7);
    }
}

/* 움직임 줄이기 설정을 켠 사용자 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .site-header {
        transition: none;
    }
}