/* 키친테리어 — cfb.jibsuriworld.com 디자인 시스템 (industry_mood: utility, art_motif: M1 도면풍) */

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-display: swap;
}

:root {
  color-scheme: only light;

  --dp-primary: #1A1B1D;
  --dp-primary-2: #2A2C2F;
  --dp-primary-3: #33363A;
  --dp-primary-d: #101112;
  --dp-accent: #1B6E78;
  --dp-accent-2: #0F4C54;
  --dp-accent-soft: #DCEEF0;
  --dp-accent-rgb: 27, 110, 120;
  --dp-bg-soft: #F6F7F8;
  --dp-bg-warm: #EEF0F1;
  --dp-bg-dark: var(--dp-primary);
  --dp-border: #D8DBDD;
  --dp-border-soft: #E6E8E9;
  --dp-text: #131210;
  --dp-text-sub: #4A4742;
  --dp-text-muted: #7A7670;
  --dp-text-on-dark: #F3F4F4;

  --dp-font-heading: 'SUIT', 'Pretendard', sans-serif;
  --dp-font-body: 'Pretendard', 'SUIT', sans-serif;
  --dp-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', 'Pretendard', monospace;

  --dp-fs-h1: clamp(2.2rem, 6vw, 4.4rem);
  --dp-fs-h2: clamp(1.75rem, 3.6vw, 2.55rem);
  --dp-fs-h3: clamp(1.18rem, 2vw, 1.45rem);
  --dp-fs-lede: clamp(1.05rem, 1.6vw, 1.2rem);

  --dp-container: 1200px;
  --dp-gutter: clamp(20px, 4vw, 40px);
  --dp-sec-pad: clamp(64px, 10vw, 112px);

  --dp-radius: 0px;
  --dp-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --dp-shadow-md: 0 12px 32px rgba(0,0,0,.10);
  --dp-ease: cubic-bezier(.22,1,.36,1);

  --dp-space-1: 4px; --dp-space-2: 8px; --dp-space-3: 12px; --dp-space-4: 16px;
  --dp-space-5: 24px; --dp-space-6: 32px; --dp-space-7: 48px; --dp-space-8: 64px;
  --dp-space-9: 96px; --dp-space-10: 128px;

  --proc-badge: 48px;
  --proc-badge-radius: 0px;
  --proc-line: 2px;
  --sticky-h: 64px;
}

/* ── 리셋 & 전역 안전망 ───────────────────────────────── */
* { box-sizing: border-box; min-width: 0; }
html, body { max-width: 100%; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--dp-font-body); color: var(--dp-text); background: #fff;
  font-size: 19px; line-height: 1.85;
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6, p, li, td, th, a, span, div, button, label, figcaption {
  word-break: keep-all; overflow-wrap: break-word;
}
h1, h2, h3 { font-family: var(--dp-font-heading); color: var(--dp-text); line-height: 1.2; margin: 0 0 var(--dp-space-3); }
h1 { font-size: var(--dp-fs-h1); font-weight: 800; overflow: visible; white-space: normal; text-overflow: clip; }
h2 { font-size: var(--dp-fs-h2); font-weight: 700; }
h3 { font-size: var(--dp-fs-h3); font-weight: 700; }
p { margin: 0 0 var(--dp-space-4); color: var(--dp-text-sub); }
img, video, table, pre { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:where(a, button, [role="button"], summary) { touch-action: manipulation; }
:where(a, button, [role="button"], summary, .dp-cta, .ft-quicklinks a, .hdr-nav a) {
  min-height: 44px; display: inline-flex; align-items: center;
}
:where(a, button, [role="button"], summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--dp-accent); outline-offset: 2px;
}

/* ── 컨테이너 ───────────────────────────────── */
.jc-hero, .jc-section__body, .jc-service-grid, .jc-related, .jc-contact-actions,
.jc-contact-hero, .jc-cta-banner, .ft-inner, .ft-bottom {
  max-width: var(--dp-container); margin-inline: auto; padding-inline: var(--dp-gutter);
}

/* ── 헤더 ───────────────────────────────── */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--dp-space-3) var(--dp-gutter); border-bottom: 1px solid var(--dp-border-soft);
  position: sticky; top: 0; background: #fff; z-index: 100;
}
.hdr-logo { display: flex; align-items: center; gap: var(--dp-space-3); min-width: 0; }
.hdr-logo__icon { flex: 0 0 auto; }
.hdr-logo__text { display: flex; flex-direction: column; min-width: 0; }
.hdr-logo__name { font-family: var(--dp-font-heading); font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.hdr-logo__tagline { font-size: .72rem; color: var(--dp-text-muted); letter-spacing: .01em; overflow: visible; white-space: normal; }
@media (max-width: 480px) { .hdr-logo__tagline { display: none; } }
.hdr-nav a.dp-cta { padding: var(--dp-space-2) var(--dp-space-5); }

/* ── 버튼 / CTA ───────────────────────────────── */
.dp-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dp-space-2);
  background: var(--dp-primary); color: #fff; border: 2px solid var(--dp-primary);
  border-radius: var(--dp-radius); padding: 14px 32px; min-height: 52px;
  font-weight: 700; font-size: 1rem; transition: transform var(--dp-ease) .18s, background var(--dp-ease) .18s;
}
.dp-cta::after { content: '→'; transition: transform .18s var(--dp-ease); }
@media (hover: hover) and (pointer: fine) {
  .dp-cta:hover { background: var(--dp-accent); border-color: var(--dp-accent); }
  .dp-cta:hover::after { transform: translateX(4px); }
}
.dp-cta:active { transform: translateY(1px); }
.dp-cta--sm { padding: 10px 20px; min-height: 40px; font-size: .9rem; }
.dp-cta--outline { background: transparent; color: var(--dp-primary); }
.dp-cta--block { width: 100%; }

/* ── Hero (H3 분할 매거진) ───────────────────────────────── */
.jc-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dp-space-8); align-items: center; padding-block: var(--dp-space-8); }
.jc-hero__media .img-wrap { aspect-ratio: 4/3; position: relative; }
/* 도면 등록마크(top-left) + FIG 캡션(bottom-right) — 정밀 실측 정체성의 시그니처 요소 */
.jc-hero__media .img-wrap::before {
  content: ''; position: absolute; top: 0; left: 0; width: 30px; height: 30px;
  border-top: 2px solid var(--dp-accent); border-left: 2px solid var(--dp-accent); z-index: 2; pointer-events: none;
}
.jc-hero__media .img-wrap::after {
  counter-increment: fig; content: 'FIG. ' counter(fig, decimal-leading-zero);
  position: absolute; bottom: 0; right: 0; z-index: 2;
  font-family: var(--dp-font-mono); font-size: .68rem; letter-spacing: .04em; font-weight: 600;
  color: #fff; background: var(--dp-accent); padding: 4px 10px;
}
.jc-hero__body { display: flex; flex-direction: column; }
.jc-eyebrow {
  text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 600;
  color: var(--dp-accent-2); margin-bottom: var(--dp-space-2); font-family: var(--dp-font-mono);
}
.jc-eyebrow::before { content: '[ '; }
.jc-eyebrow::after { content: ' ]'; }
.jc-hero__sub { font-size: var(--dp-fs-lede); }
.jc-hero__actions { display: flex; gap: var(--dp-space-3); flex-wrap: wrap; margin-top: var(--dp-space-3); align-items: center; }
.jc-hero__home { color: var(--dp-text-muted); font-size: .9rem; text-decoration: underline; }
@media (max-width: 768px) { .jc-hero { grid-template-columns: 1fr; padding-block: var(--dp-space-6); } }

/* ── 이미지 래퍼 ───────────────────────────────── */
main { counter-reset: fig; }
.img-wrap { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--dp-radius); background: var(--dp-bg-warm); }
.img-wrap > img { width: 100%; height: 100%; object-fit: cover; }
main :is(figure, .card, section) > img { aspect-ratio: 16/9; object-fit: cover; }
.img-placeholder { display: flex; align-items: center; justify-content: center; }

/* ── 섹션 리듬 ───────────────────────────────── */
/* 상단 눈금선 — 줄자 눈금처럼 전 섹션에 반복되는 '실측' 정체성 요소 */
.jc-section { position: relative; padding-block: var(--dp-sec-pad); }
.jc-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background-image: repeating-linear-gradient(to right, var(--dp-border) 0 1px, transparent 1px 14px);
}
.jc-section--soft {
  background-color: var(--dp-bg-soft);
  background-image:
    repeating-linear-gradient(0deg, rgba(var(--dp-accent-rgb), .05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(var(--dp-accent-rgb), .05) 0 1px, transparent 1px 32px);
}
.jc-section--dark { background: var(--dp-bg-dark); color: var(--dp-text-on-dark); }
.jc-section--dark::before { background-image: repeating-linear-gradient(to right, rgba(255,255,255,.22) 0 1px, transparent 1px 14px); }
.jc-section--dark h2, .jc-section--dark p { color: var(--dp-text-on-dark); }
.jc-section__body h2 { margin-bottom: var(--dp-space-2); }
.jc-section__body > p:first-of-type { margin-bottom: var(--dp-space-7); }

/* ── 서비스 그리드 / 카드 공통 ───────────────────────────────── */
.jc-service-grid, .jc-related__list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dp-space-5);
  align-items: stretch; grid-auto-rows: 1fr; margin-top: var(--dp-space-6);
}
.jc-service-grid > li, .jc-related__list > li { display: flex; height: 100%; }
.jc-service-grid > li > a, .jc-related__list > li > a {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  border: 1px solid var(--dp-border-soft); background: #fff; overflow: hidden;
  transition: transform .2s var(--dp-ease), box-shadow .2s var(--dp-ease);
}
@media (hover: hover) and (pointer: fine) {
  .jc-service-grid > li > a:hover, .jc-related__list > li > a:hover { transform: translateY(-4px); box-shadow: var(--dp-shadow-md); }
}
.jc-service-grid h3, .jc-related__list h3 { padding: var(--dp-space-4) var(--dp-space-4) 0; font-size: 1.05rem; }
.jc-service-grid__more, .jc-related__more { margin-top: auto; padding: var(--dp-space-3) var(--dp-space-4) var(--dp-space-4); color: var(--dp-accent); font-weight: 600; font-size: .9rem; }
.jc-service-grid__cta-card > a { align-items: center; justify-content: center; text-align: center; background: var(--dp-bg-warm); padding: var(--dp-space-6); }
.jc-service-grid__cta-icon { font-size: 2rem; color: var(--dp-accent); }
@media (max-width: 1024px) { .jc-service-grid, .jc-related__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .jc-service-grid, .jc-related__list { grid-template-columns: 1fr; } }

/* ── 본문 컴포넌트 8종 ───────────────────────────────── */
.jc-costtable { overflow-x: auto; margin: var(--dp-space-6) 0; }
.jc-costtable table { width: 100%; border-collapse: collapse; min-width: 480px; }
.jc-costtable caption {
  text-align: left; font-size: .78rem; color: var(--dp-text-muted); margin-bottom: var(--dp-space-2);
  font-family: var(--dp-font-mono); text-transform: uppercase; letter-spacing: .05em;
}
.jc-costtable th, .jc-costtable td { border: 1px solid var(--dp-border-soft); padding: var(--dp-space-3) var(--dp-space-4); text-align: left; }
.jc-costtable th { background: var(--dp-bg-warm); }
.jc-costtable tbody tr:nth-child(even) { background: var(--dp-bg-soft); }

.jc-proc-list.proc-list { display: flex; flex-wrap: nowrap; margin: var(--dp-space-6) 0; }
.jc-proc-step.proc-step { flex: 1 1 0; min-width: 0; position: relative; padding: 0 var(--dp-space-3); text-align: center; }
.jc-proc-step:not(:last-child)::after {
  content: ''; position: absolute; z-index: 0;
  top: calc(var(--proc-badge) / 2 - var(--proc-line) / 2);
  left: 50%; width: 100%; height: var(--proc-line); background: var(--dp-border);
}
.jc-proc-num.proc-num {
  position: relative; z-index: 1; width: var(--proc-badge); height: var(--proc-badge);
  margin: 0 auto var(--dp-space-3); border-radius: var(--proc-badge-radius);
  background: var(--dp-primary); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums;
  font-family: var(--dp-font-mono);
  display: flex; align-items: center; justify-content: center;
}
.jc-proc-step__meta.proc-step__meta { font-size: .85rem; color: var(--dp-text-muted); }
@media (max-width: 1024px) {
  .jc-proc-list.proc-list { flex-direction: column; gap: var(--dp-space-6); }
  .jc-proc-step.proc-step { padding: 0 0 0 calc(var(--proc-badge) + var(--dp-space-4)); text-align: left; }
  .jc-proc-num.proc-num { position: absolute; left: 0; top: 0; margin: 0; }
  .jc-proc-step:not(:last-child)::after {
    top: var(--proc-badge); left: calc(var(--proc-badge) / 2 - var(--proc-line) / 2);
    width: var(--proc-line); height: calc(100% + var(--dp-space-6));
  }
}

.jc-checklist { display: grid; gap: var(--dp-space-3); margin: var(--dp-space-5) 0; }
.jc-checklist li { position: relative; padding-left: var(--dp-space-6); border-bottom: 1px solid var(--dp-border-soft); padding-bottom: var(--dp-space-3); }
.jc-checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--dp-accent); font-weight: 700; }

.jc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dp-space-5); margin: var(--dp-space-6) 0; }
.jc-compare__col { border: 1px solid var(--dp-border-soft); padding: var(--dp-space-5); }
.jc-compare__col--reco { border-top: 2px solid var(--dp-accent); }
.jc-compare__col ul { display: grid; gap: var(--dp-space-2); margin-top: var(--dp-space-3); }
@media (max-width: 768px) { .jc-compare { grid-template-columns: 1fr; } }

.jc-callout { border-left: 3px solid var(--dp-accent); background: var(--dp-bg-warm); padding: var(--dp-space-5); margin: var(--dp-space-6) 0; }
.jc-callout strong { display: block; margin-bottom: var(--dp-space-2); }

.jc-spec { display: grid; grid-template-columns: 35% 65%; margin: var(--dp-space-5) 0; }
.jc-spec dt { font-weight: 700; color: var(--dp-text-sub); padding: var(--dp-space-3) 0; border-bottom: 1px solid var(--dp-border-soft); }
.jc-spec dd { margin: 0; padding: var(--dp-space-3) 0; border-bottom: 1px solid var(--dp-border-soft); }

.jc-ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dp-space-4); margin: var(--dp-space-6) 0; }
.jc-ba figure { margin: 0; }
.jc-ba .img-wrap { position: relative; }
.jc-ba .img-wrap::after {
  counter-increment: fig; content: 'FIG. ' counter(fig, decimal-leading-zero);
  position: absolute; bottom: 0; right: 0; z-index: 2;
  font-family: var(--dp-font-mono); font-size: .6rem; letter-spacing: .04em; font-weight: 600;
  color: #fff; background: var(--dp-primary-3); padding: 3px 8px;
}
.jc-ba figcaption { font-size: .8rem; color: var(--dp-text-muted); margin-top: var(--dp-space-2); }
.jc-section--dark .jc-ba figcaption { color: var(--dp-text-on-dark); opacity: .7; }
@media (max-width: 768px) { .jc-ba { grid-template-columns: 1fr; } }

/* ── FAQ 아코디언 ───────────────────────────────── */
.jc-faq { display: grid; gap: var(--dp-space-3); margin-top: var(--dp-space-5); }
.jc-faq__item { border: 1px solid var(--dp-border-soft); padding: var(--dp-space-4) var(--dp-space-5); }
.jc-faq__item summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.jc-faq__item p { margin-top: var(--dp-space-3); margin-bottom: 0; }

/* ── 마퀴 ───────────────────────────────── */
.jc-marquee { overflow: hidden; margin-top: var(--dp-space-6); }
.jc-marquee__track { display: flex; gap: var(--dp-space-4); width: max-content; animation: jc-marquee-scroll 60s linear infinite; }
.jc-marquee__item { flex: 0 0 auto; width: clamp(220px, 26vw, 340px); margin: 0; }
.jc-marquee__item .img-wrap { aspect-ratio: 4/3; }
@keyframes jc-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Bottom CTA 배너 ───────────────────────────────── */
.jc-cta-banner { background: var(--dp-primary); color: #fff; padding-block: var(--dp-sec-pad); }
.jc-cta-banner h2, .jc-cta-banner p { color: #fff; }
.jc-cta-banner__actions { display: flex; gap: var(--dp-space-3); flex-wrap: wrap; margin: var(--dp-space-5) 0 var(--dp-space-3); }
.jc-cta-banner .dp-cta--outline { color: #fff; border-color: #fff; }
.jc-cta-banner small { opacity: .75; }

/* ── 관련 서비스 ───────────────────────────────── */
.jc-related { padding-block: var(--dp-sec-pad); }
.jc-back-main { max-width: var(--dp-container); margin-inline: auto; padding-inline: var(--dp-gutter); padding-top: var(--dp-space-6); }
.jc-back-main a { color: var(--dp-text-muted); text-decoration: underline; }

/* ── 404 ───────────────────────────────── */
.dp-404 { text-align: center; padding: var(--dp-space-9) var(--dp-gutter); min-height: 60vh; min-height: 60dvh; }
.dp-404__code { font-size: 5rem; font-weight: 800; opacity: .12; margin: 0; }
.dp-404__actions { display: flex; flex-direction: column; gap: var(--dp-space-3); align-items: center; max-width: 320px; margin: var(--dp-space-5) auto 0; }
.dp-404__home { text-decoration: underline; color: var(--dp-text-muted); }

/* ── Contact 페이지 ───────────────────────────────── */
.jc-contact-hero { padding-block: var(--dp-space-8) var(--dp-space-6); text-align: center; }
.jc-contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dp-space-5); padding-block: var(--dp-space-6); }
.jc-contact-card {
  display: flex; flex-direction: column; height: 100%; min-height: 240px;
  padding: 40px 36px; border: 2px solid var(--dp-primary); gap: var(--dp-space-3);
}
.jc-contact-card__label { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--dp-text-muted); }
.contact-phone__num {
  font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  white-space: nowrap; word-break: keep-all;
}
.jc-contact-card__big { font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 800; }
.jc-contact-card__cta { margin-top: auto; color: var(--dp-accent); font-weight: 700; }
@media (max-width: 768px) { .jc-contact-actions { grid-template-columns: 1fr; } }

/* ── 푸터 (좌측 클러스터) ───────────────────────────────── */
.site-footer { background: var(--dp-primary); color: var(--dp-text-on-dark); padding-block: var(--dp-space-8); }
.ft-inner {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--dp-space-7);
  align-items: start; text-align: left;
}
.ft-cluster__title { font-size: 15px; font-weight: 700; margin-bottom: var(--dp-space-3); color: #fff; }
.ft-cluster ul { display: grid; gap: var(--dp-space-2); }
.ft-cluster li, .ft-cluster a { color: var(--dp-text-on-dark); opacity: .85; font-size: .92rem; }
.ft-bottom {
  margin-top: var(--dp-space-6); padding-top: var(--dp-space-4); border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; align-items: baseline; text-align: left;
}
.ft-bottom small { opacity: .7; }
@media (max-width: 768px) { .ft-inner { grid-template-columns: 1fr; text-align: left; } }

/* ── Sticky bar / Floating CTA ───────────────────────────────── */
.dp-sticky-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  padding: var(--dp-space-3) var(--dp-gutter); padding-bottom: calc(var(--dp-space-3) + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--dp-border-soft);
}
.dp-float-cta {
  display: flex; align-items: center; justify-content: center; position: fixed; right: var(--dp-space-4); z-index: 80;
  bottom: calc(var(--sticky-h) + var(--dp-space-4) + env(safe-area-inset-bottom));
  width: 56px; height: 56px; background: var(--dp-primary-3); color: #fff; border-left: 3px solid var(--dp-accent);
}
.dp-float-cta__icon { width: 24px; height: 24px; }
@media (max-width: 768px) {
  .dp-sticky-bar { display: block; }
  body { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom)); }
  .dp-float-cta { bottom: calc(var(--sticky-h) + var(--dp-space-3) + env(safe-area-inset-bottom)); }
}

/* ── 모션 접근성 ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}