/* ─────────────────────────────────────────────
   A.OULL 파트너 장인 모집 랜딩페이지
   72컬럼 × 17.22px(=1240/72) 셀 그리드.
   캔버스 최대 1240px, 좌우 거터(최소 20px)는 화면이
   넓어지면 늘어나고, 컬럼 1/75을 쓰는 요소는 풀블리드.
   ───────────────────────────────────────────── */

:root {
  --tan: #cba783;
  --accent: #df7f63;
  --cream: #fff7ef;
  --cream-soft: #f8efe7;
  --ink: #000000;
  --taupe: #746960;
  --light: #ececec;
  --page-bg: #f5f5f5;
  --cell: 17.2222px;
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: "Georgia", "Times New Roman", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--ink);
  line-height: 1.5;
  word-break: keep-all;
}

img { display: block; }

/* ── 그리드 섹션 공통 ── */
.g {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns:
    minmax(20px, 1fr)
    repeat(72, minmax(0, var(--cell)))
    minmax(20px, 1fr);
  grid-auto-rows: var(--cell);
  background: var(--tan);
  overflow: hidden;
}

/* 요소 프레임: 원본과 동일하게 세로 중앙 정렬 */
.el {
  display: flex;
  align-items: center;
  min-height: 0;
  min-width: 0;
}
/* 텍스트 프레임: 원본과 동일하게 상단 정렬(블록 흐름) */
.el.t { display: block; white-space: pre-wrap; }

/* 이미지 맞춤 */
img.cov { width: 100%; height: 100%; object-fit: cover; }
img.fit { width: 100%; height: 100%; object-fit: contain; }

/* 버튼 */
.btn {
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 24px;
  transition: opacity 0.2s ease;
}
.btn:hover { opacity: 0.88; }
.btn-black { background: #000; }

/* ═══════════ S1 히어로 (54행) ═══════════ */
.sec-hero {
  min-height: calc(54 * var(--cell));
  background: url("../assets/img/hero-bg.jpg") center / cover no-repeat #1b1207;
}
.hero-logo  { grid-column: 2 / 10;  grid-row: 1 / 5;  z-index: 7; object-fit: contain; width: 100%; height: 100%; }
.hero-title { grid-column: 2 / 74;  grid-row: 18 / 30; z-index: 3; text-align: center; font-size: 62px; font-weight: 800; line-height: 1.3; color: #fff7ef; }
.hero-sub   { grid-column: 2 / 74;  grid-row: 34 / 39; z-index: 5; text-align: center; font-size: 21px; line-height: 1.5; color: rgba(255, 247, 239, 0.7); }
.hero-btn1  { grid-column: 30 / 46; grid-row: 42 / 45; z-index: 2; }
.hero-btn2  { grid-column: 30 / 46; grid-row: 47 / 50; z-index: 2; }

/* ═══════════ S2 브랜드 + Vision (159행) ═══════════ */
.sec-brand { min-height: calc(159 * var(--cell)); }
.brand-illust    { grid-column: 24 / 52; grid-row: 8 / 20; }
.brand-wordmark  { grid-column: 31 / 46; grid-row: 20 / 22; }
.brand-intro     { grid-column: 13 / 69; grid-row: 27 / 39; text-align: center; font-size: 35px; line-height: 1.5; }
.brand-intro2    { grid-column: 13 / 69; grid-row: 43 / 48; text-align: center; font-size: 35px; line-height: 1.5; }
.vision-mark     { grid-column: 5 / 16;  grid-row: 57 / 61; }
.vision-caption  { grid-column: 5 / 37;  grid-row: 62 / 63; font-size: 21px; line-height: 1.2; color: #fff; }
.vision-heading  { grid-column: 5 / 23;  grid-row: 66 / 69; margin-top: -25px; font-size: 44px; font-weight: 800; line-height: 1.15; color: #fff; }
.vision-rule     { grid-column: 23 / 52; grid-row: 65 / 68; height: 1px; align-self: center; background: rgba(248, 239, 231, 0.6); }
.vision-wordmark { grid-column: 54 / 74; grid-row: 63 / 70; }
.vision-statement{ grid-column: 17 / 63; grid-row: 77 / 87; margin-top: -26px; text-align: center; font-size: 40px; font-weight: 800; line-height: 1.4; color: #fff; }
.vision-desc     { grid-column: 17 / 63; grid-row: 91 / 95; justify-content: center; text-align: center; font-size: 21px; line-height: 1.5; color: #fff; }
.vision-illust   { grid-column: 1 / 75;  grid-row: 102 / 159; z-index: 6; object-fit: contain; }

/* ═══════════ S3 Why (52행) ═══════════ */
.sec-why { min-height: calc(52 * var(--cell)); }
.why-mark      { grid-column: 3 / 15;  grid-row: 9 / 14;  z-index: 7; }
.why-heading   { grid-column: 2 / 27;  grid-row: 14 / 29; font-size: 44px; font-weight: 400; line-height: 1.5; color: #fff; }
.why-questions { grid-column: 33 / 74; grid-row: 9 / 30;  list-style: none; font-size: 30px; font-weight: 800; line-height: 1.5; white-space: pre-wrap; }
.why-trees     { grid-column: 32 / 63; grid-row: 32 / 42; }

/* ═══════════ S4 How (128행) ═══════════ */
.sec-how { min-height: calc(128 * var(--cell)); }
.how-mark  { grid-column: 31 / 43; grid-row: 1 / 5; z-index: 7; }
.how-quote { grid-column: 2 / 74;  grid-row: 6 / 13; text-align: center; font-size: 44px; font-weight: 800; line-height: 1.35; color: #fff; }

.blob-l { border-radius: 1000px 900px 1000px 16px; }
.blob-r { border-radius: 900px 1000px 16px 1000px; }

.f1-img     { grid-column: 9 / 36;  grid-row: 19 / 36; }
.f1-label   { grid-column: 40 / 67; grid-row: 19 / 21; font-size: 20px; font-weight: 800; line-height: 1.5; color: #fff; }
.f1-heading { grid-column: 40 / 67; grid-row: 21 / 26; font-size: 32px; font-weight: 700; line-height: 1.2; color: #fff; }
.f1-desc    { grid-column: 40 / 68; grid-row: 28 / 36; font-size: 21px; line-height: 1.5; }

.f2-img     { grid-column: 40 / 67; grid-row: 41 / 58; }
.f2-label   { grid-column: 9 / 36;  grid-row: 41 / 43; font-size: 20px; font-weight: 800; line-height: 1.5; color: #fff; }
.f2-heading { grid-column: 9 / 36;  grid-row: 43 / 48; font-size: 32px; font-weight: 700; line-height: 1.2; color: #fff; }
.f2-desc    { grid-column: 9 / 36;  grid-row: 50 / 58; font-size: 21px; line-height: 1.5; }

.f3-img     { grid-column: 9 / 36;  grid-row: 64 / 81; }
.f3-label   { grid-column: 40 / 67; grid-row: 64 / 66; font-size: 20px; font-weight: 800; line-height: 1.5; color: #fff; }
.f3-heading { grid-column: 40 / 67; grid-row: 66 / 71; font-size: 32px; font-weight: 700; line-height: 1.2; color: #fff; }
.f3-desc    { grid-column: 40 / 67; grid-row: 73 / 81; font-size: 21px; line-height: 1.5; }

.f4-img     { grid-column: 40 / 67; grid-row: 87 / 104; }
.f4-label   { grid-column: 9 / 36;  grid-row: 87 / 89;  font-size: 20px; font-weight: 800; line-height: 1.5; color: #fff; }
.f4-heading { grid-column: 9 / 36;  grid-row: 89 / 94;  font-size: 32px; font-weight: 700; line-height: 1.2; color: #fff; }
.f4-desc    { grid-column: 9 / 36;  grid-row: 96 / 104; font-size: 21px; line-height: 1.5; }

.invite-text { grid-column: 2 / 74;  grid-row: 116 / 120; margin-top: -7px; text-align: center; font-size: 32px; font-weight: 400; line-height: 1.3; }
.invite-text strong { font-weight: 700; }
.invite-btn  { grid-column: 31 / 47; grid-row: 122 / 125; }

/* ═══════════ S5 지붕 1 (33행) ═══════════ */
.sec-roof1 { min-height: calc(33 * var(--cell)); }
.roof1-img { grid-column: 1 / 45; grid-row: 1 / 34; }

/* ═══════════ S6 두석장 (194행) ═══════════ */
.sec-kim { min-height: calc(194 * var(--cell)); }
.kim-title    { grid-column: 3 / 74;  grid-row: 4 / 11;    margin-top: 15px; font-size: 80px; font-weight: 800; line-height: 1.15; }
.kim-name     { grid-column: 19 / 74; grid-row: 4 / 11;    z-index: 2; text-align: right; font-size: 60px; font-weight: 800; line-height: 1.05; }
.kim-meta     { grid-column: 3 / 32;  grid-row: 10 / 18;   margin-top: 25px; font-size: 35px; font-weight: 800; line-height: 1.2; }
.kim-portrait { grid-column: 42 / 74; grid-row: 12 / 54; }
.kim-quote    { grid-column: 2 / 41;  grid-row: 17 / 30;   font-size: 75px; font-weight: 400; line-height: 1.25; color: #fff; }
.kim-story1   { grid-column: 2 / 39;  grid-row: 35 / 48;   font-size: 28px; line-height: 1.5; color: #fff; }
.kim-father   { grid-column: 35 / 74; grid-row: 56 / 78; }
.kim-story2   { grid-column: 2 / 33;  grid-row: 55 / 79;   font-size: 28px; line-height: 1.5; color: #fff; }
.kim-hardware { grid-column: 2 / 35;  grid-row: 88 / 127; }
.kim-hands    { grid-column: 41 / 74; grid-row: 88 / 127; }
.kim-workshop { grid-column: 2 / 33;  grid-row: 134 / 172; }
.kim-endquote { grid-column: 34 / 74; grid-row: 143 / 165; text-align: center; font-size: 65px; font-weight: 400; line-height: 1.35; color: #fff; }
.kim-dots     { grid-column: 28 / 50; grid-row: 185 / 191; }

/* ═══════════ S7 옻칠장 (294행) ═══════════ */
.sec-chun { min-height: calc(294 * var(--cell)); }
.chun-lacquer  { grid-column: 1 / 75;  grid-row: 8 / 43; }
.chun-title    { grid-column: 3 / 74;  grid-row: 45 / 52;   margin-top: 15px; font-size: 80px; font-weight: 800; line-height: 1.15; }
.chun-name     { grid-column: 19 / 74; grid-row: 45 / 52;   z-index: 2; text-align: right; font-size: 60px; font-weight: 800; line-height: 1.05; }
.chun-meta     { grid-column: 3 / 32;  grid-row: 51 / 59;   margin-top: 25px; font-size: 35px; font-weight: 800; line-height: 1.2; }
.chun-quote    { grid-column: 19 / 58; grid-row: 66 / 76;   text-align: center; font-size: 75px; font-weight: 400; line-height: 1.25; color: #fff; }
.chun-tables   { grid-column: 2 / 27;  grid-row: 88 / 120;  z-index: 7; }
.chun-text1    { grid-column: 29 / 74; grid-row: 90 / 103;  font-size: 28px; line-height: 1.5; color: #fff; }
.chun-carving  { grid-column: 25 / 50; grid-row: 108 / 140; z-index: 12; }
.chun-mop      { grid-column: 48 / 74; grid-row: 122 / 154; z-index: 11; }
.chun-text2a   { grid-column: 8 / 46;  grid-row: 142 / 155; justify-content: flex-end; text-align: right; font-size: 28px; line-height: 1.5; color: #fff; }
.chun-text2b   { grid-column: 8 / 46;  grid-row: 148 / 161; justify-content: flex-end; text-align: right; font-size: 28px; line-height: 1.5; color: #fff; }
.chun-studio   { grid-column: 2 / 36;  grid-row: 166 / 186; z-index: 6; }
.chun-cabinet  { grid-column: 40 / 74; grid-row: 166 / 186; z-index: 5; }
.chun-text3    { grid-column: 2 / 74;  grid-row: 191 / 206; justify-content: center; text-align: center; font-size: 28px; line-height: 1.5; color: #fff; }
.chun-village  { grid-column: 2 / 40;  grid-row: 210 / 254; z-index: 3; }
.chun-caption  { grid-column: 2 / 40;  grid-row: 254 / 256; font-size: 21px; line-height: 1.5; color: #2f343a; }
.chun-endquote { grid-column: 41 / 74; grid-row: 222 / 244; text-align: center; font-size: 65px; font-weight: 400; line-height: 1.35; color: #fff; }
.chun-walking  { grid-column: 1 / 75;  grid-row: 260 / 295; z-index: 2; }
.chun-walking-shade { grid-column: 1 / 75; grid-row: 260 / 295; z-index: 3; background: rgba(112, 75, 41, 0.5); pointer-events: none; }

/* ═══════════ S8 지붕 2 (33행) ═══════════ */
.sec-roof2 { min-height: calc(33 * var(--cell)); }
.roof2-img { grid-column: 31 / 75; grid-row: 1 / 34; }

/* ═══════════ S9 모집 CTA (61행) ═══════════ */
.sec-recruit { min-height: calc(61 * var(--cell)); background: var(--light); }
.re-lead    { grid-column: 2 / 74;  grid-row: 4 / 6;   justify-content: center; text-align: center; font-size: 21px; line-height: 1.5; }
.re-heading { grid-column: 2 / 74;  grid-row: 8 / 15;  justify-content: center; text-align: center; font-size: 44px; font-weight: 800; line-height: 1.2; }
.re-sub     { grid-column: 2 / 74;  grid-row: 21 / 24; justify-content: center; text-align: center; font-size: 21px; line-height: 1.5; }
.re-label-l { grid-column: 19 / 33; grid-row: 30 / 32; font-size: 16px; line-height: 1.5; }
.re-label-r { grid-column: 43 / 57; grid-row: 30 / 32; justify-content: flex-end; text-align: right; font-size: 16px; line-height: 1.5; }
.re-bar     { grid-column: 19 / 57; grid-row: 32 / 33; border-radius: 100px; background: #d9d9d9; overflow: hidden; align-self: center; height: 10px; }
.re-bar-fill{ height: 100%; width: 0; border-radius: 100px; background: var(--accent); transition: width 1.2s ease; }

.countdown { grid-column: 27 / 49; grid-row: 37 / 44; justify-content: center; gap: 28px; align-items: flex-start; align-self: center; }
.cd-unit  { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cd-num   { font-family: var(--font-serif); font-size: 56px; font-weight: 800; line-height: 1.1; }
.cd-label { font-size: 14px; color: var(--taupe); }
.cd-colon { font-family: var(--font-serif); font-size: 44px; font-weight: 800; line-height: 1.4; }

.re-benefit-title { grid-column: 34 / 42; grid-row: 47 / 50; justify-content: center; text-align: center; font-size: 20px; line-height: 1.5; }
.re-leaf1 { grid-column: 31 / 33; grid-row: 51 / 52; }
.re-item1 { grid-column: 33 / 48; grid-row: 51 / 52; font-size: 16px; line-height: 1.5; }
.re-leaf2 { grid-column: 31 / 33; grid-row: 53 / 54; }
.re-item2 { grid-column: 33 / 48; grid-row: 53 / 54; font-size: 16px; line-height: 1.5; }
.re-leaf3 { grid-column: 31 / 33; grid-row: 55 / 56; }
.re-item3 { grid-column: 33 / 48; grid-row: 55 / 56; font-size: 16px; line-height: 1.5; }

/* ═══════════ S10 신청 폼 (63행) ═══════════ */
.sec-form { min-height: calc(63 * var(--cell)); }
.apply-form {
  grid-column: 16 / 62;
  grid-row: 5 / 64;
  display: block;
  background: #fff;
  border-radius: 14px;
  padding: 36px 48px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06);
}
.apply-form__title { text-align: center; font-size: 26px; font-weight: 800; }
.apply-form__sub   { margin-top: 10px; text-align: center; font-size: 15px; color: var(--taupe); }
.apply-form__field { display: block; margin-top: 14px; }
.apply-form__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.apply-form__label em { color: var(--accent); font-style: normal; }
.apply-form__field input {
  width: 100%;
  padding: 9px 14px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease;
}
.apply-form__field input::placeholder { color: #b5b5b5; }
.apply-form__field input:focus { border-color: var(--accent); }
.apply-form__field input.is-invalid { border-color: #e04b3a; }
.apply-form__submit {
  width: 100%;
  margin-top: 22px;
  padding: 12px;
  border: none;
  border-radius: 18px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.apply-form__submit:hover { opacity: 0.9; }
.apply-form__done { margin-top: 18px; text-align: center; font-size: 14px; font-weight: 600; color: var(--accent); }

/* ═══════════ S11 궁궐 (53행) ═══════════ */
.sec-palace { min-height: calc(53 * var(--cell)); }
.palace-img { grid-column: 1 / 75; grid-row: 12 / 50; }

/* ═══════════ S12 푸터 (24행) ═══════════ */
.sec-footer { background: var(--tan); }
.footer-box  { grid-column: 1 / 75;  grid-row: 2 / 23; background: #000; border-radius: 40px 40px 0 0; margin-bottom: -1px; }
.footer-logo { grid-column: 34 / 42; grid-row: 4 / 8;   z-index: 7; }
.footer-desc { grid-column: 2 / 74;  grid-row: 10 / 13; justify-content: center; text-align: center; font-size: 14px; line-height: 1.8; color: #fff; }
.footer-sns  { grid-column: 2 / 74;  grid-row: 14 / 16; justify-content: center; text-align: center; font-size: 14px; line-height: 1.8; color: #fff; text-decoration: none; }
.footer-sns:hover { text-decoration: underline; }
.footer-copy { grid-column: 2 / 74;  grid-row: 17 / 18; justify-content: center; text-align: center; font-size: 12px; line-height: 1.8; color: #fff; }

/* ═══════════ 모바일 (768px 이하: 24컬럼 유동 그리드) ═══════════ */
@media (max-width: 768px) {
  /* 루트 폰트 = 그리드 셀 크기 → 글자·간격이 레이아웃과 같은 비율로 축소 */
  html { font-size: calc(min(366px, 100vw - 40px) / 24); }
  /* 모바일 폼 내부도 비례 축소 */
  .apply-form__title { font-size: 1.311rem; }
  .apply-form__sub { font-size: 0.852rem; }
  .apply-form__field { margin-top: 0.918rem; }
  .apply-form__label { font-size: 0.852rem; margin-bottom: 0.393rem; }
  .apply-form__field input { padding: 0.59rem 0.918rem; font-size: 0.852rem; border-radius: 0.525rem; }
  .apply-form__submit { margin-top: 1.443rem; padding: 0.787rem; font-size: 0.984rem; border-radius: 1.18rem; }
  .apply-form__done { font-size: 0.918rem; }
  .btn { padding: 0; }
  .g {
    --cell: calc(min(366px, 100vw - 40px) / 24);
    grid-template-columns: minmax(12px, 1fr) repeat(24, minmax(0, var(--cell))) minmax(12px, 1fr);
  }
  .sec-hero { min-height: calc(53 * var(--cell)); }
  .sec-brand { min-height: calc(86 * var(--cell)); }
  .sec-why { min-height: calc(45 * var(--cell)); }
  .sec-how { min-height: calc(155 * var(--cell)); }
  .sec-roof1 { min-height: calc(18 * var(--cell)); }
  .sec-kim { min-height: calc(182 * var(--cell)); }
  .sec-chun { min-height: calc(255 * var(--cell)); }
  .sec-roof2 { min-height: calc(19 * var(--cell)); }
  .sec-recruit { min-height: calc(64 * var(--cell)); }
  .sec-form { min-height: calc(76 * var(--cell)); }
  .sec-palace { min-height: calc(16 * var(--cell)); }
  .vision-heading, .vision-statement, .kim-meta, .chun-meta, .kim-title, .chun-title, .invite-text { margin-top: 0; }
  .hero-logo { grid-column: 2 / 6; grid-row: 2 / 5; }
  .hero-title { grid-column: 3 / 25; grid-row: 18 / 31; font-size: 2.623rem; line-height: 1.3; text-align: center; }
  .hero-sub { grid-column: 3 / 25; grid-row: 28 / 34; font-size: 0.918rem; line-height: 1.5; text-align: center; }
  .hero-btn1 { grid-column: 5 / 23; grid-row: 42 / 45; }
  .hero-btn2 { grid-column: 5 / 23; grid-row: 46 / 49; }
  .brand-illust { grid-column: 8 / 20; grid-row: 2 / 7; }
  .brand-wordmark { grid-column: 12 / 16; grid-row: 6 / 9; }
  .brand-intro { grid-column: 3 / 25; grid-row: 12 / 19; font-size: 1.049rem; line-height: 1.5; text-align: center; }
  .brand-intro2 { grid-column: 3 / 25; grid-row: 22 / 26; font-size: 1.049rem; line-height: 1.5; text-align: center; }
  .vision-mark { grid-column: 3 / 7; grid-row: 25 / 28; }
  .vision-caption { grid-column: 3 / 25; grid-row: 28 / 30; font-size: 1.049rem; line-height: 1.5; }
  .vision-heading { grid-column: 3 / 25; grid-row: 30 / 36; font-size: 2.361rem; line-height: 1.2; }
  .vision-rule { grid-column: 13 / 16; grid-row: 36 / 39; }
  .vision-wordmark { grid-column: 10 / 18; grid-row: 39 / 43; }
  .vision-statement { grid-column: 1 / 27; grid-row: 46 / 56; font-size: 2.23rem; line-height: 1.2; text-align: center; }
  .vision-desc { grid-column: 4 / 24; grid-row: 59 / 66; font-size: 1.049rem; line-height: 1.5; text-align: center; }
  .vision-illust { grid-column: 1 / 27; grid-row: 69 / 87; }
  .why-mark { grid-column: 3 / 7; grid-row: 5 / 8; }
  .why-heading { grid-column: 3 / 26; grid-row: 10 / 18; font-size: 2.361rem; line-height: 1.4; }
  .why-questions { grid-column: 2 / 27; grid-row: 20 / 42; font-size: 1.049rem; line-height: 1.5; }
  .why-trees { grid-column: 4 / 23; grid-row: 35 / 41; }
  .how-mark { grid-column: 2 / 6; grid-row: 2 / 5; }
  .how-quote { grid-column: 3 / 25; grid-row: 7 / 13; font-size: 2.361rem; line-height: 1.2; text-align: center; }
  .f1-img { grid-column: 3 / 25; grid-row: 17 / 30; }
  .f1-label { grid-column: 3 / 25; grid-row: 31 / 33; font-size: 1.049rem; line-height: 1.5; }
  .f1-heading { grid-column: 3 / 25; grid-row: 33 / 37; font-size: 1.574rem; line-height: 1.2; }
  .f1-desc { grid-column: 3 / 25; grid-row: 38 / 45; font-size: 1.049rem; line-height: 1.5; }
  .f2-img { grid-column: 3 / 25; grid-row: 48 / 61; }
  .f2-label { grid-column: 3 / 25; grid-row: 62 / 64; font-size: 1.049rem; line-height: 1.5; }
  .f2-heading { grid-column: 3 / 25; grid-row: 64 / 68; font-size: 1.574rem; line-height: 1.2; }
  .f2-desc { grid-column: 3 / 25; grid-row: 69 / 75; font-size: 1.049rem; line-height: 1.5; }
  .f3-img { grid-column: 3 / 25; grid-row: 76 / 89; }
  .f3-label { grid-column: 3 / 25; grid-row: 90 / 92; font-size: 1.049rem; line-height: 1.5; }
  .f3-heading { grid-column: 3 / 25; grid-row: 92 / 96; font-size: 1.574rem; line-height: 1.2; }
  .f3-desc { grid-column: 3 / 25; grid-row: 97 / 103; font-size: 1.049rem; line-height: 1.5; }
  .f4-img { grid-column: 3 / 25; grid-row: 105 / 118; }
  .f4-label { grid-column: 3 / 25; grid-row: 119 / 121; font-size: 1.049rem; line-height: 1.5; }
  .f4-heading { grid-column: 3 / 25; grid-row: 121 / 125; font-size: 1.574rem; line-height: 1.2; }
  .f4-desc { grid-column: 3 / 25; grid-row: 126 / 132; font-size: 1.049rem; line-height: 1.5; }
  .invite-text { grid-column: 3 / 25; grid-row: 139 / 145; font-size: 1.574rem; line-height: 1.2; text-align: center; }
  .invite-btn { grid-column: 5 / 23; grid-row: 147 / 150; }
  .roof1-img { grid-column: 1 / 25; grid-row: 1 / 19; }
  .kim-title { grid-column: 2 / 26; grid-row: 2 / 7; font-size: 2.951rem; line-height: 1.15; }
  .kim-name { grid-column: 2 / 26; grid-row: 13 / 20; font-size: 2.951rem; line-height: 1.15; text-align: right; }
  .kim-meta { grid-column: 2 / 26; grid-row: 7 / 11; font-size: 1.377rem; line-height: 1.4; }
  .kim-portrait { grid-column: 12 / 26; grid-row: 21 / 40; }
  .kim-quote { grid-column: 1 / 27; grid-row: 44 / 58; font-size: 4.262rem; line-height: 1.1; text-align: center; }
  .kim-story1 { grid-column: 2 / 26; grid-row: 61 / 67; font-size: 1.049rem; line-height: 1.5; }
  .kim-father { grid-column: 3 / 25; grid-row: 77 / 88; }
  .kim-story2 { grid-column: 2 / 26; grid-row: 91 / 97; font-size: 1.049rem; line-height: 1.5; }
  .kim-hardware { grid-column: 1 / 13; grid-row: 108 / 125; }
  .kim-hands { grid-column: 15 / 27; grid-row: 108 / 125; }
  .kim-workshop { grid-column: 7 / 22; grid-row: 129 / 148; }
  .kim-endquote { grid-column: 2 / 26; grid-row: 150 / 164; font-size: 2.623rem; line-height: 1.1; text-align: center; }
  .kim-dots { grid-column: 8 / 20; grid-row: 172 / 175; }
  .chun-lacquer { grid-column: 1 / 27; grid-row: 20 / 55; }
  .chun-title { grid-column: 2 / 26; grid-row: 3 / 8; font-size: 2.951rem; line-height: 1.15; }
  .chun-name { grid-column: 2 / 26; grid-row: 13 / 20; font-size: 2.951rem; line-height: 1.15; text-align: right; }
  .chun-meta { grid-column: 2 / 26; grid-row: 8 / 12; font-size: 1.377rem; line-height: 1.4; }
  .chun-quote { grid-column: 2 / 26; grid-row: 58 / 72; font-size: 4.262rem; line-height: 1.1; text-align: center; }
  .chun-tables { grid-column: 3 / 13; grid-row: 101 / 115; }
  .chun-text1 { grid-column: 2 / 26; grid-row: 88 / 94; font-size: 1.049rem; line-height: 1.5; }
  .chun-carving { grid-column: 14 / 27; grid-row: 140 / 157; }
  .chun-mop { grid-column: 15 / 25; grid-row: 101 / 115; }
  .chun-text2a { grid-column: 3 / 26; grid-row: 136 / 139; font-size: 1.049rem; line-height: 1.5; text-align: inherit; }
  .chun-text2b { grid-column: 3 / 26; grid-row: 153 / 159; font-size: 1.049rem; line-height: 1.5; text-align: inherit; }
  .chun-studio { grid-column: 4 / 24; grid-row: 165 / 176; }
  .chun-cabinet { grid-column: 7 / 27; grid-row: 75 / 87; }
  .chun-text3 { grid-column: 3 / 25; grid-row: 117 / 123; font-size: 1.049rem; line-height: 1.5; text-align: inherit; }
  .chun-village { grid-column: 7 / 21; grid-row: 178 / 197; }
  .chun-caption { grid-column: 7 / 21; grid-row: 197 / 201; font-size: 0.787rem; line-height: 1.5; }
  .chun-endquote { grid-column: 2 / 26; grid-row: 202 / 216; font-size: 2.623rem; line-height: 1.1; text-align: center; }
  .chun-walking { grid-column: 1 / 27; grid-row: 221 / 256; }
  .roof2-img { grid-column: 2 / 27; grid-row: 1 / 20; }
  .re-lead { grid-column: 3 / 25; grid-row: 3 / 5; font-size: 1.049rem; line-height: 1.5; text-align: center; }
  .re-heading { grid-column: 2 / 26; grid-row: 8 / 19; font-size: 2.295rem; line-height: 1.2; text-align: center; }
  .re-sub { grid-column: 2 / 26; grid-row: 22 / 29; font-size: 1.049rem; line-height: 1.5; text-align: center; }
  .re-label-l { grid-column: 3 / 11; grid-row: 34 / 36; line-height: 1.5; text-align: left; }
  .re-label-r { grid-column: 19 / 25; grid-row: 34 / 36; line-height: 1.5; text-align: right; }
  .re-bar { grid-column: 3 / 25; grid-row: 36 / 37; }
  .countdown { grid-column: 3 / 25; grid-row: 39 / 46; line-height: 1.1; text-align: center; }
  .re-benefit-title { grid-column: 10 / 17; grid-row: 51 / 53; font-size: 1.049rem; line-height: 1.5; text-align: center; }
  .re-leaf1 { grid-column: 9 / 10; grid-row: 54 / 56; }
  .re-item1 { grid-column: 11 / 24; grid-row: 54 / 56; line-height: 1.5; }
  .re-leaf2 { grid-column: 9 / 10; grid-row: 57 / 59; }
  .re-item2 { grid-column: 11 / 23; grid-row: 57 / 59; line-height: 1.5; }
  .re-leaf3 { grid-column: 9 / 10; grid-row: 60 / 62; }
  .re-item3 { grid-column: 11 / 21; grid-row: 60 / 62; line-height: 1.5; }
  .apply-form { grid-column: 3 / 25; grid-row: 6 / 76; }
  .palace-img { grid-column: 1 / 27; grid-row: 3 / 16; }
  .footer-box { grid-column: 1 / 27; grid-row: 1 / 21; }
  .footer-logo { grid-column: 11 / 17; grid-row: 6 / 9; }
  .footer-desc { grid-column: 3 / 25; grid-row: 11 / 14; line-height: 1.8; text-align: center; }
  .footer-sns { grid-column: 3 / 25; grid-row: 15 / 17; line-height: 1.8; text-align: center; }
  .footer-copy { grid-column: 3 / 25; grid-row: 18 / 19; line-height: 1.8; text-align: center; }
  .chun-walking-shade { grid-column: 1 / 27; grid-row: 221 / 256; }
  .btn { font-size: 0.918rem; border-radius: 20px; }
  .apply-form { padding: 1.836rem 1.18rem; }
  .apply-form__title { font-size: 1.311rem; }
  .apply-form__sub { font-size: 0.852rem; }
  .countdown { gap: 0.918rem; }
  .cd-num { font-size: 2.361rem; }
  .cd-colon { font-size: 1.836rem; }
  .footer-box { border-radius: 24px 24px 0 0; }
}