/*
  main.css v2 — Industrial Editorial 컴포넌트. tokens.css, header-footer.css 다음에 로드.
  카드/아이콘박스/동일 그림자 반복 없음. Full-Screen Hero, Index Row, Project 레이아웃,
  Technical Guide, Process Rail, Area Index, Mosaic, Full-Bleed CTA.
*/

/* ===== Full-Screen Hero ===== */
.hero{ position: relative; min-height: 90svh; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; }
@media (min-width: 768px){ .hero{ min-height: 96svh; } }
.hero__media{ position: absolute; inset: 0; z-index: 0; }
.hero__media img{ width: 100%; height: 100%; object-fit: cover; }
.hero__scrim{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(17,19,21,.05) 0%, rgba(17,19,21,0) 32%, rgba(17,19,21,.62) 100%); }
.hero__topline{ position: absolute; top: 96px; left: 0; z-index: 2; width: 100%; }
.hero__topline .display{ font-size: clamp(13px, 2vw, 17px); letter-spacing: .1em; }
.hero__body{ position: relative; z-index: 2; width: 100%; padding-block: 0 56px; }
@media (min-width: 768px){ .hero__body{ padding-block: 0 80px; } }
.hero h1{ color: var(--white); margin-bottom: 18px; max-width: 15ch; }
.hero__answer{ max-width: 620px; font-size: clamp(15.5px, 2vw, 18px); line-height: 1.7; color: #E3E4E2; margin-bottom: 26px; }
.hero__cta{ display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }

/* 짧은(상세페이지) 히어로 — Full-Screen 아님, 그래도 카드 없음 */
.hero--split{ min-height: auto; color: var(--ink); align-items: stretch; padding-top: 68px; }
.hero--split .hero__scrim{ display: none; }
.hero--split .split{ min-height: calc(70svh - 68px); }
@media (min-width: 900px){ .hero--split .split{ align-items: center; } }

@media (max-width: 767.98px){
  .hero{ align-items: stretch; flex-direction: column; }
  .hero > h1{ position: relative; z-index: 3; color: var(--ink); background: var(--paper); padding: 92px 20px 20px; margin: 0; max-width: none; }
}

/* ===== Index Row (Service Index / Area Index / Project Archive 공용) =====
   데스크톱: 행 hover/focus 시 CSS만으로 이미지 패널 프리뷰. 클릭/Enter는 즉시 이동(표준 링크 동작).
   모바일: 프리뷰 없이 탭하면 바로 이동(표준 링크 동작, 터치에서 hover 전 클릭 가능해야 하므로 별도 아코디언 JS를 두지 않음). */
.index-list{ border-top: 1px solid var(--ink); list-style: none; margin: 0; padding: 0; }
.section--dark .index-list{ border-top-color: var(--white); }
.index-row{ display: block; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.section--dark .index-row{ border-bottom-color: var(--line-on-dark); }
.index-row__head{ padding: 22px 0; display: flex; align-items: center; gap: 20px; }
.index-row__num{ font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--accent-deep); flex: none; width: 30px; }
.index-row__kw{ font-weight: 700; font-size: clamp(19px, 3vw, 27px); letter-spacing: -.01em; flex: 1; min-width: 0; color: var(--ink); }
.section--dark .index-row__kw{ color: var(--white); }
.index-row__en{ display: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); flex: none; }
@media (min-width: 700px){ .index-row__en{ display: inline; } }
.index-row__arrow{ flex: none; font-size: 18px; color: var(--muted); transition: transform .2s ease, color .2s ease; }
.index-row:hover .index-row__arrow, .index-row:focus-visible .index-row__arrow{ color: var(--accent-deep); transform: translateX(4px); }

.index-row__panel{
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .32s ease, opacity .28s ease;
}
@media (hover: hover){
  .index-row:hover .index-row__panel, .index-row:focus-visible .index-row__panel{ max-height: 320px; opacity: 1; }
}
.index-row:focus-visible .index-row__panel{ max-height: 320px; opacity: 1; }
.index-row__panel-inner{ display: grid; gap: 18px; grid-template-columns: 1fr; padding-bottom: 26px; }
@media (min-width: 640px){ .index-row__panel-inner{ grid-template-columns: 220px 1fr; align-items: center; } }
.index-row__panel img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.index-row__panel p{ color: var(--ink-2); font-size: 14.5px; margin: 0; }
.section--dark .index-row__panel p{ color: #C7C9CA; }

/* ===== Project 섹션 — 6가지 독립 레이아웃 ===== */
.project{ position: relative; }
.project__head{ display: flex; align-items: baseline; gap: 18px; margin-bottom: 32px; flex-wrap: wrap; }
.project__head .num-xl{ font-size: clamp(30px, 5vw, 56px); line-height: 1; }
.project__tag{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.project__caption{ margin-top: 18px; max-width: 620px; color: var(--ink-2); }

/* Project 01 — 40/60 비대칭 정적 비교 */
.project-split{ display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 800px){ .project-split{ grid-template-columns: 4fr 6fr; } }
.project-split__cell{ position: relative; aspect-ratio: 3/4; background: var(--mist); }
@media (min-width: 800px){ .project-split__cell{ aspect-ratio: auto; height: 560px; } }
.project-split__cell img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.project-split__tag{ position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,.5); }

/* Project 02 — Full-width drag reveal */
.ba-slider{ position: relative; overflow: hidden; background: var(--mist); touch-action: pan-y; user-select: none; --pos: 50%; }
.ba-slider__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-slider__before-wrap{ position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); -webkit-clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-slider__divider{ position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; background: var(--white); pointer-events: none; z-index: 2; }
.ba-slider__divider::after{ content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--carbon); font-weight: 700; }
.ba-slider__tag{ position: absolute; top: 16px; z-index: 3; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.ba-slider__tag--before{ left: 16px; }
.ba-slider__tag--after{ right: 16px; }
.ba-slider__range{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 4; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.ba-slider__range::-webkit-slider-thumb{ -webkit-appearance: none; width: 2px; height: 100%; background: transparent; }
.ba-slider__range::-moz-range-thumb{ width: 2px; height: 100%; border: none; background: transparent; }
.ba-slider--full{ aspect-ratio: 21/9; }
@media (max-width: 700px){ .ba-slider--full{ aspect-ratio: 3/4; } }
.ba-slider--std{ aspect-ratio: 4/3; }

/* Project 03 — 세로 텍스트 라벨 + 우측 이미지 2장 */
.project-vert{ display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 800px){ .project-vert{ grid-template-columns: 64px 1fr; gap: 40px; } }
.project-vert__label{ display: none; }
@media (min-width: 800px){
  .project-vert__label{ display: block; writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--line); padding-left: 18px; }
}
.project-vert__imgs{ display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px){ .project-vert__imgs{ grid-template-columns: 1fr 1fr; } }

/* Project 04 — 가로 시퀀스 (Before → After) */
.project-seq{ display: grid; grid-template-columns: 1fr; gap: 2px; position: relative; }
@media (min-width: 700px){ .project-seq{ grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; } }
.project-seq__frame{ position: relative; }
.project-seq__frame .ph{ aspect-ratio: 4/3; }
.project-seq__frame-label{ margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.project-seq__arrow{ display: none; font-size: 26px; color: var(--accent); }
@media (min-width: 700px){ .project-seq__arrow{ display: block; } }

/* Project 05 — 대형 완료사진 + 작은 Before inset */
.project-inset{ position: relative; }
.project-inset .ph{ aspect-ratio: 16/9; }
@media (max-width: 700px){ .project-inset .ph{ aspect-ratio: 3/4; } }
.project-inset__thumb{ position: absolute; left: 20px; bottom: 20px; width: 128px; aspect-ratio: 3/4; border: 2px solid var(--white); overflow: hidden; z-index: 2; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
@media (min-width: 700px){ .project-inset__thumb{ width: 180px; } }
.project-inset__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.project-inset__thumb-tag{ position: absolute; bottom: 6px; left: 6px; z-index: 2; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* Project 06 — 상하 분할 */
.project-stack{ display: grid; grid-template-rows: auto auto; gap: 2px; }
.project-stack .ph{ aspect-ratio: 16/9; }
@media (max-width: 700px){ .project-stack .ph{ aspect-ratio: 4/3; } }
.project-stack__tag{ position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,.5); }

/* ===== Asymmetric Mosaic (6개 서비스 2차 시각화) — 명시적 grid-template-areas ===== */
.mosaic{ display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 900px){
  .mosaic{
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 280px 280px 340px auto;
    grid-template-areas:
      "a a a a b b"
      "c c d d b b"
      "e e e e e e"
      "f f f f f f";
  }
  .mosaic__item--a{ grid-area: a; }
  .mosaic__item--b{ grid-area: b; }
  .mosaic__item--c{ grid-area: c; }
  .mosaic__item--d{ grid-area: d; }
  .mosaic__item--e{ grid-area: e; }
  .mosaic__item--f{ grid-area: f; }
}
.mosaic__item{ position: relative; overflow: hidden; text-decoration: none; color: var(--white); display: block; min-height: 260px; }
.mosaic__item img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaic__item::after{ content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,19,21,0) 45%, rgba(17,19,21,.72) 100%); }
.mosaic__item-body{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 22px; }
.mosaic__item-num{ display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--accent); margin-bottom: 6px; }
.mosaic__item-body h3{ color: var(--white); margin-bottom: 4px; }
.mosaic__item-body p{ color: #DEDFDC; font-size: 13px; margin: 0; }
.mosaic__item--text{ background: var(--graphite); color: var(--white); display: flex; flex-direction: column; justify-content: center; padding: 28px; min-height: 200px; }
.mosaic__item--text .num-xl{ display: block; margin-bottom: 14px; }
.mosaic__item--text h3{ color: var(--white); margin-bottom: 10px; }
.mosaic__item--text p{ color: #C7C9CA; font-size: 14px; margin: 0 0 16px; }

/* ===== Professional Kitchen — 좌우 교차 세로형 ===== */
.kitchen-row{ display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px){ .kitchen-row{ grid-template-columns: 65% 35%; min-height: 76vh; } }
.kitchen-row--reverse{ direction: rtl; }
.kitchen-row--reverse > *{ direction: ltr; }
.kitchen-row__media{ position: relative; min-height: 340px; background: var(--mist); }
@media (min-width: 900px){ .kitchen-row__media{ min-height: 100%; } }
.kitchen-row__media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kitchen-row__body{ display: flex; flex-direction: column; justify-content: center; padding: 40px 24px; }
@media (min-width: 900px){ .kitchen-row__body{ padding: 60px 56px; } }
.kitchen-row__body h2{ margin-bottom: 16px; }
.kitchen-row__body p{ color: var(--ink-2); }

/* ===== Technical Guide — 큰 번호 + 얇은 선 ===== */
.tech-list{ border-top: 1px solid var(--ink); }
.tech-item{ display: grid; grid-template-columns: 1fr; gap: 12px; padding: 28px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px){ .tech-item{ grid-template-columns: 90px 1fr 1.4fr; align-items: baseline; gap: 24px; } }
.tech-item .num-xl{ font-size: clamp(26px, 3.6vw, 38px); }
.tech-item h3{ margin: 0; }
.tech-item p{ margin: 0; color: var(--ink-2); font-size: 14.5px; }

/* ===== Process Rail ===== */
.process-rail{ display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px){ .process-rail{ grid-template-columns: repeat(4, 1fr); position: relative; } }
.process-rail::before{ display: none; }
@media (min-width: 900px){
  .process-rail{ padding-top: 10px; }
  .process-rail::before{ content:""; display: block; position: absolute; top: 10px; left: 0; right: 0; height: 1px; background: var(--line); grid-column: 1 / -1; }
}
.process-step{ position: relative; padding: 0 0 0 28px; margin-bottom: 30px; }
@media (min-width: 900px){ .process-step{ padding: 26px 22px 0 0; margin-bottom: 0; } .process-step:last-child{ padding-right: 0; } }
.process-step::before{ content:""; position: absolute; left: 0; top: 4px; bottom: 0; width: 1px; background: var(--line); }
@media (min-width: 900px){ .process-step::before{ top: -1px; left: 0; bottom: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); } }
.process-step__num{ display: block; font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; color: var(--accent-deep); margin-bottom: 8px; }
.process-step h3{ margin-bottom: 8px; font-size: 17px; }
.process-step p{ margin: 0; color: var(--ink-2); font-size: 14px; }

/* ===== Area Index ===== */
.area-index{ display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px){ .area-index{ grid-template-columns: 1fr 2fr; align-items: stretch; } }
.area-index__group{ position: relative; min-height: 260px; }
@media (min-width: 900px){ .area-index__group{ min-height: 0; } }
.area-index__group img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.area-index__group h3{ font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.area-index__group .display{ font-size: clamp(30px, 4.4vw, 52px); }

/* ===== CTA — Full Width Dark ===== */
.cta-full{ background: var(--carbon); color: var(--white); }
.cta-full h2{ color: var(--white); margin-bottom: 10px; }
.cta-full .lead{ color: #C7C9CA; margin-bottom: 30px; }
.cta-full__inner{ display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }

/* ===== 관련 링크 / 아카이브 목록 ===== */
.link-index{ border-top: 1px solid var(--ink); }
.link-index a{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.link-index a:hover{ color: var(--accent-deep); }
.link-index a .index-row__en{ display: inline; }
.link-index a::after{ content: "→"; font-size: 16px; flex: none; }

.section-head{ margin-bottom: 44px; max-width: 720px; }
.section-head .label{ margin-bottom: 16px; }

/* ===== 체크리스트 (폼폼 카드 대신 선형) ===== */
.check-list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.check-list li{ display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; align-items: baseline; }
.check-list li::before{ content: "—"; flex: none; color: var(--accent-deep); font-weight: 700; }