@charset "UTF-8";

/* ═══════════════════════ 영문 페이지 전용 보정 ═══════════════════════
   /en (langtype=en) 일 때만 로드된다 — theme/design/head.sub.php 참조.
   한글 페이지에는 로드되지 않으므로 여기 있는 규칙이 ko 에 영향을 주지 않는다.

   ★★ 치수 보정은 반드시 뷰포트 블록 안에 쓴다 ★★
     이 파일의 셀렉터는 전부 body.lang-en 접두라 specificity 가 (0,2,0) 이고,
     mobile_style.css 의 모바일 규칙(0,1,0)을 이긴다. 그래서 PC 기준으로 쓴
     calc(var(--px) * N) 을 전역에 두면 모바일에서 --px 가 0.2 수준이라
     폰트가 4~9px 로 뭉개진다(실제로 그렇게 깨졌었다).
       · 언어 무관한 것(폰트 폴백)  → 전역
       · PC 치수 보정               → @media (min-width: 600px)
       · 모바일 치수 보정           → 파일 끝 @media (max-width: 599px) 단일 블록
   ═══════════════════════════════════════════════════════════════════ */

/* ── ① 폰트 — 없는 글리프만 대체 (뷰포트 무관) ────────────────────
   폰트를 통째로 갈아끼우지 않는다. 폴백 체인 뒤에 Paperlogy 를 덧붙일 뿐이다.
   브라우저는 글자 단위로 폰트를 고르므로
     · 한글(로고 "어화락")·숫자(대표번호, 매출 금액) → 원래 폰트 그대로
     · 미원체/신라/정속언해에 없는 라틴 알파벳만      → Paperlogy
   로 알아서 갈린다. */
body.lang-en {
  --font-main: "Miwon", "Paperlogy", serif;
  --font-logo: "Shilla", "Paperlogy", serif;
  --font-deco: "ZWJeongsok", "Paperlogy", serif;
}

/* ── 자간 — 영문은 전역값(-0.04vw)으로 통일 (유저 지시) ─────────────
   ko 는 폰트별로 자간을 다르게 쓰지만 en 은 라틴 문자라 한글용 좁은 자간이 어색하다.
   `[class]` 로 (0,2,0) 을 만들어 style.css 의 단일 클래스 규칙(0,1,0)을 이긴다
   — en.css 가 style.css 보다 **먼저** 로드되므로 specificity 로 이겨야 한다. */
body.lang-en,
body.lang-en [class] {
  letter-spacing: -0.04vw;
}

/* 토큰을 안 쓰고 "Miwon" 을 직접 박아둔 곳들도 같은 방식으로 뒤에만 덧붙인다 */
body.lang-en .header_call_num,
body.lang-en .quick_call_num,
body.lang-en .quick_submit_div span,
body.lang-en .con24_title,
body.lang-en .con24_phone {
  font-family: "Miwon", "Paperlogy", serif;
}

/* ── ② 뷰포트 무관 보정 ──────────────────────────────────────────── */

/* con07 금액 — 한글은 "94,682,000원" 이 붙어 한 줄이지만, 영문 단위는 앞에 공백이 있어
   "KRW" 만 다음 줄로 떨어진다. 숫자와 단위를 한 덩어리로 묶는다. */
body.lang-en .con07_stat_value {
  white-space: nowrap;
}

/* con18 세로 배지 — 붉은 원 4개에 "고 / 객 / 리 / 뷰" 가 한 글자씩 이미지로 박혀 있다.
   영문은 4글자로 안 떨어지고(REVIEWS=7), 원을 늘리면 세로가 200px 길어져 배치가 어긋난다.
   읽어야 하는 정보가 아니라 장식이고 옆 타이틀이 뜻을 전하므로 영문에서는 숨긴다.

   ★ display:none 이 아니라 visibility:hidden 이다 — PC 는 absol 이라 상관없지만
     모바일에서는 이 배지가 position:relative + order:2 로 흐름에 참여한다.
     지워버리면 배지가 차지하던 74px(margin-top 8vw + 높이 43px)이 사라져
     슬라이드가 위로 올라와 타이틀·본문을 덮는다. 자리는 두고 보이지만 않게 한다. */
body.lang-en .con18_badges {
  visibility: hidden;
}

/* con01 라벨 — 한글 "불에서 피어난 즐거움" 이 붓터치 배경을 거의 채우는 폭이라
   좌표(left: 6.4426%)로 직접 앉혀뒀다. 영문은 그보다 짧아 그 좌표에서 왼쪽으로 쏠린다.
   좌표를 풀고 부모(.con01_label)의 flex 중앙정렬에 맡긴다. */
body.lang-en .con01_label_txt {
  position: static;
  margin-top: -0.6vw;
}

/* ── ③ PC 치수 보정 (영문이 한글보다 길어 깨진 것만) ─────────────── */
@media screen and (min-width: 600px) {

  /* con28 상가보유 라디오 — 영문 라벨("Have a property?")이 한글보다 길어(112→178px)
     고정 margin-left(7.265%) 로는 라디오가 폼 밖으로 10px 밀려난다. en 만 줄인다. */
  /* ── 넘침 보정 — 영문은 같은 뜻을 쓰는 데 글자가 길어져 nowrap 요소가 부모를 넘는다.
     전역 -0.04vw 로 통일하면서 한글용 좁은 자간(-0.15vw 등)이 풀린 것도 원인이라,
     넘치는 요소만 자간을 다시 좁힌다. 값은 (초과폭 ÷ 글자수) 실측으로 산출. */
  /* con16 카피 — margin-left 66.8% 고정인데 영문 제목이 한글의 1.87배(338→632px)라
     우측 여백이 0 이 되어 화면 끝에 붙는다. 솥 이미지(~988px)와 겹치지 않는 선에서 당긴다. */
  body.lang-en .con16_copy {
    margin-left: 61%;
  }

  body.lang-en .con14_bg_word {
    letter-spacing: -0.35vw;   /* "SIDE MENU" 9자 · 43px 초과 */
  }

  body.lang-en .con19_slogan {
    letter-spacing: -0.06vw;   /* nowrap 슬로건 · 3px 초과 */
  }

  /* 아래 둘은 자간만으로 부족해(52px·19px) 폰트도 함께 줄인다 —
     nowrap 을 풀면 줄 수가 늘어 카드 높이가 한글과 어긋난다. */
  body.lang-en .con22_desc {
    font-size: calc(var(--px) * 19.5);
    letter-spacing: -0.05vw;
  }

  body.lang-en .con21_card_desc {
    font-size: calc(var(--px) * 18);
    letter-spacing: -0.07vw;
  }

  body.lang-en .con28_radio {
    margin-left: 4.5%;
  }


  /* 헤더 — 영문 메뉴 6개가 한글보다 237px 길어(1069 vs 832) 대표번호 CTA 가 화면 밖으로
     147px 밀려나간다. 폰트를 줄이지 않고 항목 간격에서 흡수한다 (4.7vw → 2.1vw). */
  body.lang-en .header_menu_list {
    gap: 2.1vw;
  }

  /* con10 — 카드 폭이 391px 로 고정이라 45px 폰트로는 영문 타이틀이 두 줄로 접히고,
     그만큼 아래 카드(con11·con12)가 55px 씩 밀린다. 이 카드 타이틀만 줄여 한 줄로 맞춘다. */
  body.lang-en .con10_title {
    font-size: calc(var(--px) * 38);
  }

  /* con18 — .con18_copy 는 자연폭이고 .con18_slider 가 flex-grow 라, 영문 타이틀이 길어지면
     좌측 칼럼이 넓어지며 슬라이드가 통째로 오른쪽으로 밀린다(실측 342px). */
  body.lang-en .con18_title {
    font-size: calc(var(--px) * 46);
  }

  /* con19 라벨 — "어화락 인테리어" 는 한글이라 붙여도 읽히지만 영문은 단어가 붙어버린다 */
  /* con22 첫 카드 — 한글은 1줄, 영문은 2줄이라 카드 높이가 24px 더 커진다.
     세 카드는 padding 으로 높이를 맞춰둔 구조라 늘어난 줄만큼 아래 여백에서 뺀다. */
  body.lang-en .con22_card_01 {
    padding-bottom: calc(var(--px) * 35.5464);
  }

  /* 창업문의 폼(con28) — 라벨이 한글 3~4글자 기준이라 글자를 양끝 정렬로 흩뿌린다
     (text-align-last: justify). 영문에 그대로 걸면 "N a m e" 처럼 벌어지고 두 줄로 넘친다. */
  body.lang-en .con28_label {
    width: 38%;
    font-size: calc(var(--px) * 20);
    text-align: left;
    text-align-last: left;
    text-justify: auto;
    letter-spacing: -0.04vw;
    white-space: nowrap;
  }

  body.lang-en .con28_input {
    width: 56.6581%;
  }

  /* 라벨을 36% 로 넓힌 만큼 상가보유 Yes/No 두 칸이 폼 밖으로 밀렸다 */
  body.lang-en .con28_radio_item {
    width: calc(var(--px) * 130);
  }

  /* 퀵바 — "Request a consultation" 이 한글 "상담 신청하기" 보다 길어 버튼 밖으로 넘친다.
     입력 3칸에서 폭을 덜어 버튼에 준다 (각 24.9084% → 21% / 버튼 36%). */
  body.lang-en .footer_input {
    width: 21%;
  }

  body.lang-en .quick_submit_div {
    width: 36%;
  }
}

/* ── ④ 모바일 치수 보정 (파일 끝 단일 블록) ──────────────────────── */
@media screen and (max-width: 599px) {


  /* con01 라벨 — position:static 으로 바꾸면서 무시된 top 을 margin 으로 되돌린다 (유저 지정값) */
  body.lang-en .con01_label_txt {
    margin-top: -1.3vw;
  }

  /* con09 화덕 불 — 모바일 위치 (유저 지정: 섹션 최상단).
     left/transform/width 는 국문 모바일(mobile_style.css .con09_fire)과 같아 재선언하지 않는다. */
  body.lang-en .con09_fire {
    top: 0vw;
  }

  /* con07 금액 — 영문은 단위가 " KRW" 라 한글 "원" 보다 44px 길어 부모(265px)를 넘친다 */
  body.lang-en .con07_stat_value {
    font-size: 8.4vw;
  }

  /* con21 카드 본문 — 두 문장을 나누는 <br> 이 pc-inline 이라 모바일에서는 사라진다.
     한글은 짧아 상관없었지만 영문은 이어붙으면서 "we" 한 단어만 남는 줄이 생긴다 */
  body.lang-en .con21_card_desc br.pc-inline {
    display: inline !important;
  }

  /* con21 소나무 장식 — absol 이라 페인트 순서상 카드보다 위에 그려진다.
     한글은 본문 일부만 살짝 걸쳐 자연스럽지만, 영문은 문구가 길어져 카드 제목까지 덮는다(30x54).
     ★ 카드를 통째로 올리면 모바일에선 카드가 화면의 84vw 라 소나무가 거의 다 가려진다.
       그래서 카드 배경은 그대로 두고 글자만 한 층 올린다 — 소나무는 카드에 걸친 채 보이고
       글자만 그 위로 온다. */
  body.lang-en .con21_card_title,
  body.lang-en .con21_card_desc {
    position: relative;
    z-index: 1;
  }

  /* 창업문의 폼 라벨 — 글자 흩뿌림을 끄고, 영문 라벨("Preferred area" 등)이 두 줄로
     접히지 않게 폭만 넓힌다(24% → 32%). 문구는 그대로 두기 위한 조치다. */
  body.lang-en .con28_label {
    width: 38%;
    font-size: 3.3vw;
    text-align: left;
    text-align-last: left;
    text-justify: auto;
    letter-spacing: -0.04vw;
  }

  body.lang-en .con28_input {
    width: 56%;
  }
}