/* 집팔고360H - 공통 스타일 (헤더, 버튼, 카드, 폼, 레이아웃, 뱃지, 모달, 접근성) */ @import url('tokens.css?v=20260908v5'); *, *::before, *::after{ box-sizing:border-box; } html, body{ height:100%; } html{ /* 8-4: 스크롤 기능 유지 + 스크롤바 UI 비표시 */ scrollbar-width:none; -ms-overflow-style:none; } html::-webkit-scrollbar{ display:none; width:0; height:0; } body{ margin:0; font-family:var(--font-sans); color:var(--ink-900); background:var(--white); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; /* 8-3 방지선 - 근본 원인은 각 컴포넌트에서 max-width:100% 등으로 관리 */ } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } input, select, textarea{ font-family:inherit; font-size:inherit; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3,h4,p{ margin:0; } /* 어디서나 스크롤바 숨김 + 스크롤 유지가 필요한 컨테이너용 유틸 */ .no-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; } .no-scrollbar::-webkit-scrollbar{ display:none; width:0; height:0; } /* 접근성: 키보드 포커스 표시는 유지 (9-1) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ============ 아이콘 (디자인지침 2-2: 이모지 → Lucide SVG 스프라이트) ============ */ .icon{ width:1.3em; height:1.3em; display:inline-block; flex-shrink:0; vertical-align:-0.25em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .icon-dot, .icon-star-filled, .icon.is-filled{ fill:currentColor; stroke:none; } .icon.is-liked{ color:var(--color-primary); } .icon-lg{ width:28px; height:28px; } .icon-xl{ width:40px; height:40px; } .icon-sm{ width:16px; height:16px; } /* ============ 버튼 ============ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); height:44px; padding:0 var(--sp-5); border-radius:var(--radius-md); border:1px solid transparent; font-size:15px; font-weight:700; white-space:nowrap; transition:background-color .15s ease, border-color .15s ease, opacity .15s ease; } .btn:disabled{ opacity:.45; cursor:not-allowed; } .btn-lg{ height:54px; font-size:16px; padding:0 var(--sp-6); border-radius:var(--radius-md); } .btn-sm{ height:36px; font-size:13px; padding:0 var(--sp-4); border-radius:var(--radius-sm); } .btn-block{ width:100%; } .btn-primary{ background:var(--color-primary); color:var(--white); } .btn-primary:hover{ background:var(--color-primary-dark); } .btn-primary:active{ background:var(--color-primary-darker); } .btn-outline{ background:var(--white); color:var(--color-primary); border-color:var(--color-primary); } .btn-outline:hover{ background:var(--color-primary-lighter); } .btn-ghost{ background:var(--white); color:var(--ink-700); border-color:var(--ink-200); } .btn-ghost:hover{ background:var(--ink-50); } .btn-neutral{ background:var(--ink-900); color:var(--white); } .btn-neutral:hover{ background:var(--ink-800); } .btn-text{ height:auto; padding:0; background:none; color:var(--color-primary); font-weight:600; } /* ============ 카드 / 패널 ============ */ .card{ background:var(--white); border:1px solid var(--ink-200); border-radius:var(--radius-lg); padding:var(--sp-5); } .card-flat{ background:var(--ink-50); border:1px solid var(--ink-150); border-radius:var(--radius-lg); padding:var(--sp-5); } .card-accent{ background:var(--color-primary-lighter); border:1px solid var(--color-primary-light); border-radius:var(--radius-lg); padding:var(--sp-5); } /* ============ 뱃지 / 태그 ============ */ .badge{ display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 10px; border-radius:var(--radius-pill); font-size:12px; font-weight:700; white-space:nowrap; } .badge-coming{ background:var(--ink-100); color:var(--ink-500); font-weight:600; } .badge-primary{ background:var(--color-primary); color:var(--white); } .badge-primary-soft{ background:var(--color-primary-light); color:var(--color-primary-dark); } .badge-success{ background:var(--color-secondary-bg); color:var(--color-secondary-ink); border:1px solid var(--color-secondary-border); } .badge-warning{ background:var(--color-warning-bg); color:var(--color-warning); } .badge-info{ background:var(--color-info-bg); color:var(--color-info); } .badge-neutral{ background:var(--ink-100); color:var(--ink-600); } .badge-locked{ background:var(--ink-100); color:var(--ink-400); } /* ============ 폼 ============ */ .field{ margin-bottom:var(--sp-5); } .field:last-child{ margin-bottom:0; } .field-label{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--ink-900); margin-bottom:8px; } .field-label .req{ color:var(--color-primary); font-weight:700; } .field-label .opt{ color:var(--ink-400); font-weight:500; font-size:12px; } .field-hint{ font-size:12px; color:var(--ink-500); margin-top:6px; } .input, .select, .textarea{ width:100%; height:48px; padding:0 var(--sp-4); border:1px solid var(--ink-300); border-radius:var(--radius-md); background:var(--white); color:var(--ink-900); font-size:15px; } .input::placeholder, .textarea::placeholder{ color:var(--ink-400); } .input:focus, .select:focus, .textarea:focus{ border-color:var(--color-primary); } .textarea{ height:auto; min-height:96px; padding:var(--sp-3) var(--sp-4); resize:vertical; } .select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%237C838A' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; } .input-row{ display:flex; gap:var(--sp-3); } .input-row > *{ flex:1; min-width:0; } /* 세그먼트(토글형) 선택 버튼 그룹 - 거래방식/방향 등 */ .seg{ display:flex; gap:var(--sp-2); flex-wrap:wrap; } .seg-btn{ flex:1; min-width:80px; height:48px; border:1px solid var(--ink-300); border-radius:var(--radius-md); background:var(--white); color:var(--ink-700); font-weight:600; font-size:14px; transition:all .15s ease; } .seg-btn.is-active{ border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-lighter); } /* 태그(다중선택) - 옵션/시설 등 */ .tag-group{ display:flex; gap:var(--sp-2); flex-wrap:wrap; } .tag-btn{ height:38px; padding:0 var(--sp-3); border:1px solid var(--ink-300); border-radius:var(--radius-sm); background:var(--white); color:var(--ink-700); font-size:13px; font-weight:600; } .tag-btn.is-active{ border-color:var(--color-primary); color:var(--white); background:var(--color-primary); } /* 체크박스/라디오 카드 */ .choice-card{ display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-4); border:1px solid var(--ink-300); border-radius:var(--radius-md); cursor:pointer; transition:all .15s ease; background:var(--white); } .choice-card.is-active{ border-color:var(--color-primary); background:var(--color-primary-lighter); } .choice-card + .choice-card{ margin-top:var(--sp-3); } .choice-card__radio{ width:20px; height:20px; border-radius:50%; border:2px solid var(--ink-300); flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; } .choice-card.is-active .choice-card__radio{ border-color:var(--color-primary); } .choice-card.is-active .choice-card__radio::after{ content:''; width:10px; height:10px; border-radius:50%; background:var(--color-primary); } .choice-card__body{ flex:1; min-width:0; } .choice-card__title{ font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .choice-card__desc{ font-size:13px; color:var(--ink-500); margin-top:2px; } /* 체크박스 인라인 */ .check-row{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink-700); } .check-row input[type=checkbox]{ width:18px; height:18px; margin-top:1px; accent-color:var(--color-primary); flex-shrink:0; } /* ============ 진행 표시 ============ */ .progress-bar{ height:6px; background:var(--ink-150); border-radius:var(--radius-pill); overflow:hidden; } .progress-bar__fill{ height:100%; background:var(--color-primary); border-radius:var(--radius-pill); transition:width .25s ease; } .stepper{ display:flex; align-items:center; gap:0; } .stepper__step{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; } .stepper__dot{ width:28px; height:28px; border-radius:50%; background:var(--ink-150); color:var(--ink-500); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; } .stepper__step.is-done .stepper__dot{ background:var(--color-secondary); color:var(--color-secondary-ink); } .stepper__step.is-active .stepper__dot{ background:var(--color-primary); color:var(--white); } .stepper__label{ font-size:12px; color:var(--ink-500); font-weight:600; } .stepper__step.is-active .stepper__label{ color:var(--ink-900); } .stepper__line{ flex:1; height:2px; background:var(--ink-150); margin:0 -4px; align-self:flex-start; margin-top:13px; } .stepper__line.is-done{ background:var(--color-secondary); } .timeline{ display:flex; flex-direction:column; gap:0; } .timeline__item{ display:flex; gap:var(--sp-3); position:relative; padding-bottom:var(--sp-5); } .timeline__item:last-child{ padding-bottom:0; } .timeline__item::before{ content:''; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--ink-150); } .timeline__item:last-child::before{ display:none; } .timeline__dot{ width:28px; height:28px; border-radius:50%; background:var(--ink-150); color:var(--ink-500); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; z-index:1; } .timeline__item.is-done .timeline__dot{ background:var(--color-secondary); color:var(--color-secondary-ink); } .timeline__item.is-active .timeline__dot{ background:var(--color-primary); color:var(--white); } .timeline__body{ padding-top:2px; } .timeline__title{ font-weight:700; font-size:14px; } .timeline__desc{ font-size:13px; color:var(--ink-500); margin-top:2px; } /* ============ 알림 박스 ============ */ .notice{ display:flex; gap:8px; align-items:flex-start; padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-md); font-size:13px; line-height:1.5; } .notice-info{ background:var(--color-info-bg); color:var(--ink-700); } .notice-success{ background:var(--color-secondary-bg); color:var(--color-secondary-ink); } .notice-warning{ background:var(--color-warning-bg); color:#8A5416; } /* ============ 빈 상태 ============ */ .empty-state{ text-align:center; padding:var(--sp-10) var(--sp-4); color:var(--ink-500); } .empty-state__icon{ font-size:40px; margin-bottom:var(--sp-3); } .empty-state__title{ font-size:16px; font-weight:700; color:var(--ink-800); margin-bottom:6px; } .empty-state__desc{ font-size:13px; } /* ============ 매물 카드 (리스트용) ============ */ .listing-card{ display:flex; gap:var(--sp-3); padding:var(--sp-3); border:1px solid transparent; border-radius:var(--radius-md); } .listing-card:hover, .listing-card.is-active{ background:var(--ink-50); } .listing-card.is-active{ border-color:var(--color-primary); background:var(--color-primary-lighter); } .listing-card__thumb{ width:96px; height:96px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; background:var(--ink-150); } .listing-card__body{ flex:1; min-width:0; } .listing-card__type{ font-size:12px; color:var(--ink-500); } .listing-card__name{ font-size:15px; font-weight:700; margin-top:2px; } .listing-card__price{ font-size:15px; font-weight:800; color:var(--color-primary); margin-top:2px; } .listing-card__meta{ font-size:12px; color:var(--ink-500); margin-top:4px; } .listing-card__badges{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; } /* ============ 헤더 ============ */ /* 2026-09-07: 상단 로고/탭/로그인버튼/햄버거버튼 자리는 공용 GNB(zip360.kr/shared/gnb-v1.css, .top-header 이하 클래스)가 그린다 — 여기선 그 바깥 sticky 래퍼와, 그 아래 서비스별 서브탭 줄만 관리. .zp-icon-btn은 헤더 전용이 아니라 관심매물 하트버튼 등에서도 재사용 중이라 유지. */ .zp-header{ position:sticky; top:0; z-index:var(--z-header); background:var(--white); border-bottom:1px solid var(--ink-150); } .zp-icon-btn{ position:relative; width:36px; height:36px; border-radius:50%; border:none; background:transparent; display:flex; align-items:center; justify-content:center; color:var(--ink-800); } .zp-icon-btn:hover{ background:var(--ink-100); } .zp-header__sub{ height:var(--subheader-h); padding:0 var(--sp-6); display:flex; align-items:center; gap:var(--sp-6); overflow-x:auto; } .zp-header__sub::-webkit-scrollbar{ display:none; } .zp-subtabs{ display:flex; align-items:center; gap:var(--sp-6); flex-shrink:0; } .zp-subtab{ font-size:15px; font-weight:600; color:var(--ink-600); padding:14px 0; border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:4px; } .zp-subtab.is-active{ color:var(--color-primary); font-weight:800; border-bottom-color:var(--color-primary); } .zp-subtab.is-locked{ color:var(--ink-400); } .zp-subtab .lock-hint{ font-size:11px; color:var(--ink-400); font-weight:500; } /* 헤더 내부 요소가 좁아질 때도 줄바꿈 없이 스크롤되도록 (8-3 가로스크롤 대응은 페이지 자체가 아닌 nav 내부로 국한) */ /* ============ 3단 레이아웃(서비스 내부 목록/지도형) ============ */ .zp-layout{ display:flex; align-items:stretch; min-height:calc(100vh - var(--header-h) - var(--subheader-h)); } .zp-panel-left{ width:var(--panel-left-w); flex-shrink:0; border-right:1px solid var(--ink-150); padding:var(--sp-5); overflow-y:auto; } .zp-panel-center{ width:var(--panel-center-w); flex-shrink:0; border-right:1px solid var(--ink-150); overflow-y:auto; } .zp-panel-center-inner{ padding:var(--sp-5); } .zp-map-pane{ flex:1; min-width:0; position:relative; background:var(--ink-100); } /* 지도 목업(실 지도 API 연동 전 placeholder) */ .zp-map-mock{ position:absolute; inset:0; overflow:hidden; } .zp-map-bg{ position:absolute; inset:0; background-color:#EAF0EC; background-image: linear-gradient(135deg, transparent 0 38%, #CFE3F5 38% 58%, transparent 58% 100%), repeating-linear-gradient(0deg, rgba(255,255,255,.9) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(255,220,150,.5) 0 2px, transparent 2px 220px), repeating-linear-gradient(90deg, rgba(255,220,150,.5) 0 2px, transparent 2px 260px); } .zp-map-search{ position:absolute; top:var(--sp-4); left:var(--sp-4); right:var(--sp-4); z-index:5; } .zp-map-search-bar{ display:flex; gap:8px; background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:6px; } .zp-map-search-bar input{ flex:1; border:none; outline:none; padding:0 var(--sp-3); font-size:14px; background:transparent; } .zp-map-search-bar button{ width:44px; height:44px; border-radius:var(--radius-sm); border:none; background:var(--color-primary); color:var(--white); flex-shrink:0; } .zp-map-filters{ display:flex; gap:8px; margin-top:8px; overflow-x:auto; } .zp-map-filters::-webkit-scrollbar{ display:none; } .zp-filter-chip{ flex-shrink:0; height:38px; padding:0 var(--sp-3); border-radius:var(--radius-sm); background:var(--white); border:1px solid var(--ink-200); font-size:13px; font-weight:600; color:var(--ink-700); box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:4px; white-space:nowrap; } .zp-map-controls{ position:absolute; right:var(--sp-4); top:120px; z-index:5; display:flex; flex-direction:column; gap:8px; } .zp-map-ctrl-btn{ width:52px; padding:8px 0; border-radius:var(--radius-sm); background:var(--white); border:1px solid var(--ink-200); box-shadow:var(--shadow-sm); font-size:11px; color:var(--ink-600); font-weight:700; text-align:center; } .zp-map-ctrl-btn.is-active{ background:var(--color-primary); color:var(--white); border-color:var(--color-primary); } .zp-map-pin{ position:absolute; width:40px; height:40px; transform:translate(-50%,-100%); color:var(--color-primary); } .zp-map-price-tag{ position:absolute; transform:translate(-50%,-100%); background:var(--white); border:1px solid var(--ink-200); box-shadow:var(--shadow-sm); border-radius:var(--radius-sm); padding:6px 10px; font-size:12px; font-weight:800; white-space:nowrap; } .zp-map-price-tag.is-primary{ background:var(--color-primary); color:var(--white); border-color:var(--color-primary); } /* 모바일: 목록/지도 토글 */ .zp-mobile-view-toggle{ display:none; } /* 경량지침 5.6: 모달/메뉴 열린 동안 배경 스크롤 잠금 (html+body 둘 다) */ html.zp-scroll-locked, body.zp-scroll-locked{ overflow:hidden !important; height:100%; } /* ============ 슬라이드 메뉴(햄버거) ============ */ .zp-menu-overlay{ position:fixed; inset:0; background:rgba(15,17,20,.4); z-index:var(--z-menu); opacity:0; pointer-events:none; transition:opacity .2s ease; } .zp-menu-overlay.is-open{ opacity:1; pointer-events:auto; } .zp-menu-panel{ position:fixed; top:0; right:0; bottom:0; width:360px; max-width:88vw; background:var(--white); z-index:calc(var(--z-menu) + 1); transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; overflow-y:auto; } .zp-menu-panel.is-open{ transform:translateX(0); } .zp-menu-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-5); border-bottom:1px solid var(--ink-150); } .zp-menu-title{ font-size:17px; font-weight:800; } .zp-menu-close{ width:32px; height:32px; border:none; background:transparent; font-size:18px; color:var(--ink-500); } .zp-menu-profile{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-5); border-bottom:1px solid var(--ink-150); } .zp-menu-avatar{ width:48px; height:48px; border-radius:50%; background:var(--ink-150); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--ink-500); flex-shrink:0; } .zp-menu-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--ink-150); } .zp-menu-stat{ text-align:center; } .zp-menu-stat b{ display:block; font-size:17px; font-weight:800; } .zp-menu-stat span{ font-size:11px; color:var(--ink-500); } .zp-menu-section{ padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--ink-150); } .zp-menu-section-title{ font-size:12px; font-weight:800; color:var(--ink-400); margin-bottom:8px; letter-spacing:.02em; } .zp-menu-link{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; font-size:15px; font-weight:600; color:var(--ink-800); } .zp-menu-link .zp-menu-link-left{ display:flex; align-items:center; gap:10px; } .zp-menu-link .badge-coming{ margin-left:6px; } .zp-menu-foot{ padding:var(--sp-5); margin-top:auto; } .zp-menu-version{ text-align:center; font-size:11px; color:var(--ink-400); padding:var(--sp-4); } /* ============ 모달 ============ */ .zp-modal-overlay{ position:fixed; inset:0; background:rgba(15,17,20,.5); z-index:var(--z-modal); display:none; align-items:center; justify-content:center; padding:var(--sp-4); } .zp-modal-overlay.is-open{ display:flex; } .zp-modal{ width:100%; max-width:520px; max-height:88vh; overflow-y:auto; background:var(--white); border-radius:var(--radius-lg); padding:var(--sp-6); box-shadow:var(--shadow-lg); } .zp-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:var(--sp-4); } .zp-modal-title{ font-size:19px; font-weight:800; } .zp-modal-close{ width:28px; height:28px; border:none; background:transparent; font-size:18px; color:var(--ink-500); flex-shrink:0; } /* ============ 토스트 ============ */ .zp-toast{ position:fixed; left:50%; bottom:32px; transform:translate(-50%,20px); background:var(--ink-900); color:var(--white); padding:12px 20px; border-radius:var(--radius-md); font-size:14px; font-weight:600; z-index:var(--z-toast); opacity:0; pointer-events:none; transition:all .2s ease; } .zp-toast.is-open{ opacity:1; transform:translate(-50%,0); } /* ============ 푸터 ============ */ .zp-footer{ background:var(--ink-50); border-top:1px solid var(--ink-150); padding:var(--sp-10) var(--sp-6) var(--sp-8); } .zp-footer__top{ display:flex; flex-wrap:wrap; gap:var(--sp-8); max-width:1200px; margin:0 auto; padding-bottom:var(--sp-6); border-bottom:1px solid var(--ink-150); } .zp-footer__brand{ font-size:18px; font-weight:800; color:var(--ink-800); } .zp-footer__links{ display:flex; gap:var(--sp-5); flex-wrap:wrap; font-size:13px; color:var(--ink-600); font-weight:600; } .zp-footer__links a:hover{ color:var(--ink-900); } .zp-footer__biz{ max-width:1200px; margin:var(--sp-5) auto 0; font-size:12px; color:var(--ink-500); line-height:1.8; } .zp-footer__copy{ max-width:1200px; margin:var(--sp-4) auto 0; font-size:12px; color:var(--ink-400); } /* ============ 반응형 ============ */ @media (max-width: 1180px){ :root{ --panel-left-w: 340px; --panel-center-w: 420px; } } @media (max-width: 1024px){ .zp-layout{ flex-direction:column; } .zp-panel-left, .zp-panel-center{ width:100%; border-right:none; border-bottom:1px solid var(--ink-150); } .zp-map-pane{ min-height:60vh; } body.map-collapsed .zp-map-pane{ display:none; } body.map-only .zp-panel-left, body.map-only .zp-panel-center{ display:none; } body.map-only .zp-map-pane{ min-height:calc(100vh - var(--header-h) - var(--subheader-h) - 56px); } .zp-mobile-view-toggle{ display:flex; position:sticky; top:calc(var(--header-h) + var(--subheader-h)); z-index:40; background:var(--white); border-bottom:1px solid var(--ink-150); padding:10px var(--sp-4); gap:8px; } .zp-mobile-view-toggle button{ flex:1; height:38px; border-radius:var(--radius-sm); border:1px solid var(--ink-200); background:var(--white); font-weight:700; font-size:13px; } .zp-mobile-view-toggle button.is-active{ background:var(--color-primary); border-color:var(--color-primary); color:var(--white); } } @media (max-width: 720px){ .zp-header__sub{ padding:0 var(--sp-4); gap:var(--sp-4); } .zp-panel-left, .zp-panel-center-inner{ padding:var(--sp-4); } .input-row{ flex-direction:column; } .btn-lg{ height:50px; font-size:15px; } } /* ============================================================ 2026-09-08 모바일 입력 확대 방지 — 모바일 전담 세션 ------------------------------------------------------------ iOS Safari 는 입력 글자가 16px 미만이면 탭하는 순간 화면을 확대하고 그대로 두 번 다시 되돌리지 않는다. 매물등록 폼 전체가 15px 이라 모바일에서 입력할 때마다 화면이 확대되고 있었다. 데스크톱 15px 은 그대로 두고 모바일 구간에서만 16px 로 올린다. ※