/* 공개 화면 공통 배치 — 서비스·작업 사례·회사 소개·문의·유지보수·약관·404 */

.eyebrow { color: var(--accent-ink); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .08em; }
.inline-form { display: inline; }

/* ── 작업 사례 카드 ── */
.work-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work-card { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.work-card:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--border-strong); }
/* 표지 칸은 그림(1280×720 과정 설명 그림)과 같은 16:9 — 그림이 있든 없든 묶음 높이가 고르다. 그림은 잘라내지 않는다(contain) */
.work-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-950); }
.work-media img { width: 100%; height: 100%; object-fit: contain; }
.work-media::after { content: ""; position: absolute; inset: 0; border-bottom: 1px solid var(--border); box-shadow: inset 0 0 0 0 rgba(54, 198, 242, 0); transition: box-shadow var(--dur) var(--ease); pointer-events: none; }
.work-card:hover .work-media::after { box-shadow: inset 0 0 0 3px rgba(54, 198, 242, .55); }
/* 이미지가 없을 때 — 분류 아이콘 + 전후 숫자로 만든 글자 표지 */
.work-cover-type { position: relative; height: 100%; display: grid; align-content: space-between; padding: var(--space-6); color: var(--on-navy); background: radial-gradient(70% 90% at 100% 0%, rgba(54, 198, 242, .35), transparent 70%), radial-gradient(60% 70% at 0% 100%, rgba(42, 123, 240, .35), transparent 70%), var(--navy-950); }
.work-cover-type > svg { width: 40px; height: 40px; color: var(--cyan-300); }
.work-cover-num { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.work-cover-num span { color: var(--on-navy-2); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.work-cover-num svg { width: 22px; height: 22px; color: var(--on-navy-3); }
.work-cover-num strong { color: var(--cyan-300); font-size: var(--text-3xl); font-weight: var(--weight-heavy); letter-spacing: -0.03em; }
.work-body { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5) var(--space-6) var(--space-6); }
.work-cat { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--accent-ink); }
.work-title { font-size: var(--text-xl); font-weight: var(--weight-heavy); }
.work-sum { color: var(--text-2); }
.work-metric { font-size: var(--text-sm); color: var(--text-2); }
.work-metric .num { color: var(--text); font-weight: var(--weight-bold); }
.work-more { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); color: var(--primary-ink); font-weight: var(--weight-bold); font-size: var(--text-sm); }
.work-more svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.work-card:hover .work-more svg { transform: translateX(3px); }
/* 1건일 때 — 넓은 카드 하나 */
@media (min-width: 840px) {
  .work-card-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: none; }
  .work-card-wide .work-media { align-self: center; }
  .work-card-wide .work-body { align-content: center; padding: var(--space-8); gap: var(--space-3); }
  .work-card-wide .work-title { font-size: var(--text-3xl); }
  .work-card-wide .work-cover-num strong { font-size: var(--display-sm); }
}

/* ── 서비스 화면 ── */
.svc-hero { position: relative; overflow: hidden; background: var(--navy-950); color: var(--on-navy); padding: var(--space-9) 0; }
.svc-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 80% at 90% 0%, rgba(54, 198, 242, .26), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgba(42, 123, 240, .3), transparent 70%); }
.svc-hero .container { position: relative; display: grid; gap: var(--space-4); }
.svc-hero .eyebrow { color: var(--cyan-300); }
.svc-hero h1 { font-size: var(--display); font-weight: var(--weight-heavy); letter-spacing: -0.035em; color: var(--on-navy); }
.svc-hero p { color: var(--on-navy-2); font-size: var(--text-lg); max-width: 46em; }
.svc-hero .btn-row { margin-top: var(--space-3); }
.svc-switch { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.svc-switch a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border-radius: var(--r-full); border: 1px solid rgba(255, 255, 255, .22); color: var(--on-navy-2); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.svc-switch a:hover { color: var(--on-navy); border-color: rgba(255, 255, 255, .5); }
.svc-switch a[aria-current="page"] { background: var(--on-navy); color: var(--navy-950); border-color: var(--on-navy); }
.types { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .types { grid-template-columns: repeat(6, minmax(0, 1fr)); } .types li { grid-column: span 2; } .types li:nth-child(4) { grid-column: 2 / span 2; } .types li:nth-child(5):last-child { grid-column: 4 / span 2; } }
.type { height: 100%; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.type-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-2); border-radius: 14px; background: var(--primary-soft); color: var(--primary-ink); }
.type-ico svg { width: 22px; height: 22px; }
.type h3 { font-size: var(--text-lg); }
.type p { color: var(--text-2); }
/* 「이런 일을 맡겨 주세요」 — 사장님 말투 할 일 목록(아이콘 + 한 줄 제목 + 설명) */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 600px) { .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1100px) { .tasks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.task { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.task-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); background: var(--primary-soft); color: var(--primary-ink); }
.task-ico svg { width: 20px; height: 20px; }
.task h3 { font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.4; }
.task p { margin-top: var(--space-1); color: var(--text-2); font-size: var(--text-sm); }
@media (min-width: 1100px) { .task { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6); } .task h3 { font-size: var(--text-lg); } }
.fit { display: grid; gap: var(--space-6); padding: var(--space-7); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); }
.fit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.fit li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-lg); font-weight: var(--weight-medium); }
.fit li svg { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--primary-ink); }
@media (min-width: 960px) { .fit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; padding: var(--space-8); } }
.flow-line { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: f; }
.flow-line li { counter-increment: f; display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.flow-line li::before { content: counter(f, decimal-leading-zero); font-weight: var(--weight-heavy); color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.flow-line h3 { font-size: var(--text-lg); }
.flow-line p { color: var(--text-2); }
@media (min-width: 1100px) { .flow-line { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-5); } .flow-line li { grid-template-columns: 1fr; border-top-width: 2px; border-top-color: var(--primary); } }

/* ── 사례 상세 ── */
.work-head { padding: var(--space-8) 0 var(--space-6); }
.work-head .crumb { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; color: var(--text-2); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.work-head .crumb svg { width: 16px; height: 16px; transform: rotate(180deg); }
.work-head h1 { margin-top: var(--space-3); font-size: var(--display-sm); font-weight: var(--weight-heavy); }
.work-head p { margin-top: var(--space-3); color: var(--text-2); font-size: var(--text-lg); }
.work-detail { display: grid; gap: var(--space-7); }
.prose { display: grid; gap: var(--space-4); font-size: var(--text-lg); line-height: 1.8; max-width: 68ch; }
.prose p { color: var(--text); }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
/* 과정 설명 그림 — 잘라내지 않고 전체를 크게, 누르면 확대 보기(원본 크기) */
.gallery a { display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); color: var(--primary-ink); text-decoration: none; box-shadow: var(--shadow-card); cursor: zoom-in; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.gallery a:hover { color: var(--primary-ink); border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.gallery img { display: block; width: 100%; height: auto; background: var(--navy-950); }
/* 그림 아래 띠(그림 위에 얹지 않는다 — 인포그래픽 글자를 가리지 않게) */
.gallery-zoom { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border-top: 1px solid var(--border); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.gallery-zoom svg { width: 18px; height: 18px; }
.preview-bar { margin-top: var(--space-4); }
@media (min-width: 960px) { .work-detail-2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .work-detail-2 .metric { position: sticky; top: 100px; } }
/* 사례 상세의 전후 숫자 상자(첫 화면 .metric 과 같은 모양) */
.metric { margin: 0; position: relative; overflow: hidden; padding: var(--space-7) var(--space-6); border-radius: var(--r-xl); background: var(--navy-950); color: var(--on-navy); }
.metric-label { font-weight: var(--weight-bold); color: var(--on-navy-2); }
.metric-row { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.metric-before, .metric-after { display: grid; gap: var(--space-1); }
.metric-before span, .metric-after span { font-size: var(--text-sm); color: var(--on-navy-3); }
.metric-before strong { font-size: var(--text-2xl); color: var(--on-navy-2); }
.metric-after strong { font-size: var(--display-sm); font-weight: var(--weight-heavy); color: var(--cyan-300); letter-spacing: -0.03em; line-height: 1.1; }
.metric-arrow { color: var(--on-navy-3); }
.metric-arrow svg { width: 24px; height: 24px; transform: rotate(90deg); }
.metric-source { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--navy-line); font-size: var(--text-sm); color: var(--on-navy-3); }

/* ── 회사 소개 ── */
.about-grid { display: grid; gap: var(--space-5); }
@media (min-width: 840px) { .about-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.principle { display: grid; gap: var(--space-2); padding: var(--space-6); border-top: 2px solid var(--primary); }
.principle svg { width: 28px; height: 28px; color: var(--primary-ink); margin-bottom: var(--space-2); }
.principle h3 { font-size: var(--text-xl); }
.principle p { color: var(--text-2); }
.duo { display: grid; gap: var(--space-5); }
@media (min-width: 840px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo-card { display: grid; gap: var(--space-3); padding: var(--space-7); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); color: inherit; text-decoration: none; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.duo-card:hover { color: inherit; border-color: var(--primary); transform: translateY(-2px); }
.duo-card .lane-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--brand-gradient); color: #fff; }
.duo-card .lane-ico svg { width: 26px; height: 26px; }
.duo-card h3 { font-size: var(--text-2xl); }
.duo-card p { color: var(--text-2); }
.about-brand { display: grid; gap: var(--space-6); align-items: center; padding: var(--space-8) var(--space-6); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); }
.about-brand img { width: min(100%, 360px); height: auto; }
@media (min-width: 840px) { .about-brand { grid-template-columns: auto 1fr; padding: var(--space-8); gap: var(--space-9); } }

/* 대표 인사말(원문 그대로) — 상자·색 강조 없이 한 줄기 글. 가운데 한 단, 같은 글자 크기·색, 줄·문단 간격만 넉넉히 */
.about-msg { max-width: calc(38em + var(--gutter) * 2); padding-block: var(--space-9); }
.about-msg h1 { font-size: var(--display-sm); font-weight: var(--weight-heavy); color: var(--text); }
.msg-text { display: grid; gap: var(--space-6); margin-top: var(--space-7); font-size: var(--text-lg); line-height: 1.9; color: var(--text); }
.msg-text p { color: inherit; }
.msg-cta { margin-top: var(--space-8); }

/* ── 폼 화면(문의·유지보수 글쓰기) ── */
.form-page { display: grid; gap: var(--space-7); padding-bottom: var(--space-8); }
@media (min-width: 1100px) { .form-page { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .form-aside { position: sticky; top: 100px; } }
.form-card { padding: var(--space-6) var(--space-5); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
@media (min-width: 600px) { .form-card { padding: var(--space-8); } }
.form-card form { display: grid; gap: var(--space-6); }
.form-section { display: grid; gap: var(--space-5); }
.form-section + .form-section { padding-top: var(--space-6); border-top: 1px solid var(--border); }
.form-section h2 { font-size: var(--text-lg); }
.form-aside { display: grid; gap: var(--space-4); }
/* 견적 문의 「이것만 알려 주시면 돼요」 — 내용 칸 바로 위 준비물 */
.prep-box { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--r); background: var(--primary-soft); color: var(--text); }
.prep-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
@media (min-width: 600px) { .prep-box ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); } }
.prep-box li { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: var(--weight-medium); }
.prep-box li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--primary-ink); }
.prep-box p { color: var(--text-2); font-size: var(--text-sm); }
.aside-card { padding: var(--space-6); border-radius: var(--r-lg); background: var(--surface-2); }
.aside-card h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.aside-card ol { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); color: var(--text-2); }
.done { display: grid; justify-items: start; gap: var(--space-4); padding-block: var(--space-8); }
.done-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-full); background: var(--success-soft); color: var(--success); }
.done-ico svg { width: 32px; height: 32px; }
.done h1 { font-size: var(--display-sm); font-weight: var(--weight-heavy); }
.done p { color: var(--text-2); font-size: var(--text-lg); max-width: 52ch; }

/* ── 유지보수 글 보기 ── */
.post { display: grid; gap: var(--space-6); padding-bottom: var(--space-8); }
.post-head { display: grid; gap: var(--space-3); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.post-head h1 { font-size: var(--text-3xl); }
.post-body { font-size: var(--text-lg); line-height: 1.8; display: grid; gap: var(--space-4); }
.replies { display: grid; gap: var(--space-4); }
.reply { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: var(--r-lg); background: var(--primary-soft); }
.reply-head { display: flex; gap: var(--space-2); align-items: center; font-weight: var(--weight-bold); color: var(--primary-ink); }
.reply-head svg { width: 18px; height: 18px; }
.reply-head time { margin-left: auto; font-weight: var(--weight-normal); color: var(--text-2); font-size: var(--text-sm); }
.lockbox { display: grid; gap: var(--space-5); max-width: 440px; padding: var(--space-7); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); }
.lockbox .done-ico { background: var(--primary-soft); color: var(--primary-ink); }
.board-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }

/* ── 약관 ── */
.legal { display: grid; gap: var(--space-6); padding-bottom: var(--space-8); max-width: 76ch; }
.legal h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.legal p, .legal li { color: var(--text-2); }
.legal ul, .legal ol { margin: var(--space-2) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.legal .table-wrap { margin-top: var(--space-3); }

.notfound { padding-bottom: var(--space-9); }