/* ============================================================
   전원 하우스 — style.css
   기준: docs/design-system.md (1280px 캔버스 / 1200px 컨테이너)
   ============================================================ */

@font-face{font-family:Paperlogy;src:url('../fonts/Paperlogy-4Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Paperlogy;src:url('../fonts/Paperlogy-6SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --bg:#F7F6F2; --bg-alt:#F0EDE8; --ink:#1A1A1A;
  --ink-60:rgba(26,26,26,.60); --ink-45:rgba(26,26,26,.45);
  --line:rgba(26,26,26,.10);
  --warm-grey:#CABBA5; --deep-brown:#776857; --wood:#B98E58;

  --fs-display:46px; --fs-hero:40px; --fs-statement:25px;
  --fs-title:21px; --fs-body:14px; --fs-caption:10px;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:144px; --sp-11:200px;

  /* 섹션 상하 여백 — 사용자 지정으로 전 섹션 균일 100px (2026-08-24).
     (PHASE 8에서 리듬용 3단계로 두었으나, 사용자 요청에 따라 균일화) */
  --sec-pad:100px;
  --sec-air:var(--sec-pad); --sec-mid:var(--sec-pad); --sec-base:var(--sec-pad);

  --container:1280px; --gutter:40px; --col-gap:24px; --tile-gap:8px;
  --radius:5px; --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:Paperlogy,system-ui,sans-serif;font-weight:400;line-height:1.45;
  background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- Typography ---------- */
.display  {font-size:var(--fs-display);font-weight:600;line-height:1.24;letter-spacing:-.02em}
.headline {font-size:var(--fs-hero);font-weight:600;line-height:1.28;letter-spacing:-.02em}
.statement{font-size:var(--fs-statement);font-weight:400;line-height:1.55;letter-spacing:-.01em}
.title    {font-size:var(--fs-title);font-weight:600;line-height:1.40;letter-spacing:-.01em}
.body     {font-size:var(--fs-body);line-height:1.70}
.sub      {font-size:var(--fs-body);line-height:1.80;color:var(--ink-60)}
.label    {font-size:var(--fs-caption);line-height:1.40;letter-spacing:.18em;color:var(--ink-45)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section--text{padding:var(--sec-air) var(--gutter)}   /* 텍스트 단독 : 극단 여백 */
.section--image{padding:0}                           /* 이미지 섹션 : 맞붙임 */

/* ---------- Button ---------- */
.btn{
  display:inline-block;padding:9px 16px;border-radius:var(--radius);
  font-size:var(--fs-body);color:var(--ink);
  background:rgba(255,255,255,.88);border:1px solid var(--line);
  transition:background .3s var(--ease);
  /* backdrop-filter 미사용: 헤드리스 크롬이 렌더링하지 못해 QA 캡처에서 버튼이
     사라지고, 밝은 하늘 위에서 .62 불투명도는 배경과 밝기 차 9로 대비가 약하다 */
}
.btn:hover{background:#fff}
.btn--solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--solid:hover{background:#000}

/* ---------- Header ---------- */
/* 바 자체는 화면 끝까지, 내용은 컨테이너(1280)에 정렬 */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;font-size:var(--fs-body);background:linear-gradient(to bottom,rgba(247,246,242,.88) 0%,rgba(247,246,242,.55) 55%,rgba(247,246,242,0) 100%);padding-bottom:18px}
.hdr__inner{
  max-width:var(--container);margin:0 auto;padding:14px var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.hdr__logo{font-weight:600;font-size:17px;letter-spacing:-.01em}
.hdr__nav{display:flex;gap:44px;justify-self:center}
.hdr__nav a{opacity:.72;transition:opacity .3s var(--ease)}
.hdr__nav a:hover{opacity:1}
.hdr__cta{justify-self:end}

/* ---------- Hero scene ---------- */
.scene{position:relative;height:560vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg)}
.shot{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.90) contrast(1.02);          /* 전 이미지 톤 통일 */
}
#shot-out{transform:scale(calc(1 + var(--zo,0) * .95));transform-origin:63% 47%;
          opacity:calc(1 - var(--cross,0))}
#shot-in {transform:scale(calc(1.30 - var(--zi,0) * .22));opacity:var(--cross,0);background-position:center 40%}

.hero-copy{
  position:absolute;left:0;right:0;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
  text-align:center;padding-top:16vh;          /* 흰 파사드를 피해 하늘 영역에 조판 */
  opacity:var(--h-op,1);transform:scale(calc(1 + (1 - var(--h-op,1)) * .04));
}
.hero-copy .label{margin-bottom:16px}
.hero-copy .btn{margin-top:28px}

/* 전환 후 오프화이트 면이 올라와 상하 분할 — 사진에 딤을 씌우지 않는 방식 */
.hero-panel{
  position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--panel,0) * 42vh);
  background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);
}
.hero-panel__inner{
  width:100%;max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--sp-8);align-items:center;
}
.hero-panel p{opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 12px))}
.hero-panel .label{margin-bottom:var(--sp-3)}

.cue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  font-size:var(--fs-caption);letter-spacing:.16em;color:var(--ink-45);
}

/* ---------- Reveal (스크롤 등장) ---------- */
/* 초기 상태를 CSS opacity:0 으로 박지 않는다 — JS가 설정한다 */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1!important;transform:none!important}

/* ---------- Problem : 2단 헤더 + 3열 항목 ---------- */
.problem{background:var(--bg);padding:var(--sec-pad) 0}
.problem__list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);
}
.problem__item{display:flex;flex-direction:column;gap:var(--sp-3);
               border-top:1px solid var(--line);padding-top:var(--sp-5)}
.problem__num{font-size:var(--fs-caption);letter-spacing:.18em;color:var(--ink-45)}

/* ---------- 공통 : 이미지 + 하단 캡션 (패턴 2) ----------
   밝은 사진이 많아 사진 위에 텍스트를 얹지 않는다.
   design-system.md §7 : "밝은 사진이면 텍스트를 사진 밖으로 뺀다" */
.figure__img{
  width:100%;height:auto;object-fit:cover;
  filter:saturate(.90) contrast(1.02);
}
/* height:auto 필수 — <img height="800"> 속성이 CSS height로 적용되어
   aspect-ratio가 무시된다 (실제로 발생했던 버그). */
.figure__cap{padding-top:var(--sp-4)}
.figure__cap .title{margin-bottom:var(--sp-2)}

/* ---------- Section head : 좌측 헤딩 / 우측 설명 (사용자 지정 2단 구성) ---------- */
.sec-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-8);align-items:end;margin-bottom:var(--sp-8);
}
.sec-head__title .label{margin-bottom:var(--sp-4)}
.sec-head__title .display{max-width:14em}
.sec-head__desc{max-width:34em;padding-bottom:.35em}  /* 헤딩 베이스라인에 맞춰 하단 정렬 */

/* ---------- About : 브랜드 철학 ---------- */
.about{background:var(--bg)}
.about__intro{padding:var(--sec-pad) var(--gutter) var(--sp-8)}
.about__band{width:100%}
.about__band .figure__img{aspect-ratio:3/2;max-height:88vh}
/* 이미지 높이에 vh를 쓰지 않는다 — 창 높이에 따라 크롭이 완전히 달라진다.
   비율(aspect-ratio)로 고정하고 max-height로만 상한을 둔다. */
.about__band .figure__cap{
  max-width:var(--container);margin:0 auto;padding:var(--sp-4) var(--gutter) 0;
}
.about__pair{
  max-width:var(--container);margin:0 auto;
  padding:var(--sp-8) var(--gutter) var(--sec-pad);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:var(--sp-8);align-items:center;
}
.about__pair .figure__img{aspect-ratio:3/2}
.about__pair-text .title{margin-bottom:var(--sp-4)}

/* ---------- Service : 3분할 타일 ---------- */
.service{background:var(--bg-alt);padding:var(--sec-pad) 0}
.service__head{max-width:var(--container);margin:0 auto var(--sp-8);padding:0 var(--gutter)}
/* margin 단축 속성에 bottom을 반드시 명시할 것 —
   'margin:0 auto'는 .sec-head의 margin-bottom을 덮어쓴다 (실제로 발생했던 버그). */
.service__grid{
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tile-gap);
}
.service__grid .figure__img{aspect-ratio:1/1}
.service__grid .figure__cap{padding-right:var(--sp-5)}

/* ---------- Material : 좌우 2분할 교차 (패턴 3) ----------
   앞 Service가 3분할 그리드였으므로 여기서는 리듬을 바꾼다
   (CLAUDE.md: 모든 Section을 같은 패턴으로 만들지 않는다) */
.material{background:var(--bg);padding:var(--sec-pad) 0}
.material__head{max-width:var(--container);margin:0 auto var(--sp-8);padding:0 var(--gutter)}
.material__rows{
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-direction:column;gap:var(--sp-10);
}
.material__row{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:var(--sp-8);align-items:center;
}
.material__row:nth-child(even){direction:rtl}
.material__row:nth-child(even) > *{direction:ltr}
.material__row .figure__img{aspect-ratio:16/9}
.material__row .label{margin-bottom:var(--sp-3)}
.material__row .title{margin-bottom:var(--sp-4)}

/* ---------- Portfolio : full-bleed 2×2 타일 ---------- */
.portfolio{background:var(--bg-alt);padding:var(--sec-pad) 0}
.portfolio__head{max-width:var(--container);margin:0 auto var(--sp-8);padding:0 var(--gutter)}
.portfolio__grid{
  width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--tile-gap);
}
.portfolio__grid .figure__img{aspect-ratio:3/2}
.portfolio__cap{padding:var(--sp-4) var(--sp-5) var(--sp-8)}
.portfolio__cap .title{margin-bottom:var(--sp-2)}
.portfolio__meta{font-size:var(--fs-caption);letter-spacing:.14em;color:var(--ink-45)}

/* ---------- Process : 좌측 고정 제목 + 우측 스텝 ---------- */
.process{background:var(--bg);padding:var(--sec-pad) 0}
.process__inner{
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:var(--sp-10);
}
.process__aside{position:sticky;top:120px;align-self:start}
.process__aside .label{margin-bottom:var(--sp-4)}
.process__aside .display{margin-bottom:var(--sp-5)}
.process__steps{display:flex;flex-direction:column}
.process__step{
  display:grid;grid-template-columns:56px 1fr;gap:var(--sp-5);
  padding:var(--sp-7) 0;border-top:1px solid var(--line);
}
.process__step:last-child{border-bottom:1px solid var(--line)}
.process__no{font-size:var(--fs-caption);letter-spacing:.18em;color:var(--ink-45);padding-top:6px}
.process__step .title{margin-bottom:var(--sp-3)}

/* ---------- Review : 좌우 교차 인용 ---------- */
.review{background:var(--bg-alt);padding:var(--sec-pad) 0}
.review__head{max-width:var(--container);margin:0 auto var(--sp-8);padding:0 var(--gutter)}
.review__list{
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-direction:column;gap:var(--sp-10);
}
.review__item{max-width:55%}
.review__item:nth-child(even){margin-left:auto;text-align:right}
.review__item .statement{margin-bottom:var(--sp-4)}
.review__who{font-size:var(--fs-caption);letter-spacing:.14em;color:var(--ink-45)}

/* ---------- FAQ : 아코디언 (아이콘 없이 문자 마커) ---------- */
.faq{background:var(--bg);padding:var(--sec-pad) 0}
.faq__inner{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.faq__list{margin-top:0}
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:var(--sp-6) 0;
  display:grid;grid-template-columns:1fr 24px;gap:var(--sp-5);align-items:baseline;
  font-size:var(--fs-title);font-weight:600;line-height:1.4;letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:'+';color:var(--ink-45);justify-self:end;font-weight:400}
.faq__item[open] summary::after{content:'−'}
.faq__answer{padding:0 0 var(--sp-6);max-width:46em}

/* ---------- Final CTA : full-bleed 사진 + 오프화이트 면 ----------
   원본 11은 보유 12장 중 유일하게 어두운 사진이지만, 흰 텍스트를 얹을 만한
   어두운 영역이 상단 10%(약 128px)뿐이라 사진 위 조판은 불가.
   → Master Reference(Hero)가 쓴 "사진 → 오프화이트 면" 구조를 그대로 재사용한다.
   Hero가 사진→패널로 열고, CTA가 사진→패널로 닫는 대칭. */
.cta{width:100%;background:var(--bg)}
.cta__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
          object-position:center 58%;filter:saturate(.90) contrast(1.02)}
.cta__panel{
  max-width:var(--container);margin:0 auto;
  padding:var(--sec-pad) var(--gutter);text-align:center;
}
.cta__panel .label{margin-bottom:var(--sp-4)}
.cta__panel .btn{margin-top:var(--sp-7)}

/* ---------- Contact : 상담 신청 폼 ----------
   WordPress 이전 시 이 자리를 Fluent Forms 숏코드로 교체한다 */
.contact{background:var(--bg-alt);padding:var(--sec-pad) 0}
.contact__aside .display{margin-top:var(--sp-4)}
.contact__inner{
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:var(--sp-10);
}
.contact__aside .label{margin-bottom:var(--sp-5)}
.contact__aside .sub{margin-top:var(--sp-5)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-bottom:var(--sp-5)}
.form__field{display:flex;flex-direction:column;gap:var(--sp-2)}
.form__field--full{grid-column:1 / -1}
.form__field input,.form__field select,.form__field textarea{
  font-family:inherit;font-size:var(--fs-body);color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;width:100%;
}
.form__field textarea{resize:vertical;min-height:120px}
.form__field input:focus,.form__field select:focus,.form__field textarea:focus{
  outline:none;border-color:var(--ink)
}
.form__consent{display:flex;gap:var(--sp-3);align-items:flex-start;margin:var(--sp-5) 0 var(--sp-6)}
.form__consent input{margin-top:3px}
.form__note{margin-top:var(--sp-5)}

/* ---------- Footer ---------- */
.ftr{background:var(--bg);border-top:1px solid var(--line)}
.ftr__inner{
  max-width:var(--container);margin:0 auto;padding:var(--sp-9) var(--gutter) var(--sp-7);
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-8);align-items:start;
}
.ftr__logo{font-weight:600;font-size:17px;letter-spacing:-.01em;margin-bottom:var(--sp-4)}
.ftr__contact{display:flex;flex-direction:column;gap:var(--sp-2);text-align:right}
.ftr__bottom{
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter) var(--sp-7);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none}
}

/* ============================================================
   Responsive — design-system.md §10
   세로로 쌓기만 하지 않고 재설계한다.
   ============================================================ */

/* ---------- Tablet : 1024 이하 ---------- */
@media (max-width:1023px){
  :root{
    --gutter:32px;
    --sec-pad:72px;
    --fs-display:36px; --fs-hero:32px; --fs-statement:21px;
  }
  /* 2단 헤더는 폭이 좁아지면 헤딩/설명을 위아래로 쌓는다 */
  .sec-head{grid-template-columns:1fr;gap:var(--sp-4);align-items:start}
  .sec-head__desc{max-width:42em;padding-bottom:0}
  .hdr__nav{gap:28px}
  /* 3분할 → 2열 (마지막 타일이 2칸 차지) */
  .service__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service__grid figure:last-child{grid-column:1 / -1}
  .service__grid figure:last-child .figure__img{aspect-ratio:2/1}
  /* 좌우 2분할은 비율만 완화 */
  .about__pair,.material__row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp-7)}
  .process__inner{grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:var(--sp-8)}
  .contact__inner{grid-template-columns:1fr;gap:var(--sp-8)}
  .review__item{max-width:70%}

  /* 터치 영역 최소 44px — 태블릿도 터치 기기이므로 1023 이하 전체에 적용한다.
     (design-system §10. 처음엔 767 이하에만 넣었다가 768에서 12개 미달이 나와 승격) */
  .btn{padding:13px 18px}
  .hdr__nav a{padding:13px 2px}
  .hdr__cta .btn{padding:13px 16px}
  .form__field input,.form__field select,.form__field textarea{padding:13px 14px}
  .form__consent{padding:10px 0}
  .form__consent input[type=checkbox]{width:20px;height:20px;flex:0 0 20px}
  .ftr__contact a{padding:11px 0}   /* 43px → 45px */
  .faq__item summary{min-height:44px}
}

/* ---------- Mobile : 768 이하 ---------- */
@media (max-width:767px){
  :root{
    --gutter:20px;
    --sec-pad:56px;
    --fs-display:30px; --fs-hero:28px; --fs-statement:19px; --fs-title:17px;
    --sp-8:32px; --sp-9:48px; --sp-10:64px;
  }

  /* 터치 영역 규칙은 ≤1023 블록에서 상속. 여기서는 폰트만 조정 */
  .hdr__cta .btn{padding:13px 12px;font-size:13px}

  /* 헤더 : 2항목이라 햄버거 불필요. 간격만 줄여 한 줄에 들어가게 */
  /* minmax(0,1fr) 필수 — 그냥 1fr이면 내비의 intrinsic min-width가 컬럼을 밀어내
     오른쪽 CTA가 화면 밖으로 나간다 (실제로 발생) */
  .hdr__inner{grid-template-columns:auto minmax(0,1fr) auto;padding:8px var(--gutter);gap:var(--sp-3)}
  .hdr__nav{min-width:0;flex-wrap:nowrap;white-space:nowrap}
  .hdr__logo{font-size:15px}
  .hdr__nav{gap:var(--sp-4);font-size:13px}
  .hdr__cta .btn{padding:9px 12px;font-size:13px}

  /* Hero : 세로 화면에 맞춰 재설계 (design-system §10) */
  .scene{height:380vh}
  #shot-out{transform:scale(calc(1 + var(--zo,0) * .55));transform-origin:60% 50%}
  #shot-in{transform:scale(calc(1.18 - var(--zi,0) * .18));background-position:38% 62%}
  .hero-copy{padding-top:22vh}
  .hero-panel{height:calc(var(--panel,0) * 52vh);justify-content:flex-start;padding-top:var(--sp-7)}
  .hero-panel__inner{grid-template-columns:1fr;gap:var(--sp-5);align-items:start}
  .cue{display:none}

  /* 모든 그리드 1열 */
  .about__pair,.material__row,.service__grid,.portfolio__grid,
  .process__inner,.contact__inner,.ftr__inner,.form__row{
    grid-template-columns:1fr;
  }
  .service__grid,.portfolio__grid{gap:var(--sp-7)}
  .service__grid figure:last-child .figure__img{aspect-ratio:1/1}
  .material__row:nth-child(even){direction:ltr}      /* 좌우 반전 해제 */
  .about__pair{gap:var(--sp-5)}
  .material__rows{gap:var(--sp-9)}
  .material__row{gap:var(--sp-5)}

  /* 이미지 : 가로 3:2 → 세로 4:5 크롭, 피사체 중심 */
  .about__band .figure__img,.about__pair .figure__img,
  .service__grid .figure__img,.portfolio__grid .figure__img{aspect-ratio:4/5}
  .material__row .figure__img{aspect-ratio:3/2}       /* 소재는 가로가 질감을 살린다 */
  .cta__img{aspect-ratio:4/5;object-position:center 55%}
  .about__band .figure__cap{padding-left:var(--gutter);padding-right:var(--gutter)}

  /* Process : sticky 해제, 번호는 위로 */
  .process__aside{position:static;margin-bottom:var(--sp-8)}
  .process__step{grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-6) 0}
  .process__no{padding-top:0}

  /* Review : 우측 정렬 해제 — 모바일에서 좌우 교차는 읽기 흐름을 끊는다 */
  .review__item{max-width:100%}
  .review__item:nth-child(even){margin-left:0;text-align:left}
  .review__list{gap:var(--sp-8)}

  /* Problem : 3열 → 1열 */
  .problem__list{grid-template-columns:1fr;gap:var(--sp-5)}
  .problem__item{gap:var(--sp-2);padding-top:var(--sp-4)}

  /* FAQ */
  .faq__item summary{padding:var(--sp-5) 0;grid-template-columns:1fr 20px}
  .faq__list{margin-top:var(--sp-7)}

  /* Contact / Footer */
  .form__row{gap:var(--sp-4)}
  .ftr__inner{gap:var(--sp-6)}
  .ftr__contact{text-align:left}
  .cta__panel{padding-top:var(--sp-8);padding-bottom:var(--sec-base)}
}

/* ---------- 375 이하 미세 조정 ---------- */
@media (max-width:389px){
  .hdr__nav{gap:var(--sp-3);font-size:12px}
  .hdr__cta .btn{padding:14px 10px;font-size:12px}
  .hdr__logo{font-size:14px}
}

/*BRIDGE-START*/
/* ===== Elementor 위젯 → 디자인 클래스 매핑 ===== */
.display .elementor-heading-title{font-size:var(--fs-display);font-weight:600;line-height:1.24;letter-spacing:-.02em;color:var(--ink);max-width:14em}
.headline .elementor-heading-title{font-size:var(--fs-hero);font-weight:600;line-height:1.28;letter-spacing:-.02em;color:var(--ink)}
.statement .elementor-heading-title,.statement p{font-size:var(--fs-statement);font-weight:400;line-height:1.55;letter-spacing:-.01em;color:var(--ink)}
.title .elementor-heading-title{font-size:var(--fs-title);font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.label .elementor-heading-title,.label p{font-size:var(--fs-caption);letter-spacing:.18em;color:var(--ink-45);line-height:1.4;font-weight:400}
.sub .elementor-widget-container,.sub p{font-size:var(--fs-body);line-height:1.8;color:var(--ink-60)}
.body .elementor-widget-container,.body p{font-size:var(--fs-body);line-height:1.7;color:var(--ink)}
.jw-num .elementor-heading-title{font-size:var(--fs-caption);letter-spacing:.18em;color:var(--ink-45);font-weight:400}
.jw-meta .elementor-heading-title,.jw-meta p{font-size:var(--fs-caption);letter-spacing:.14em;color:var(--ink-45);line-height:1.4}
.jw-who .elementor-heading-title,.jw-who p{font-size:var(--fs-caption);letter-spacing:.14em;color:var(--ink-45)}
.figure__img img{width:100%;height:auto;object-fit:cover;filter:saturate(.9) contrast(1.02);display:block}
.elementor-element-jhSvGrid .figure__img img{aspect-ratio:1/1}
.elementor-widget{margin-block-end:0 !important}
.elementor-widget-container{margin:0}
.jw-btn .elementor-button{background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:9px 16px;font-size:var(--fs-body);font-weight:400;border:1px solid var(--ink)}
.jw-btn .elementor-button:hover{background:#000}
.jw-btn .elementor-button-icon{display:none}

/* 공통 컨테이너 초기화: Elementor 기본 padding/gap 제거 */
.jeonwon-home main .e-con{--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0}

/* ===== 섹션별 레이아웃 (ID 기반) ===== */
/* Problem */
.elementor-element-jhPr{background:var(--bg) !important;padding:var(--sec-pad) 0 !important}
.elementor-element-jhPrIn{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:flex !important;flex-direction:column !important;gap:0 !important}
.elementor-element-jhPrHead{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:var(--sp-8) !important;align-items:end !important;margin-bottom:var(--sp-8) !important}
.elementor-element-jhPrHeadL{display:flex !important;flex-direction:column !important;gap:var(--sp-4) !important}
.elementor-element-jhPrList{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:var(--sp-6) !important}
.elementor-element-jhPrList > .elementor-element{border-top:1px solid var(--line);padding-top:var(--sp-5) !important;display:flex !important;flex-direction:column !important;gap:var(--sp-3) !important}
/* About */
.elementor-element-jhAb{background:var(--bg) !important;padding:var(--sec-pad) 0 !important;display:flex !important;flex-direction:column !important;gap:var(--sp-8) !important}
.elementor-element-jhAbHead{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:var(--sp-8) !important;align-items:end !important;width:100%}
.elementor-element-jhAbHeadL{display:flex !important;flex-direction:column !important;gap:var(--sp-4) !important}
.elementor-element-jhAbBand{width:100% !important;display:flex !important;flex-direction:column !important;gap:var(--sp-6) !important}
.elementor-element-jhAbCap{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:flex !important;flex-direction:column !important;gap:var(--sp-2) !important;width:100%}
.elementor-element-jhAbPair{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:grid !important;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) !important;gap:var(--sp-8) !important;align-items:center !important;width:100%}
.elementor-element-jhAbPairT{display:flex !important;flex-direction:column !important;gap:var(--sp-4) !important}
/* Service */
.elementor-element-jhSv{background:var(--bg-alt) !important;padding:var(--sec-pad) 0 !important;display:flex !important;flex-direction:column !important;gap:var(--sp-8) !important}
.elementor-element-jhSvHead{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:var(--sp-8) !important;align-items:end !important;width:100%}
.elementor-element-jhSvHeadL{display:flex !important;flex-direction:column !important;gap:var(--sp-4) !important}
.elementor-element-jhSvGrid{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:var(--tile-gap) !important;width:100%}
.elementor-element-jhSvGrid > .elementor-element{display:flex !important;flex-direction:column !important;gap:var(--sp-4) !important}
.jw-cap{display:flex !important;flex-direction:column !important;gap:var(--sp-2) !important}
/* Material */
.elementor-element-jhMt{background:var(--bg) !important;padding:var(--sec-pad) 0 !important;display:flex !important;flex-direction:column !important;gap:var(--sp-8) !important}
.elementor-element-jhMtHead{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:var(--sp-8) !important;align-items:end !important;width:100%}
.elementor-element-jhMtHeadL{display:flex !important;flex-direction:column !important;gap:var(--sp-4) !important}
.elementor-element-jhMtRows{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:flex !important;flex-direction:column !important;gap:var(--sp-10) !important;width:100%}
.elementor-element-jhMtRows > .elementor-element{display:grid !important;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) !important;gap:var(--sp-8) !important;align-items:center !important}
.elementor-element-jhMtRow2 > .elementor-element:first-child{order:2}
.jw-mtext{display:flex !important;flex-direction:column !important;gap:var(--sp-3) !important}
/* Portfolio */
.elementor-element-jhPf{background:var(--bg-alt) !important;padding:var(--sec-pad) 0 !important;display:flex !important;flex-direction:column !important;gap:var(--sp-8) !important}
.elementor-element-jhPfHead{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:var(--sp-8) !important;align-items:end !important;width:100%}
.elementor-element-jhPfHeadL{display:flex !important;flex-direction:column !important;gap:var(--sp-4) !important}
.elementor-element-jhPfGrid{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:var(--col-gap) !important;width:100%}
.elementor-element-jhPfGrid > .elementor-element{display:flex !important;flex-direction:column !important}
.jw-cap2{padding:var(--sp-4) 0 var(--sp-6) !important;display:flex !important;flex-direction:column !important;gap:var(--sp-2) !important}
/* Process */
.elementor-element-jhPc{background:var(--bg) !important;padding:var(--sec-pad) 0 !important}
.elementor-element-jhPcIn{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:grid !important;grid-template-columns:minmax(0,.72fr) minmax(0,1fr) !important;gap:var(--sp-10) !important}
.elementor-element-jhPcAside{align-self:start;display:flex !important;flex-direction:column !important;gap:var(--sp-4) !important;position:sticky;top:120px}
.elementor-element-jhPcSteps{display:flex !important;flex-direction:column !important;gap:0 !important}
.elementor-element-jhPcSteps > .elementor-element{display:grid !important;grid-template-columns:56px 1fr !important;gap:var(--sp-5) !important;padding:var(--sp-7) 0 !important;border-top:1px solid var(--line)}
.elementor-element-jhPcSteps > .elementor-element:last-child{border-bottom:1px solid var(--line)}
.jw-steptext{display:flex !important;flex-direction:column !important;gap:var(--sp-3) !important}
/* Review */
.elementor-element-jhRv{background:var(--bg-alt) !important;padding:var(--sec-pad) 0 !important;display:flex !important;flex-direction:column !important;gap:var(--sp-8) !important}
.elementor-element-jhRvHead{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:var(--sp-8) !important;align-items:end !important;width:100%}
.elementor-element-jhRvHeadL{display:flex !important;flex-direction:column !important;gap:var(--sp-4) !important}
.elementor-element-jhRvList{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:flex !important;flex-direction:column !important;gap:var(--sp-10) !important;width:100%}
.elementor-element-jhRvList > .elementor-element{max-width:55%;display:flex !important;flex-direction:column !important;gap:var(--sp-4) !important}
.elementor-element-jhRvList > .elementor-element:nth-child(even){margin-left:auto;text-align:right}
/* FAQ */
.elementor-element-jhFq{background:var(--bg) !important;padding:var(--sec-pad) 0 !important}
.elementor-element-jhFqIn{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:flex !important;flex-direction:column !important;gap:var(--sp-8) !important}
.elementor-element-jhFqHead{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:var(--sp-8) !important;align-items:end !important}
.elementor-element-jhFqHeadL{display:flex !important;flex-direction:column !important;gap:var(--sp-4) !important}
/* CTA */
.elementor-element-jhCta{background:var(--bg) !important;padding:0 !important;display:flex !important;flex-direction:column !important;gap:0 !important}
.elementor-element-jhCtaImg img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 58%;filter:saturate(.9) contrast(1.02)}
.elementor-element-jhCtaPanel{max-width:var(--container) !important;margin:0 auto !important;padding:var(--sec-pad) var(--gutter) !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:var(--sp-4) !important;text-align:center;width:100%}
/* Contact */
.elementor-element-jhCt{background:var(--bg-alt) !important;padding:var(--sec-pad) 0 !important}
.elementor-element-jhCtIn{max-width:var(--container) !important;margin:0 auto !important;padding:0 var(--gutter) !important;display:grid !important;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) !important;gap:var(--sp-10) !important}
.elementor-element-jhCtAside{display:flex !important;flex-direction:column !important;gap:var(--sp-4) !important;align-self:start}

/* ===== Elementor 브리지 반응형 ===== */
@media (max-width:1023px){
  .elementor-element-jhPrHead,.elementor-element-jhAbHead,.elementor-element-jhSvHead,.elementor-element-jhMtHead,.elementor-element-jhPfHead,.elementor-element-jhRvHead,.elementor-element-jhFqHead{grid-template-columns:1fr !important;align-items:start !important;gap:var(--sp-4) !important}
}
@media (max-width:767px){
  .elementor-element-jhPrList{grid-template-columns:1fr !important;gap:var(--sp-5) !important}
  .elementor-element-jhSvGrid{grid-template-columns:1fr !important;gap:var(--sp-7) !important}
  .elementor-element-jhPfGrid{grid-template-columns:1fr !important;gap:var(--sp-7) !important}
  .elementor-element-jhAbPair{grid-template-columns:1fr !important;gap:var(--sp-5) !important}
  .elementor-element-jhPcIn{grid-template-columns:1fr !important;gap:var(--sp-7) !important}
  .elementor-element-jhPcAside{position:static !important}
  .elementor-element-jhCtIn{grid-template-columns:1fr !important;gap:var(--sp-7) !important}
  .elementor-element-jhMtRows > .elementor-element{grid-template-columns:1fr !important;gap:var(--sp-5) !important}
  .elementor-element-jhMtRow2 > .elementor-element:first-child{order:0 !important}
  .elementor-element-jhRvList > .elementor-element{max-width:100% !important}
  .elementor-element-jhRvList > .elementor-element:nth-child(even){margin-left:0 !important;text-align:left !important}
  .elementor-element-jhPcSteps > .elementor-element{grid-template-columns:1fr !important;gap:var(--sp-2) !important;padding:var(--sp-6) 0 !important}
  /* 모바일 이미지 세로 4:5 (소재는 가로 유지) */
  .elementor-element-jhAbImg img,.elementor-element-jhAbImg2 img,.elementor-element-jhSvGrid .figure__img img,.elementor-element-jhPfGrid .figure__img img{aspect-ratio:4/5}
  .elementor-element-jhCtaImg img{aspect-ratio:4/5;object-position:center 55%}
}
/*BRIDGE-END*/
/*JWFIX-START*/
body{word-break:keep-all;}
/* Elementor 에디터에서 헤딩이 파란색으로 나오는 문제 방지: 색상 강제 */
.elementor-heading-title{color:var(--ink) !important}
.label .elementor-heading-title,.jw-num .elementor-heading-title,.jw-meta .elementor-heading-title,.jw-who .elementor-heading-title{color:var(--ink-45) !important}
.sub .elementor-widget-container,.sub p{color:var(--ink-60) !important}
/*JWFIX-END*/
/*USERTWEAKS-START*/
/* 헤더 메뉴·버튼: Paperlogy 볼드 */
.btn,.hdr__nav a,.jw-btn .elementor-button{font-family:Paperlogy,system-ui,sans-serif !important;font-weight:600 !important}
/* 설명 텍스트: 16px + 진하게 */
.sub,.sub p,.sub .elementor-widget-container{font-size:16px !important;color:rgba(26,26,26,.78) !important}
.body,.body p,.body .elementor-widget-container{font-size:16px !important}
/* 히어로 패널 좌측 정렬을 섹션과 동일하게 (컨테이너 1280 + 거터 40, 그리드 1fr 1fr) */
.hero-panel{padding-left:0 !important;padding-right:0 !important}
.hero-panel__inner{max-width:var(--container);margin:0 auto;padding-left:var(--gutter) !important;padding-right:var(--gutter) !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}
/*USERTWEAKS-END*/