/* 이목마루 — 브랜드 스타일
   디자인 원본: _design/imokmaru-web (1440px 고정 시안) → 클래스 기반 + 반응형으로 옮김
   규칙: 포인트 컬러는 오크 브라운 하나(하자 표기만 빨강), 둥글림·그림자 없음 */

:root {
    --im-bg: #FFFFFF;
    --im-bg2: #F7F7F5;
    --im-ph: #ECEBE8;
    --im-text: #111111;
    --im-sub: #6B6B6B;
    --im-cap: #8A8A8A;
    --im-line: #E5E5E5;
    --im-input: #CFCFCF;
    --im-point: #8B5E34;
    --im-bad: #B3261E;

    --im-max: 1440px;
    --im-gutter: 80px;
    --im-sec: 200px;        /* 큰 섹션 상하 */
    --im-sec-s: 160px;      /* 보조 배경 섹션 상하 */
    --im-header-h: 96px;
}

/* ---------- 기본 ---------- */
.im-body { margin: 0; background: var(--im-bg); color: var(--im-text); font-family: 'Noto Sans KR', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
.im-body *, .im-body *::before, .im-body *::after { box-sizing: border-box; }
.im-body img { display: block; max-width: 100%; }
.im-body a { color: var(--im-text); text-decoration: none; }
.im-body a:hover { color: var(--im-point); }
.im-body h1, .im-body h2, .im-body h3, .im-body p { margin: 0; }
.im-body button, .im-body input, .im-body textarea { font-family: inherit; }
.im-num { font-variant-numeric: tabular-nums; }
.im-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 20px; background: #111; color: #fff; }
.im-skip:focus { left: 0; color: #fff; }
.im-body :focus-visible { outline: 2px solid var(--im-point); outline-offset: 2px; }

.im-wrap { width: 100%; max-width: var(--im-max); margin: 0 auto; padding: 0 var(--im-gutter); }
.im-main { padding-top: var(--im-header-h); }
.im-main--overlay { padding-top: 0; }
.im-body [id] { scroll-margin-top: calc(var(--im-header-h) + 24px); }

.im-sec { padding: var(--im-sec) 0; }
.im-sec--alt { background: var(--im-bg2); padding: var(--im-sec-s) 0; }
.im-sec--pt0 { padding-top: 0; }
.im-sec--b160 { padding-bottom: var(--im-sec-s); }
.im-stack { display: flex; flex-direction: column; }
.im-center { text-align: center; align-items: center; }
.im-sec--pt80 { padding-top: 80px; }
.im-g12 { gap: 12px; } .im-g16 { gap: 16px; } .im-g20 { gap: 20px; } .im-g24 { gap: 24px; } .im-g28 { gap: 28px; }
.im-g40 { gap: 40px; } .im-g56 { gap: 56px; } .im-g64 { gap: 64px; } .im-g72 { gap: 72px; }
.im-mw640 { max-width: 640px; }
.im-mt12 { margin-top: 12px; }

/* ---------- 글자 ---------- */
.im-h1 { font-size: 60px; font-weight: 500; line-height: 1.32; letter-spacing: -0.02em; }
.im-h2 { font-size: 44px; font-weight: 500; line-height: 1.38; letter-spacing: -0.02em; }
.im-h2--m { font-size: 40px; }
.im-h2--l { font-size: 48px; }
.im-h3 { font-size: 22px; font-weight: 500; line-height: 1.5; }
.im-lead { font-size: 18px; line-height: 1.85; color: var(--im-sub); max-width: 680px; }
.im-p { font-size: 17px; line-height: 1.85; color: var(--im-sub); }
.im-p--s { font-size: 16px; }
.im-p--xs { font-size: 15px; }
.im-eyebrow { font-size: 15px; font-weight: 500; color: var(--im-point); }
.im-note { font-size: 13px; color: var(--im-cap); }
.im-point { color: var(--im-point); }

/* ---------- 버튼 · 링크 ---------- */
.im-btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 32px; font-size: 16px; font-weight: 500; border: 1px solid var(--im-text); background: transparent; color: var(--im-text); cursor: pointer; white-space: nowrap; }
.im-body a.im-btn:hover { color: var(--im-text); background: var(--im-bg2); }
.im-btn--primary, .im-body a.im-btn--primary { background: var(--im-point); border-color: var(--im-point); color: #fff; }
.im-body a.im-btn--primary:hover, .im-btn--primary:hover { background: #774F2B; border-color: #774F2B; color: #fff; }
.im-btn--white, .im-body a.im-btn--white { border-color: rgba(255,255,255,.8); color: #fff; }
.im-body a.im-btn--white:hover { background: rgba(255,255,255,.12); color: #fff; }
.im-btn--block { display: flex; width: 100%; }
.im-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.im-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--im-text); align-self: flex-start; }
.im-center .im-arrow, .im-intro .im-arrow { align-self: center; }

/* ---------- 헤더 ---------- */
.im-header { position: fixed; left: 0; top: 0; right: 0; z-index: 50; height: var(--im-header-h); background: #fff; border-bottom: 1px solid var(--im-line); transition: background .25s, border-color .25s; }
.im-header__inner { max-width: var(--im-max); height: 100%; margin: 0 auto; padding: 0 var(--im-gutter); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.im-logo { display: flex; align-items: center; flex: none; }
.im-logo__img { width: auto; height: 44px; }   /* 로고 가이드: 헤더 36~44px */
.im-logo .im-logo__img--white { display: none; }
.im-header--overlay:not(.is-solid) .im-logo__img { display: none; }
.im-header--overlay:not(.is-solid) .im-logo__img--white { display: block; }
.im-menu-open .im-header .im-logo__img { display: block; }
.im-menu-open .im-header .im-logo__img--white { display: none; }
.im-nav { display: flex; align-items: center; gap: 56px; }
.im-nav a { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; letter-spacing: 0.06em; border-bottom: 1.5px solid transparent; }
.im-nav a.is-active { font-weight: 700; border-bottom-color: currentColor; }
.im-header__cta { display: flex; align-items: center; height: 44px; padding: 0 22px; border: 1px solid var(--im-text); font-size: 14px; font-weight: 500; }
.im-menu-btn { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; color: var(--im-text); }
.im-menu-btn span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .2s; }
.im-menu-btn span:first-child { top: 17px; }
.im-menu-btn span:last-child { top: 26px; }
.im-menu-btn[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.im-menu-btn[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* 메인: 히어로 위에서는 투명 · 흰 글자, 스크롤하면 흰 배경 */
.im-header--overlay:not(.is-solid) { background: transparent; border-bottom-color: rgba(255,255,255,.3); }
.im-header--overlay:not(.is-solid) .im-logo,
.im-header--overlay:not(.is-solid) .im-nav a,
.im-header--overlay:not(.is-solid) .im-header__cta,
.im-header--overlay:not(.is-solid) .im-menu-btn { color: #fff; }
.im-header--overlay:not(.is-solid) .im-header__cta { border-color: #fff; }
.im-header--overlay:not(.is-solid) a:hover { color: #fff; opacity: .75; }

/* 모바일 메뉴 */
.im-mnav { position: fixed; left: 0; right: 0; top: var(--im-header-h); bottom: 0; z-index: 49; background: #fff; padding: 24px var(--im-gutter) 40px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.im-mnav[hidden] { display: none; }
.im-mnav nav { display: flex; flex-direction: column; border-top: 1px solid var(--im-text); }
.im-mnav nav a { padding: 22px 0; font-size: 22px; font-weight: 500; letter-spacing: 0.06em; border-bottom: 1px solid var(--im-line); }
.im-mnav nav a.is-active { color: var(--im-point); }
.im-menu-open { overflow: hidden; }
.im-menu-open .im-header { background: #fff; border-bottom-color: var(--im-line); }
.im-menu-open .im-header .im-logo, .im-menu-open .im-header .im-menu-btn { color: var(--im-text); }

/* ---------- 푸터 ---------- */
.im-footer { background: var(--im-bg2); border-top: 1px solid var(--im-line); padding: 80px 0 56px; }
.im-footer__top { display: flex; justify-content: space-between; gap: 64px; }
.im-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.im-footer__brand p { font-size: 14px; line-height: 1.85; color: var(--im-sub); }
.im-footer__logo { width: auto; height: 64px; align-self: flex-start; }   /* 슬로건형은 64px 이상에서만 */
.im-footer__cols { display: grid; grid-template-columns: repeat(3, auto); gap: 64px; }
.im-footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--im-sub); }
.im-footer__col strong { color: var(--im-text); }
.im-body .im-footer__col a { color: var(--im-sub); }
.im-body .im-footer__col a:hover { color: var(--im-point); }
.im-footer__bottom { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--im-line); display: flex; justify-content: space-between; gap: 32px; font-size: 13px; line-height: 1.8; color: var(--im-cap); }

/* ---------- 페이지 머리 (서브) ---------- */
.im-pagehead { padding: 120px 0 96px; }
.im-pagehead .im-wrap { display: flex; flex-direction: column; gap: 24px; }
.im-wide-img { width: 100%; max-width: var(--im-max); margin: 0 auto; height: 640px; object-fit: cover; }

/* ---------- 메인 히어로 ---------- */
.im-hero { position: relative; height: clamp(600px, 100vh, 900px); color: #fff; overflow: hidden; }
.im-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.im-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 50%, rgba(0,0,0,.5) 100%); }
.im-hero__body { position: absolute; left: 0; right: 0; bottom: 96px; z-index: 1; }
.im-hero__body .im-wrap { display: flex; flex-direction: column; gap: 28px; }
.im-hero__title { font-size: 60px; font-weight: 500; line-height: 1.32; letter-spacing: -0.02em; color: #fff; }
.im-hero__sub { font-size: 18px; line-height: 1.8; color: rgba(255,255,255,.92); }

/* ---------- 레이아웃 조각 ---------- */
.im-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; }
.im-head-row .im-p { max-width: 520px; }
.im-split { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; }
.im-split--4-8 { grid-template-columns: 4fr 8fr; }
.im-split--7-5 { grid-template-columns: 7fr 5fr; gap: 96px; }
.im-grid { display: grid; gap: 24px; }
.im-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.im-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.im-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.im-gap-l { gap: 48px; }
.im-gap-xl { gap: 80px; }

/* 이미지 + 텍스트 반반 (메인 Product) */
.im-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--im-max); margin: 0 auto; }
.im-feature__img { width: 100%; height: 860px; object-fit: cover; }
.im-feature__body { padding: 0 120px; display: flex; flex-direction: column; justify-content: center; gap: 32px; background: var(--im-bg2); }
.im-feature__title { font-size: 52px; font-weight: 500; line-height: 1.38; letter-spacing: -0.02em; }

/* 木理 → 理木 */
.im-mark { font-size: 72px; font-weight: 300; letter-spacing: 0.12em; }
.im-intro { display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; }
.im-intro .im-h2 { font-size: 32px; }
.im-intro .im-p { max-width: 760px; }

/* 사양 (키 : 값) */
.im-spec { border-top: 1px solid var(--im-text); }
.im-spec__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--im-line); font-size: 16px; }
.im-spec--k100 .im-spec__row { grid-template-columns: 100px minmax(0, 1fr); }
.im-spec--k160 .im-spec__row { grid-template-columns: 160px minmax(0, 1fr); padding: 20px 0; }
.im-spec__row > :first-child { color: var(--im-sub); }
.im-spec__row > :last-child { font-variant-numeric: tabular-nums; }

/* 스와치 · 사례 카드 */
.im-card { display: flex; flex-direction: column; gap: 16px; color: var(--im-text); }
.im-card__img { width: 100%; aspect-ratio: 41 / 42; object-fit: cover; background: var(--im-ph); }
.im-card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.im-card__name { font-size: 18px; font-weight: 500; }
.im-card__sub { font-size: 14px; color: var(--im-sub); }
.im-swatches { gap: 56px 24px; }

/* 숫자 강조 (0.5mm 등) */
.im-stat { display: flex; flex-direction: column; gap: 12px; padding: 40px 0; border-top: 1px solid var(--im-text); }
.im-stat__num { font-variant-numeric: tabular-nums; }
.im-stat__num b { font-size: 64px; font-weight: 300; letter-spacing: -0.02em; }
.im-stat__num small { font-size: 22px; margin-left: 4px; }
.im-stat__label { font-size: 15px; color: var(--im-sub); }
.im-stats { gap: 32px; }

/* 윗선 있는 항목 (하지 않는 것, 01~04 등) */
.im-item { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; border-top: 1px solid var(--im-text); }
.im-item__no { font-size: 15px; color: var(--im-point); font-variant-numeric: tabular-nums; }

/* 메인 시공 사례 (큰 1 + 작은 2) */
.im-cases { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }
.im-cases__side { display: flex; flex-direction: column; gap: 24px; }
.im-cases .im-card__img { aspect-ratio: auto; height: 720px; }
.im-cases__side .im-card__img { height: 330px; }
.im-case-title { font-size: 17px; font-weight: 500; }
.im-case-title span { color: var(--im-sub); font-weight: 400; }

/* 불리한 것 목록 (제목 : 설명) */
.im-rows { border-top: 1px solid var(--im-text); }
.im-rows__row { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--im-line); }
.im-rows__row > :first-child { font-size: 19px; font-weight: 500; }

/* 표 — 상단 검정선 + 회색 구분선 */
.im-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.im-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--im-text); }
.im-table th, .im-table td { padding: 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--im-line); font-size: 16px; line-height: 1.7; }
.im-table th { padding: 16px 20px; font-size: 14px; font-weight: 500; color: var(--im-sub); }
.im-table td { color: var(--im-sub); font-size: 15px; }
.im-table td.im-td-strong { font-weight: 700; color: var(--im-text); font-size: 16px; font-variant-numeric: tabular-nums; }
.im-table td.is-ok { color: var(--im-point); font-weight: 700; font-size: 16px; }
.im-table td.is-mid { color: var(--im-sub); font-weight: 700; font-size: 16px; }
.im-table td.is-bad { color: var(--im-bad); font-weight: 700; font-size: 16px; }
.im-table td.is-tbd { color: #9A9A9A; font-size: 14px; }
.im-table td.im-td-point { color: var(--im-point); font-weight: 700; font-size: 16px; }
.im-table-title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.im-table-title span { font-size: 14px; color: var(--im-sub); }

/* 컬러 그룹 (Product) */
.im-cgroup { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; padding: 56px 0; border-top: 1px solid var(--im-line); }
.im-cgroup .im-card__img { aspect-ratio: auto; height: 440px; }
.im-cgroup .im-card { gap: 14px; }

/* 이미지 자리 (사진 준비 전) */
.im-ph { background: var(--im-ph); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--im-sub); text-align: center; padding: 24px; }

/* ---------- Project ---------- */
.im-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.im-filter button { height: 44px; padding: 0 22px; border: 1px solid var(--im-line); background: #fff; color: var(--im-text); font-size: 14px; cursor: pointer; }
.im-filter button:hover { border-color: var(--im-text); }
.im-filter button[aria-pressed="true"] { background: var(--im-text); border-color: var(--im-text); color: #fff; }
.im-projects { gap: 72px 24px; }
.im-projects .im-card { gap: 18px; }
.im-projects .im-card__img { aspect-ratio: 628 / 560; }
.im-projects h3 { font-size: 20px; font-weight: 500; }
.im-projects [hidden] { display: none; }
.im-empty { padding: 80px 0; text-align: center; color: var(--im-sub); border-top: 1px solid var(--im-line); }

/* ---------- Contact ---------- */
.im-form { display: flex; flex-direction: column; gap: 44px; }
.im-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.im-form legend { font-size: 15px; font-weight: 500; margin-bottom: 14px; padding: 0; }
.im-req { color: var(--im-point); }
.im-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.im-choice label { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 18px; border: 1px solid var(--im-line); font-size: 15px; cursor: pointer; }
.im-choice label:has(input:checked) { border-color: var(--im-text); }
.im-body input[type="radio"], .im-body input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--im-point); flex: none; }
.im-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.im-field { display: flex; flex-direction: column; gap: 10px; }
.im-field label { font-size: 15px; font-weight: 500; }
.im-field input { height: 56px; padding: 0; border: 0; border-bottom: 1px solid var(--im-input); border-radius: 0; background: transparent; font-size: 16px; color: var(--im-text); }
.im-field input:focus { outline: none; border-bottom-color: var(--im-text); }
.im-field textarea { height: 160px; padding: 16px; border: 1px solid var(--im-input); border-radius: 0; background: transparent; font-size: 16px; line-height: 1.7; color: var(--im-text); resize: vertical; }
.im-field textarea:focus { outline: none; border-color: var(--im-text); }
.im-field .is-invalid, .im-choice.is-invalid label { border-color: var(--im-bad); }
.im-agree { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--im-bg2); }
.im-agree.is-invalid { outline: 1px solid var(--im-bad); }
.im-agree label { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; cursor: pointer; }
.im-agree p { font-size: 13px; line-height: 1.75; color: var(--im-sub); }
.im-submit { height: 64px; background: var(--im-text); color: #fff; border: 0; font-size: 17px; font-weight: 500; cursor: pointer; }
.im-submit:hover { background: #333; }
.im-submit:disabled { background: #999; cursor: default; }
.im-form-msg { padding: 20px 24px; font-size: 15px; line-height: 1.7; }
.im-form-msg--ok { background: var(--im-bg2); border-top: 1px solid var(--im-point); }
.im-form-msg--err { background: #FBEFEE; color: var(--im-bad); }
.im-form-msg[hidden] { display: none; }
.im-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.im-aside { display: flex; flex-direction: column; gap: 64px; }
.im-staff { border-top: 1px solid var(--im-text); }
.im-staff__row { display: flex; flex-direction: column; gap: 8px; padding: 28px 0; border-bottom: 1px solid var(--im-line); }
.im-staff__row small { font-size: 14px; color: var(--im-sub); }
.im-staff__row strong { font-size: 20px; font-weight: 500; }
.im-staff__row strong span { font-size: 15px; font-weight: 400; color: var(--im-sub); }
.im-steps { border-top: 1px solid var(--im-text); }
.im-steps__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--im-line); font-size: 15px; }
.im-steps__row > :first-child { color: var(--im-point); font-variant-numeric: tabular-nums; }
.im-box { display: flex; flex-direction: column; gap: 12px; padding: 32px; background: var(--im-bg2); }
.im-map { height: 480px; }
.im-addr { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; }
.im-addr span:last-child { color: var(--im-sub); }

/* ---------- About ---------- */
.im-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.im-names > div { display: flex; flex-direction: column; gap: 20px; }
.im-names > div:first-child { padding-right: 80px; border-right: 1px solid var(--im-line); }
.im-names > div:last-child { padding-left: 80px; }
.im-names__han { font-size: 96px; font-weight: 300; letter-spacing: 0.1em; line-height: 1.1; }
.im-names__label { font-size: 15px; color: var(--im-sub); }
.im-names__ko { font-size: 20px; font-weight: 500; }
.im-quote { font-size: 24px; font-weight: 500; line-height: 1.6; color: var(--im-text); }

/* 페이지별 조각 */
.im-pb32 { padding-bottom: 32px; }
.im-mb8 { margin-bottom: 8px !important; }
.im-mb16 { margin-bottom: 16px !important; }
.im-h3--l { font-size: 24px; }
.im-h3--s { font-size: 20px; }
.im-about-photo { height: 560px; }
.im-table--judge th:nth-child(1) { width: 120px; }
.im-table--judge th:nth-child(2) { width: 220px; }
.im-table--kv td:first-child { width: 160px; }
.im-table--warranty th:nth-child(1) { width: 160px; }
.im-table--warranty th:nth-child(2) { width: 140px; }
.im-table--wide th:first-child { width: 180px; }
.im-more { display: flex; justify-content: center; }
.im-more[hidden] { display: none; }
.im-btn--more { height: 56px; padding: 0 48px; font-size: 15px; font-weight: 400; background: #fff; }
.im-btn--more:hover { background: var(--im-bg2); }

/* 그누보드 화면(게시판 · 로그인)에 두르는 헤더 · 푸터 */
.im-chrome { display: contents; }
.im-gnu { padding: calc(var(--im-header-h) + 48px) 0 96px; min-height: 60vh; }
.im-gnu__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.im-gnu-body #hd_login_msg { position: fixed; right: 12px; bottom: 12px; z-index: 60; }

/* ========== 태블릿 ========== */
@media (max-width: 1200px) {
    :root { --im-gutter: 48px; --im-sec: 160px; --im-sec-s: 120px; }
    .im-nav { gap: 36px; }
    .im-feature__body { padding: 80px 64px; }
    .im-feature__img { height: 720px; }
    .im-rows__row { grid-template-columns: 260px minmax(0, 1fr); }
    .im-cgroup { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
    .im-footer__cols { gap: 40px; }
}

@media (max-width: 1024px) {
    :root { --im-gutter: 40px; --im-sec: 120px; --im-sec-s: 96px; --im-header-h: 72px; }
    .im-nav, .im-header__cta { display: none; }
    .im-menu-btn { display: block; }
    .im-logo__img { height: 38px; }

    .im-h1, .im-hero__title { font-size: 44px; }
    .im-h2, .im-h2--l { font-size: 34px; }
    .im-h2--m { font-size: 32px; }
    .im-feature__title { font-size: 40px; }
    .im-mark { font-size: 56px; }
    .im-names__han { font-size: 72px; }
    .im-stat__num b { font-size: 52px; }

    .im-pagehead { padding: 80px 0 64px; }
    .im-wide-img { height: 480px; }
    .im-hero__body { bottom: 72px; }

    .im-split, .im-split--4-8, .im-split--7-5 { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .im-feature { grid-template-columns: minmax(0, 1fr); }
    .im-feature__img { height: auto; aspect-ratio: 4 / 3; }
    .im-feature__body { padding: 80px var(--im-gutter); }
    .im-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .im-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .im-stats { gap: 0 32px; }
    .im-cases .im-card__img { height: 520px; }
    .im-cases__side .im-card__img { height: 236px; }
    .im-cgroup { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 48px 0; }
    .im-cgroup .im-card__img { height: auto; aspect-ratio: 1 / 1; }
    .im-names > div:first-child { padding-right: 40px; }
    .im-names > div:last-child { padding-left: 40px; }
    .im-rows__row { grid-template-columns: 220px minmax(0, 1fr); }
    .im-map { height: 360px; }

    .im-footer__top { flex-direction: column; gap: 48px; }
    .im-g64, .im-g72 { gap: 56px; }
}

/* ========== 모바일 ========== */
@media (max-width: 640px) {
    :root { --im-gutter: 20px; --im-sec: 88px; --im-sec-s: 72px; --im-header-h: 64px; }
    .im-body { font-size: 15px; }
    .im-logo__img { height: 36px; }
    .im-g56, .im-g64, .im-g72 { gap: 40px; }
    .im-g40 { gap: 28px; }
    .im-sec--pt80 { padding-top: 40px; }

    .im-h1 { font-size: 32px; }
    .im-hero__title { font-size: 30px; }
    .im-h2, .im-h2--l, .im-h2--m { font-size: 26px; }
    .im-intro .im-h2 { font-size: 22px; }
    .im-h3 { font-size: 19px; }
    .im-feature__title { font-size: 32px; }
    .im-mark { font-size: 40px; letter-spacing: 0.08em; }
    .im-names__han { font-size: 56px; }
    .im-lead, .im-hero__sub { font-size: 16px; }
    .im-p { font-size: 15px; }
    .im-quote { font-size: 19px; }
    .im-stat { padding: 28px 0; }
    .im-stat__num b { font-size: 40px; }
    .im-stat__num small { font-size: 17px; }
    .im-br-pc { display: none; }

    .im-hero { height: 100svh; min-height: 560px; max-height: 760px; }
    .im-hero__body { bottom: 48px; }
    .im-hero__body .im-wrap { gap: 20px; }
    .im-hero .im-btns { flex-direction: column; }
    .im-hero .im-btn { width: 100%; }
    .im-btn { height: 52px; padding: 0 24px; font-size: 15px; }

    .im-pagehead { padding: 56px 0 40px; }
    .im-pagehead .im-wrap { gap: 16px; }
    .im-wide-img { height: 280px; }
    .im-head-row { flex-direction: column; align-items: flex-start; gap: 24px; }
    .im-feature__body { padding: 64px var(--im-gutter); gap: 24px; }
    .im-feature__img { aspect-ratio: 1 / 1; }
    .im-grid--2, .im-grid--3, .im-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .im-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
    .im-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
    .im-swatches .im-card__meta { flex-direction: column; gap: 2px; }
    .im-swatches .im-card__name { font-size: 16px; }
    .im-swatches .im-card__sub { font-size: 13px; }
    .im-gap-l, .im-gap-xl { gap: 40px; }
    .im-cases { grid-template-columns: minmax(0, 1fr); }
    .im-cases .im-card__img, .im-cases__side .im-card__img { height: auto; aspect-ratio: 4 / 3; }
    .im-cgroup .im-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .im-cgroup .im-card__meta { flex-direction: column; gap: 2px; }
    .im-projects { gap: 48px; }
    .im-rows__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
    .im-rows__row > :first-child { font-size: 17px; }
    .im-spec__row, .im-spec--k160 .im-spec__row { grid-template-columns: 96px minmax(0, 1fr); font-size: 15px; }
    .im-names { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .im-names > div:first-child { padding: 0 0 48px; border-right: 0; border-bottom: 1px solid var(--im-line); }
    .im-names > div:last-child { padding: 0; }
    .im-table th, .im-table td { padding: 14px 12px; font-size: 14px; }
    .im-table td.im-td-strong, .im-table td.is-ok, .im-table td.is-mid, .im-table td.is-bad { font-size: 15px; }
    .im-table--wide { min-width: 640px; }
    .im-choice, .im-fields { grid-template-columns: minmax(0, 1fr); }
    .im-fields { gap: 28px; }
    .im-form { gap: 36px; }
    .im-aside { gap: 48px; }
    .im-box { padding: 24px; }
    .im-map { height: 240px; }
    .im-about-photo { height: 320px; }
    .im-addr { flex-direction: column; gap: 4px; font-size: 15px; }

    .im-footer { padding: 56px 0 40px; }
    .im-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
    .im-footer__bottom { flex-direction: column; gap: 12px; margin-top: 40px; }
}