/* ========================================================= Booviva 단일 테마 — 공유 스타일시트 (style.css) 모든 페이지가 이 파일 하나를 참조합니다. :root 토큰만 바꾸면 전체 사이트 톤이 일관되게 바뀝니다. 규칙 본문은 색상코드를 직접 쓰지 않고 변수만 참조합니다. 프리셋 블록은 themes.json 5색과 항상 동기화 유지. ========================================================= */ :root{ /* --- 색 토큰 (의미 단위) — 클래식 블루 단색 --- */ --color-primary: #1b4b86; --color-primary-strong: #143869; --color-primary-soft: #eaf1fa; --color-accent: #2f6db5; --color-accent-strong: #245a99; --color-recommend: #d23b34; --color-bg: #ffffff; --color-surface: #f4f6f8; --color-text: #1c2430; --color-muted: #707a86; --color-border: #dfe3e8; /* --- 상태 색 (매물 배지) --- */ --color-vacant: #1f9d57; --color-pending: #d98b1f; --color-closed: #9aa3ad; /* --- 매물 코인 (가격 라벨) --- */ --coin-bo: #69c7ed; --coin-wol: #ffbd2e; --coin-gwan: #8da8ba; /* --- 폰트 --- */ --font-heading: "Pretendard Variable", Pretendard, system-ui, sans-serif; --font-body: "Pretendard Variable", Pretendard, system-ui, sans-serif; /* --- radius (클래식: 거의 각진) --- */ --radius-sm: 2px; --radius-md: 2px; --radius-lg: 3px; --radius-pill: 999px; /* --- 그림자 (거의 없음, 보더 위주) --- */ --shadow-sm: 0 1px 2px rgba(20,40,70,.05); --shadow-md: 0 2px 8px rgba(20,40,70,.07); --shadow-lg: 0 8px 24px rgba(20,40,70,.10); /* --- 레이아웃 --- */ --maxw: 1280px; --wide-maxw: 1600px; --board-maxw: 1696px; --gutter: 24px; --header-h: 70px; /* 배너는 고정 높이가 아니라 비율로 잡는다. 16/5 는 업로드 크롭 비율(ImageUploadField aspect)과 같은 값이라, 크롭된 이미지가 어느 폭에서도 추가 잘림 없이 정확히 채워진다. 고정 높이면 화면이 넓어질수록 cover 가 좌우를 더 잘라낸다. min/max 는 클램프 — 좁은 데스크톱에서 납작해지거나 초광폭에서 첫 화면을 통째로 먹는 것을 막는다. 1600px 폭에서 정확히 500px. */ --banner-ratio: 16 / 5; --banner-h-min: 400px; --banner-h-max: 640px; /* --- 매물 카드 썸네일 비율 노브 --- */ --pcard-thumb-aspect: 4/3; } /* ========================================================= 빌더 프리셋 — 고객 커스터마이즈용 (한 속성만 바꾸면 전체 리테마) 값 정의의 단일 출처는 builder/themes.json (여기와 항상 동기화). ========================================================= */ [data-theme="navy"]{ --color-primary:#1b4b86; --color-primary-strong:#143869; --color-primary-soft:#eaf1fa; --color-accent:#2f6db5; --color-accent-strong:#245a99; --color-recommend:#d23b34; } [data-theme="forest"]{ --color-primary:#1f7a52; --color-primary-strong:#155c3d; --color-primary-soft:#e7f3ec; --color-accent:#2f9466; --color-accent-strong:#237a52; --color-recommend:#d2782b; } [data-theme="burgundy"]{ --color-primary:#8a2f3b; --color-primary-strong:#6d2530; --color-primary-soft:#f7e9eb; --color-accent:#b0454f; --color-accent-strong:#8f3540; --color-recommend:#c8881f; } [data-theme="charcoal"]{ --color-primary:#2b3138; --color-primary-strong:#1b2026; --color-primary-soft:#eef0f2; --color-accent:#5a6470; --color-accent-strong:#434c56; --color-recommend:#c2603a; } [data-theme="cobalt"]{ --color-primary:#1c50c0; --color-primary-strong:#143a8f; --color-primary-soft:#e8eefb; --color-accent:#3f6fd6; --color-accent-strong:#2f59b8; --color-recommend:#e0552f; } /* ---- 폰트 페어 프리셋 (해당 웹폰트는 레이아웃에서 로드) ---- */ [data-font="serif"]{ --font-heading:"Nanum Myeongjo", serif; --font-body:"Pretendard Variable", Pretendard, system-ui, sans-serif; } [data-font="noto"]{ --font-heading:"Noto Sans KR", system-ui, sans-serif; --font-body:"Noto Sans KR", system-ui, sans-serif; } /* ---- 모서리(radius) 성격 프리셋 ---- */ [data-corners="soft"]{ --radius-sm:6px; --radius-md:8px; --radius-lg:10px; } [data-corners="rounded"]{ --radius-sm:10px; --radius-md:14px; --radius-lg:18px; } /* ---- 배너 높이 프리셋 ---- */ /* ========================= RESET ========================= */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; word-break:keep-all; /* #recommend 풀-블리드(100vw)가 세로 스크롤바 폭만큼 가로 스크롤을 만드는 것 차단. clip 은 hidden 과 달리 스크롤 컨테이너를 만들지 않아 .rail sticky 를 깨지 않는다. */ overflow-x:clip; } h1,h2,h3,h4,h5{ font-family:var(--font-heading); line-height:1.25; margin:0; letter-spacing:-.01em; } p{ margin:0; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } img{ max-width:100%; display:block; } button{ font-family:inherit; cursor:pointer; } :focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; border-radius:4px; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:64px; } .section--tint{ background:var(--color-surface); } /* 공통 버튼 */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px; line-height:1; padding:13px 20px; border-radius:var(--radius-sm); border:1px solid transparent; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; } .btn:active{ transform:translateY(1px); } .btn--primary{ background:var(--color-primary); color:#fff; } .btn--primary:hover{ background:var(--color-primary-strong); } .btn--accent{ background:var(--color-accent); color:#fff; } .btn--accent:hover{ background:var(--color-accent-strong); } .btn--ghost,.btn--outline{ background:transparent; color:var(--color-primary); border-color:var(--color-border); } .btn--ghost:hover,.btn--outline:hover{ background:var(--color-primary-soft); border-color:var(--color-primary); } .btn--sm{ padding:9px 15px; font-size:14px; } .btn--lg{ padding:15px 26px; font-size:16px; } .btn--block{ width:100%; } /* 섹션 헤더 */ .section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; } .section__eyebrow{ color:var(--color-accent); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; } .section__title{ font-size:26px; font-weight:800; } .section__more{ color:var(--color-muted); font-weight:600; font-size:14px; white-space:nowrap; } .section__more:hover{ color:var(--color-primary); } /* ========================= HEADER (심플) ========================= */ .header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--color-border); } .header__inner{ height:var(--header-h); display:flex; align-items:center; gap:20px; } .brand{ display:flex; align-items:center; font-family:var(--font-heading); flex:none; } .brand__logo{ height:38px; width:auto; display:block; } .brand__name{ font-weight:800; font-size:20px; color:var(--color-primary); letter-spacing:-.035em; line-height:1; } .brand__name small{ display:block; font-weight:600; font-size:10px; color:var(--color-muted); letter-spacing:.16em; margin-top:6px; text-transform:uppercase; } .nav{ flex:1; display:flex; align-items:center; gap:34px; margin-left:18px; } .nav a{ font-weight:600; font-size:15.5px; color:var(--color-text); position:relative; padding:4px 0; } .nav a:hover{ color:var(--color-primary); } .nav a[aria-current="page"]{ color:var(--color-primary); } .nav a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--color-accent); } .header__cta{ display:flex; align-items:center; gap:14px; flex:none; margin-left:auto; } .header__phone{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; } .header__phone span{ font-size:11px; color:var(--color-muted); font-weight:600; } .header__phone b{ font-family:var(--font-heading); font-size:19px; color:var(--color-primary); letter-spacing:-.01em; } .hamburger{ display:none; width:42px; height:42px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg); align-items:center; justify-content:center; } .hamburger svg{ width:20px; height:20px; stroke:var(--color-text); } /* mobile drawer */ .drawer{ position:fixed; inset:0; z-index:60; display:none; } .drawer.open{ display:block; } .drawer__scrim{ position:absolute; inset:0; background:rgba(16,42,69,.45); } .drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(82vw,340px); background:var(--color-bg); box-shadow:var(--shadow-lg); padding:22px; display:flex; flex-direction:column; gap:6px; transform:translateX(100%); transition:transform .25s ease; } .drawer.open .drawer__panel{ transform:translateX(0); } .drawer__close{ align-self:flex-end; width:40px; height:40px; border:none; background:var(--color-surface); border-radius:var(--radius-sm); font-size:20px; color:var(--color-muted); } .drawer__panel a{ padding:14px 8px; font-weight:600; font-size:17px; border-bottom:1px solid var(--color-border); } .drawer__phone{ margin-top:auto; } /* ========================= BANNER (상단 배너) ========================= */ .banner{ position:relative; overflow:hidden; color:#fff; width:100%; aspect-ratio:var(--banner-ratio); min-height:var(--banner-h-min); max-height:var(--banner-h-max); display:flex; align-items:flex-end; background: var(--banner-img, none), linear-gradient(118deg, var(--color-primary-strong) 0%, var(--color-primary) 72%); background-size:cover; background-position:center; } .banner::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(13,30,49,.58) 0%, rgba(13,30,49,.22) 45%, rgba(13,30,49,.10) 100%); } .banner::after{ content:""; position:absolute; right:-8%; top:-40%; width:46%; height:180%; background:radial-gradient(closest-side, rgba(255,255,255,.10), transparent 70%); pointer-events:none; } .banner__inner{ position:relative; z-index:1; width:100%; max-width:var(--maxw); margin-inline:auto; padding:28px var(--gutter); } .banner__tag{ display:inline-flex; align-items:center; gap:9px; color:rgba(255,255,255,.85); font-weight:600; font-size:13px; letter-spacing:.02em; padding:0; margin-bottom:18px; } .banner__tag::before{ content:""; width:22px; height:1.5px; background:var(--color-accent); } .banner h1{ font-size:38px; font-weight:800; letter-spacing:-.035em; line-height:1.22; white-space:pre-line; } .banner__sub{ margin-top:16px; font-size:17px; color:rgba(255,255,255,.82); max-width:32em; } .banner__search{ margin-top:30px; } /* 배너 — 사진(이미지) 변형: 마케팅 문구가 포함된 실제 배너 이미지용 */ .banner--photo{ background:#0f2a4d var(--banner-img, none); background-size:cover; background-position:center; align-items:flex-end; } .banner--photo::before{ background:linear-gradient(to top, rgba(13,30,49,.55) 0%, rgba(13,30,49,0) 42%); } .banner--photo::after{ display:none; } /* 배너 캐러셀 — 이미지 슬라이드(자동전환·화살표·점). 슬라이드는 스택, 활성만 opacity 1. */ .banner__track{ position:absolute; inset:0; z-index:0; } .banner__slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; background:#0f2a4d var(--banner-img, none); background-size:cover; background-position:center; } .banner__slide--active{ opacity:1; } .banner__nav{ position:absolute; top:50%; z-index:2; transform:translateY(-50%); width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:none; border-radius:999px; background:rgba(13,30,49,.4); color:#fff; font-size:24px; line-height:1; cursor:pointer; transition:background .2s ease; } .banner__nav:hover{ background:rgba(13,30,49,.62); } .banner__nav--prev{ left:16px; } .banner__nav--next{ right:16px; } .banner__dots{ position:absolute; z-index:2; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:8px; } .banner__dot{ width:8px; height:8px; padding:0; border:none; border-radius:999px; background:rgba(255,255,255,.5); cursor:pointer; transition:background .2s ease; } .banner__dot--active{ background:#fff; } @media (prefers-reduced-motion: reduce){ .banner__slide{ transition:none; } } /* ========================= BOARD (가운데 콘텐츠 + 바깥쪽 레일) ========================= */ .board{ width:100%; max-width:var(--board-maxw); margin-inline:auto; display:flex; justify-content:center; align-items:flex-start; gap:20px; padding-block:30px 64px; } .board__center{ flex:1 1 auto; width:100%; max-width:var(--maxw); padding-inline:var(--gutter); min-width:0; } .board__main{ min-width:0; display:flex; flex-direction:column; gap:30px; } .rail{ width:188px; flex:0 0 188px; display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--header-h) + 16px); } /* board-layout variant="columns": 레일 고정폭·sticky 를 풀고 zone 을 범용 등폭 컬럼으로. 자유 페이지에서 좌/중/우를 동등 비중으로 쓸 때(홈 3컬럼 레일 레이아웃과 구분). */ .board--columns{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); align-items:stretch; } .board--columns > .rail{ width:auto; flex:1 1 0; position:static; } .board--columns > .board__center{ flex:1 1 0; max-width:none; padding-inline:0; } .sb{ border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg); overflow:hidden; } .sb__title{ font-size:12px; font-weight:700; color:#fff; background:var(--color-primary); letter-spacing:.04em; padding:11px 14px; } .sb__list{ padding:4px 7px 8px; } .sb__list a{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 9px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; color:var(--color-text); border-bottom:1px solid var(--color-border); } .sb__list a:last-child{ border-bottom:none; } .sb__list a:hover{ background:var(--color-surface); color:var(--color-primary); } .sb__list a::after{ content:"\203A"; color:var(--color-muted); font-size:15px; } /* 우측 레일 — 콜센터 + 상담신청 */ .callbox{ border:1px solid var(--color-border); border-radius:var(--radius-md); text-align:center; padding:18px 16px; background:var(--color-bg); } .callbox small{ font-size:11px; letter-spacing:.02em; color:var(--color-muted); font-weight:700; } .callbox b{ display:block; font-family:var(--font-heading); font-size:23px; color:var(--color-primary); letter-spacing:-.01em; margin:5px 0 4px; white-space:nowrap; } .callbox span{ font-size:12.5px; color:var(--color-muted); } .leadform{ border:1px solid var(--color-border); border-radius:var(--radius-md); background:#fff; overflow:hidden; } .leadform__head{ background:var(--color-primary); color:#fff; font-weight:700; font-size:14px; text-align:center; padding:12px; } .leadform__body{ padding:14px; display:flex; flex-direction:column; gap:9px; } .leadform input, .leadform textarea{ width:100%; padding:11px 12px; font-size:14px; font-family:inherit; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); color:var(--color-text); } .leadform input:focus, .leadform textarea:focus{ outline:none; border-color:var(--color-primary); background:var(--color-bg); } .leadform textarea{ min-height:74px; resize:vertical; line-height:1.5; } .leadform__agree{ display:flex; gap:7px; align-items:center; font-size:12px; color:var(--color-muted); } .leadform__agree input{ width:15px; height:15px; accent-color:var(--color-primary); } /* 봇 미끼 입력 — 사람에겐 보이지 않고 채워지면 서버가 거절한다. display:none 대신 화면 밖으로 밀어낸다(일부 봇은 display:none 필드를 건너뛴다). */ .leadform__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .leadform__error{ font-size:12.5px; color:var(--color-danger,#d23b34); line-height:1.5; } .leadform--done .leadform__body{ font-size:13px; color:var(--color-muted); } .leadform .btn{ width:100%; margin-top:2px; } /* 빈 상태 (매물 없음) */ .board__empty{ padding:48px 24px; text-align:center; color:var(--color-muted); background:var(--color-bg); border:1px dashed var(--color-border); border-radius:var(--radius-md); } .board__empty p{ font-size:14px; } .board__empty-sub{ font-size:12px; margin-top:6px; } /* ========================= KEYWORD SEARCH (배너 안) ========================= */ .ksearch{ display:flex; gap:9px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:8px; } .ksearch__input{ position:relative; flex:1; min-width:0; } .ksearch__input svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; stroke:var(--color-muted); } .ksearch input{ width:100%; height:50px; padding:0 16px 0 46px; font-size:16px; font-family:inherit; background:transparent; border:none; color:var(--color-text); } .ksearch input::placeholder{ color:var(--color-muted); } .ksearch input:focus{ outline:none; } .ksearch .btn{ height:50px; padding-inline:26px; flex:none; } /* ========================= ENTRY (지도검색 / 목록검색) ========================= */ .entry{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .entry__card{ display:grid; min-height:160px; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-primary-strong); box-shadow:var(--shadow-sm); transition:border-color .15s ease, box-shadow .18s ease, transform .18s ease; } .entry__card--map{ grid-template-columns:44% 56%; } .entry__card--list{ grid-template-columns:56% 44%; } .entry__card:hover{ border-color:var(--color-primary); box-shadow:var(--shadow-md); transform:translateY(-2px); } .entry__card:focus-visible{ outline:3px solid color-mix(in srgb,var(--color-primary) 34%,transparent); outline-offset:3px; } .entry__media{ min-width:0; min-height:160px; overflow:hidden; } .entry__media img{ width:100%; height:100%; display:block; object-fit:cover; transition:transform .3s ease; } .entry__card:hover .entry__media img{ transform:scale(1.035); } .entry__content{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; padding:26px 24px; background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-strong) 100%); color:#fff; } .entry__text{ min-width:0; } .entry__card h3{ font-family:var(--font-heading); font-size:20px; font-weight:800; letter-spacing:-.02em; } .entry__card p{ max-width:24em; margin-top:7px; color:rgba(255,255,255,.75); font-size:13.5px; line-height:1.5; } .entry__arrow{ flex:none; color:rgba(255,255,255,.72); font-size:25px; line-height:1; transition:transform .18s ease; } .entry__card:hover .entry__arrow{ transform:translateX(3px); } /* ========================= LISTING THEME GRID ========================= */ .catgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } .cat{ position:relative; isolation:isolate; aspect-ratio:6/5; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-lg); background-color:var(--color-primary); background-size:cover; background-position:center; box-shadow:var(--shadow-sm); transition:border-color .15s ease, box-shadow .18s ease, transform .18s ease; } .cat:hover{ border-color:var(--color-primary); box-shadow:var(--shadow-md); transform:translateY(-3px); } /* 이미지 미등록 타일의 기본 표현 — 브랜드색을 옅게 깔고 타일 이름을 고스트로 얹는다. 장식이라 primary 원색은 쓰지 않는다(10~28% tint). color-mix 미지원 브라우저는 위 .cat__media 의 회색 빗금으로 degrade. */ .cat--ph{ background-image:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 72%, #fff) 0%, var(--color-primary-strong) 100%); } .cat__shade{ position:absolute; z-index:0; inset:0; background:linear-gradient(to top,rgba(8,20,35,.92) 0%,rgba(8,20,35,.48) 47%,rgba(8,20,35,.08) 76%); } .cat__body{ position:absolute; z-index:1; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:flex-start; padding:22px; color:#fff; } .cat__body strong{ font-family:var(--font-heading); font-size:clamp(17px,1.35vw,22px); font-weight:800; letter-spacing:-.025em; line-height:1.3; } .cat__line{ width:28px; height:2px; margin:10px 0 8px; background:var(--color-accent); } .cat__count{ font-size:13px; font-weight:600; color:rgba(255,255,255,.88); } /* ========================= SECTION HEAD (클래식 중앙 정렬) ========================= */ .shead{ position:relative; text-align:center; margin-bottom:20px; } .shead h2{ font-size:22px; font-weight:800; letter-spacing:-.02em; } .shead p{ margin-top:7px; font-size:13.5px; color:var(--color-muted); } .shead__more{ position:absolute; top:2px; right:0; } .stabs{ display:inline-flex; margin-top:14px; border:1px solid var(--color-border); border-radius:var(--radius-sm); overflow:hidden; } .stab{ padding:7px 20px; font-size:13px; font-weight:600; color:var(--color-muted); background:#fff; border:none; border-right:1px solid var(--color-border); cursor:pointer; } .stab:last-child{ border-right:none; } .stab.active{ background:var(--color-primary); color:#fff; } /* 추천 패널 — 틴트 배경 (홈). 화면 끝까지 풀-블리드: margin 으로 뷰포트 폭까지 배경을 넓히고, 같은 양의 inline padding 으로 내부 콘텐츠(제목·카드)는 board 콘텐츠 폭에 재정렬. board__center 가 좌우 레일 사이에서 뷰포트 중앙에 오므로 50vw/50% 대칭이 성립한다. */ #recommend{ background:var(--color-surface); margin-inline:calc(50% - 50vw); padding:34px calc(50vw - 50%) 38px; } /* ========================= PROPERTY CARD (클래식) ========================= */ .cardgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } #latest .cardgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } .cardgrid--cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .cardgrid--cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .pcard{ position:relative; display:flex; flex-direction:column; align-items:stretch; overflow:hidden; border:1px solid var(--color-border); border-radius:12px; background:#fff; transition:border-color .15s ease, box-shadow .18s ease, transform .18s ease; } .pcard:hover{ border-color:var(--color-primary); box-shadow:var(--shadow-md); transform:translateY(-3px); } .pcard:focus-visible{ outline:3px solid color-mix(in srgb,var(--color-primary) 34%,transparent); outline-offset:3px; } .pcard__thumb{ position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; background:#e9ecf0; background-image:repeating-linear-gradient(135deg, #edf0f3 0 17px, #e4e8ed 17px 34px); } .pcard__recommend{ position:absolute; z-index:2; top:9px; left:9px; padding:4px 9px; border-radius:var(--radius-sm); background:var(--color-recommend); color:#fff; font-size:11px; font-weight:800; line-height:1; letter-spacing:.02em; } .pcard__thumb-image{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; opacity:0; transition:opacity .18s ease; } .pcard__thumb.is-loaded .pcard__thumb-image{ opacity:1; } .pcard__thumb-spinner{ position:absolute; z-index:1; top:50%; left:50%; width:28px; height:28px; margin:-14px 0 0 -14px; display:none; border:3px solid rgba(112,122,134,.28); border-top-color:var(--color-primary); border-radius:50%; animation:pcard-thumb-spin .75s linear infinite; } .pcard__thumb.is-loading .pcard__thumb-spinner{ display:block; } .pcard__thumb-fallback{ position:absolute; z-index:1; inset:0; display:none; place-items:center; padding:16px; background:#eef0f2; color:var(--color-muted); font-size:12px; font-weight:600; text-align:center; } .pcard__thumb.is-error .pcard__thumb-fallback{ display:grid; } @keyframes pcard-thumb-spin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce){ .pcard__thumb-spinner{ animation-duration:1.5s; } } .pcard__info{ display:flex; flex:1; min-width:0; flex-direction:column; gap:5px; padding:13px 12px 15px; } .pcard__management{ align-self:flex-start; max-width:100%; overflow:hidden; padding:3px 7px; border:1px solid color-mix(in srgb,var(--color-primary) 24%,var(--color-border)); border-radius:4px; background:var(--color-primary-soft); color:var(--color-primary); font-family:var(--font-mono); font-size:11px; font-weight:800; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; } .pcard__prices{ display:flex; align-items:center; flex-wrap:wrap; gap:5px 8px; min-height:22px; } .pcard__price-item,.pcard__premium{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .pcard__price-item b,.pcard__premium b{ font-family:var(--font-heading); font-size:16px; font-weight:800; line-height:1.2; color:var(--color-text); font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .pcard__coin{ width:20px; height:20px; display:inline-grid; place-items:center; flex:none; border-radius:3px; color:#fff; font-size:12px; font-style:normal; font-weight:800; line-height:1; } .pcard__coin--bo{ background:var(--coin-bo); } .pcard__coin--wol{ background:var(--coin-wol); } .pcard__coin--premium{ background:var(--coin-gwan); } .pcard__premium{ min-height:20px; } .pcard__premium b{ font-size:14px; } .pcard__title{ min-width:0; margin:1px 0 0; overflow:hidden; color:var(--color-text); font-size:14px; font-weight:800; letter-spacing:-.01em; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; } .pcard__summary{ display:flex; align-items:center; gap:4px; min-width:0; overflow:hidden; color:var(--color-muted); font-size:11.5px; line-height:1.4; white-space:nowrap; } .pcard__summary span{ flex:none; } .pcard__summary span{ overflow:hidden; text-overflow:ellipsis; } .pcard__kind{ color:var(--color-muted); } .pcard__meta{ display:flex; align-content:flex-start; flex-wrap:wrap; gap:4px; margin-top:1px; padding-top:0; } .pcard__meta span{ padding:2px 5px; border:none; border-radius:2px; background:#f0f1f2; color:#6f747a; font-size:10.5px; font-weight:600; line-height:1.35; white-space:nowrap; } /* ========================= PAGE HEAD (서브페이지 공통) ========================= */ .pagehead{ background:var(--color-surface); border-bottom:1px solid var(--color-border); padding-block:46px; } .pagehead__crumb{ font-size:13px; color:var(--color-muted); font-weight:600; margin-bottom:10px; } .pagehead__crumb a:hover{ color:var(--color-primary); } .pagehead h1{ font-size:32px; font-weight:800; } .pagehead p{ margin-top:10px; color:var(--color-muted); font-size:16px; } /* ========================= MAP / CONTACT (문의 페이지) ========================= */ .contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; } .contact__intro h2{ font-size:26px; font-weight:800; margin-bottom:18px; } .map__info{ display:flex; flex-direction:column; gap:18px; } .map__line{ display:flex; gap:12px; align-items:flex-start; } .map__line svg{ width:20px; height:20px; stroke:var(--color-primary); flex:none; margin-top:2px; } .map__line b{ display:block; font-weight:700; font-size:15px; } .map__line span{ color:var(--color-muted); font-size:14px; } .form{ background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:26px; display:flex; flex-direction:column; gap:16px; } .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .field{ display:flex; flex-direction:column; gap:6px; } .field label{ font-size:12px; font-weight:700; color:var(--color-muted); padding-left:2px; } .form .field input, .form .field textarea, .form .field select{ width:100%; padding:13px 14px; font-size:15px; font-family:inherit; color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); appearance:none; } .form .field textarea{ min-height:120px; resize:vertical; line-height:1.6; } .form .field input:focus, .form .field textarea:focus, .form .field select:focus{ border-color:var(--color-primary); background:var(--color-bg); outline:none; } .form__agree{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--color-muted); } .form__agree input{ width:17px; height:17px; accent-color:var(--color-primary); } /* ========================= FOOTER ========================= */ .footer{ background:var(--color-primary-strong); color:#fff; padding-block:18px; border-top:1px solid rgba(255,255,255,.14); } .footer__biz{ display:flex; flex-wrap:nowrap; align-items:baseline; gap:6px 18px; margin:0; overflow-x:auto; } .footer__biz-item{ display:inline-flex; flex:none; flex-wrap:nowrap; align-items:baseline; gap:4px; min-width:0; max-width:100%; } .footer__biz dt{ color:rgba(255,255,255,.78); font-size:11.5px; font-weight:600; } .footer__biz dd{ min-width:0; margin:0; color:rgba(255,255,255,.88); font-size:12px; line-height:1.45; overflow-wrap:anywhere; } .footer__biz a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; } .footer a:focus-visible{ outline-color:#fff; outline-offset:4px; } /* floating call (모바일 상시 노출) */ .fab{ position:fixed; right:18px; bottom:18px; z-index:40; display:none; align-items:center; gap:9px; background:var(--color-primary); color:#fff; padding:14px 20px; border-radius:var(--radius-pill); box-shadow:var(--shadow-lg); font-weight:700; font-size:15px; } .fab svg{ width:18px; height:18px; stroke:#fff; } /* ========================= ABOUT (회사소개) ========================= */ .about__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; } .about__lead{ font-size:22px; font-weight:700; line-height:1.5; letter-spacing:-.01em; margin-bottom:18px; } .about__lead em{ font-style:normal; color:var(--color-primary); } .about p{ color:var(--color-text); line-height:1.7; } .about__panel{ background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:26px; } .about__panel-title{ font-size:18px; font-weight:800; margin-bottom:18px; } .about__hours{ display:flex; flex-direction:column; gap:12px; margin-bottom:22px; } .about__hours li{ display:flex; justify-content:space-between; font-size:15px; padding-bottom:12px; border-bottom:1px solid var(--color-border); } .about__hours li:last-child{ border-bottom:none; padding-bottom:0; } .about__hours span{ color:var(--color-muted); } .about__hours b{ font-weight:700; } .about__trust{ display:flex; flex-direction:column; gap:10px; } .about__trust li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--color-text); } .about__trust svg{ width:18px; height:18px; stroke:var(--color-vacant); flex:none; } .about__trust b{ color:var(--color-muted); font-weight:600; } .about__shead{ text-align:left; margin-bottom:22px; } .about__shead p{ color:var(--color-muted); } .spec__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; } .spec__card{ background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:24px; } .spec__card h3{ font-size:17px; font-weight:800; margin-bottom:9px; } .spec__card p{ color:var(--color-muted); font-size:14.5px; line-height:1.65; } /* ========================= CONTACT (문의·오시는길) ========================= */ .contact__intro h2{ font-size:26px; font-weight:800; margin-bottom:14px; } .contact__intro > p{ color:var(--color-muted); font-size:16px; margin-bottom:24px; } .contact__dir-title{ margin-top:30px; } .contact__quick{ display:flex; flex-direction:column; gap:12px; margin-bottom:8px; } .quicklink{ display:flex; align-items:center; gap:14px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:16px 18px; transition:border-color .15s, box-shadow .15s; } .quicklink:hover{ border-color:var(--color-primary); box-shadow:var(--shadow-sm); } .quicklink__icon{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center; } .quicklink__icon svg{ width:22px; height:22px; } .quicklink--call .quicklink__icon{ background:var(--color-primary-soft); } .quicklink--call svg{ stroke:var(--color-primary); } .quicklink--kakao .quicklink__icon{ background:#fee500; } .quicklink--kakao svg{ fill:#3a1d1d; } .quicklink b{ font-size:16px; font-weight:700; } .quicklink span{ display:block; font-size:13px; color:var(--color-muted); } .quicklink__arrow{ margin-left:auto; color:var(--color-muted); } .contact__intro .map__line{ margin-top:14px; } .map__canvas{ margin-top:18px; min-height:340px; border-radius:var(--radius-lg); border:1px solid var(--color-border); overflow:hidden; position:relative; background-image:linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size:44px 44px; background-color:var(--color-surface); } .map__pin{ position:absolute; left:50%; top:48%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:6px; } .map__pin svg{ width:40px; height:40px; fill:var(--color-primary); stroke:#fff; stroke-width:1.5; filter:drop-shadow(0 4px 8px rgba(16,42,69,.3)); } .map__pin b{ background:var(--color-bg); box-shadow:var(--shadow-sm); padding:5px 12px; border-radius:var(--radius-pill); font-size:13px; font-weight:700; } /* 카카오맵 placeholder — SDK 정상 초기화 시 JS 가 display:none. */ .map__placeholder{ position:absolute; inset:0; } /* ========================= SEARCH — 필터 밴드 ========================= */ .scrollthin::-webkit-scrollbar{ height:8px; width:8px; } .scrollthin::-webkit-scrollbar-thumb{ background:#cfd4da; border-radius:9px; } .scrollthin::-webkit-scrollbar-track{ background:transparent; } .search{ background:var(--color-surface); min-height:60vh; } .search[data-view="list"]{ display:flex; flex-direction:column; min-height:calc(100vh - var(--header-h)); min-height:calc(100dvh - var(--header-h)); } /* 지도 모드 — 풀스크린 분할(스크롤 잠금). 밴드는 flex:none, 본문이 잔여공간. */ .search[data-view="map"]{ display:flex; flex-direction:column; height:calc(100vh - var(--header-h)); overflow:hidden; background:var(--color-bg); min-height:0; } .fbar{ position:relative; z-index:30; background:var(--color-bg); border-bottom:1px solid var(--color-border); } /* 목록 모드 — 밴드 sticky. 지도 모드 — flex:none 비-sticky(본문이 스크롤 컨테이너). */ .search[data-view="list"] .fbar{ position:sticky; top:var(--header-h); flex:none; } .search[data-view="map"] .fbar{ flex:none; } /* 검색 input 포커스링이 밴드 경계에 잘리지 않도록 overflow 허용 + z-index 상향. */ .fbar__inner{ display:flex; align-items:center; gap:10px; max-width:1280px; margin-inline:auto; padding:8px 22px; } /* 지도 모드 — 밴드 풀블리드(우측 헤더 띠와 목록 패널 폭을 동일하게 정렬). */ .search[data-view="map"] .fbar__inner{ max-width:none; margin-inline:0; padding:0; align-items:stretch; } .search[data-view="map"] .fbar__filters{ padding:6px 22px; } .fbar__filters{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; overflow-x:auto; overflow-y:visible; padding:4px 0; } .fbar__all{ flex:none; display:inline-flex; align-items:center; gap:6px; background:var(--color-primary); color:#fff; border:none; border-radius:var(--radius-sm); padding:8px 12px; font-size:13px; font-weight:700; cursor:pointer; } .fbar__all svg{ width:14px; height:14px; } .fbar__search{ position:relative; flex:none; width:196px; z-index:1; } .fbar__search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--color-muted); pointer-events:none; } .fbar__search input{ width:100%; height:33px; padding:0 12px 0 33px; font-size:13px; font-family:inherit; color:var(--color-text); background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); } .fbar__search input:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent); } /* pill — 버튼(드롭다운 트리거). 정적 span 잔재 호환 위해 .fpill 공통 토큰 유지. */ .fpill-wrap{ position:relative; flex:none; } .fpill{ flex:none; display:inline-flex; align-items:center; gap:5px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:8px 13px; font-size:13px; font-weight:600; color:var(--color-text); white-space:nowrap; cursor:pointer; } .fpill i{ color:var(--color-muted); font-size:10px; font-style:normal; } .fpill-wrap.is-open .fpill{ background:var(--color-primary-soft); border-color:var(--color-primary); color:var(--color-primary); } .fbar__reset{ flex:none; display:grid; place-items:center; width:32px; height:32px; background:none; border:none; color:var(--color-muted); cursor:pointer; } .fbar__reset svg{ width:16px; height:16px; } .fbar__view{ flex:none; display:flex; align-items:center; gap:8px; padding-left:12px; } .fbar__view-ctrl{ display:flex; align-items:center; gap:8px; } /* 지도 모드 — 카운트+정렬+토글을 우측 목록 패널과 같은 폭의 헤더 띠로. */ .fbar__view--map{ width:clamp(440px,34vw,520px); flex-basis:clamp(440px,34vw,520px); box-sizing:border-box; padding:0 16px; border-left:1px solid var(--color-border); justify-content:space-between; } .fbar__count{ font-size:13px; font-weight:700; color:var(--color-text); white-space:nowrap; } .fbar__count b{ color:var(--color-primary); } .fbar__sort{ height:32px; display:block; position:relative; font-size:12px; color:var(--color-text); background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); white-space:nowrap; } .fbar__sort summary{ height:100%; display:flex; align-items:center; gap:7px; padding:0 12px; cursor:pointer; list-style:none; } .fbar__sort summary::-webkit-details-marker{ display:none; } .fbar__sort i{ color:var(--color-muted); font-size:9px; font-style:normal; } .sortmenu__items{ position:absolute; z-index:35; top:calc(100% + 6px); right:0; min-width:132px; padding:6px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg); box-shadow:var(--shadow-md); } .sortmenu__items a{ display:flex; align-items:center; justify-content:space-between; padding:9px 10px; border-radius:4px; color:var(--color-text); font-size:12px; } .sortmenu__items a:hover{ background:var(--color-surface); } .sortmenu__items a[aria-current="true"]{ color:var(--color-primary); font-weight:800; } .sortmenu__items a[aria-current="true"]::after{ content:"✓"; margin-left:12px; } .fbar__tabs{ display:inline-flex; border:1px solid var(--color-border); border-radius:var(--radius-sm); overflow:hidden; } .ftab{ padding:6px 15px; font-size:12.5px; font-weight:700; color:var(--color-muted); background:var(--color-bg); cursor:pointer; } .ftab--on{ background:var(--color-primary); color:#fff; } /* ========================= SEARCH — pill 드롭다운 패널 ========================= */ /* JS 가 left/top(fixed) 계산해 trigger 아래 정렬. hidden 속성으로 표시 제어. */ .fpanel{ position:fixed; z-index:40; width:300px; max-height:64vh; overflow-y:auto; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:16px; } .fpanel--wide{ width:384px; } .fpanel__group{ margin-bottom:15px; } .fpanel__label{ font-size:12px; font-weight:700; color:var(--color-text); margin-bottom:8px; } .fchips{ display:flex; flex-wrap:wrap; gap:7px; } .fchips--row{ flex-wrap:nowrap; } .fchip{ padding:7px 12px; border-radius:var(--radius-sm); border:1px solid var(--color-border); font-size:12.5px; font-weight:500; color:var(--color-text); background:#fff; white-space:nowrap; cursor:pointer; font-family:inherit; } .fchip:hover{ border-color:var(--color-primary); } .fchip.is-on{ border-color:var(--color-primary); color:var(--color-primary); font-weight:700; } .frange{ display:flex; align-items:center; gap:8px; } .frange input{ flex:1; min-width:0; height:34px; padding:0 10px; font-size:12px; font-family:inherit; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); } .frange input:focus{ outline:none; border-color:var(--color-primary); background:var(--color-bg); } .frange span{ color:var(--color-muted); } .fpanel__foot{ display:flex; gap:8px; padding-top:8px; border-top:1px solid var(--color-border); position:sticky; bottom:-16px; background:#fff; } .fpanel__reset{ flex:1; height:36px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:13px; font-weight:600; color:var(--color-text); cursor:pointer; } .fpanel__apply{ flex:1.6; height:36px; background:var(--color-primary); border:none; border-radius:var(--radius-sm); font-size:13px; font-weight:700; color:#fff; cursor:pointer; } /* ========================= SEARCH — 필터 전체 모달 ========================= */ .fmodal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; } /* [hidden] 의 display:none 은 .fmodal 의 display:flex 와 specificity 동률(0,1,0)이라 뒤에 온 author 규칙에 져, 모달이 닫힌 상태에서도 떠 scrim(z-index:100)이 전 화면 클릭을 가로채던 버그. [hidden] 시 강제로 none. */ .fmodal[hidden]{ display:none; } .fmodal__scrim{ position:absolute; inset:0; background:rgba(16,42,69,.45); } .fmodal__panel{ position:relative; width:400px; max-width:100%; max-height:86vh; background:#fff; border-radius:var(--radius-lg); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg); } .fmodal__head{ flex:none; display:flex; align-items:center; justify-content:center; position:relative; padding:16px; border-bottom:1px solid var(--color-border); } .fmodal__head h3{ font-size:17px; font-weight:800; color:var(--color-text); } .fmodal__x{ position:absolute; left:16px; top:50%; transform:translateY(-50%); background:none; border:none; font-size:21px; line-height:1; color:var(--color-muted); cursor:pointer; } .fmodal__tabs{ flex:none; display:flex; gap:7px; padding:11px 20px; border-bottom:1px solid var(--color-border); overflow-x:auto; } .fmodal__tab{ flex:none; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--color-text); white-space:nowrap; } .fmodal__tab i{ color:var(--color-muted); font-size:9px; font-style:normal; } .fmodal__body{ flex:1; min-height:0; overflow:auto; padding:20px; } .fsec{ margin-bottom:26px; } .fsec:last-child{ margin-bottom:0; } .fsec__title{ font-size:16px; font-weight:800; color:var(--color-text); margin-bottom:13px; } .fsec__sub{ font-size:12.5px; font-weight:700; color:var(--color-muted); margin:9px 0; } .frange-block{ margin-top:20px; } .frange-block__head{ display:flex; align-items:baseline; justify-content:space-between; } .frange-block__head > span:first-child{ font-size:14px; font-weight:700; color:var(--color-text); } .frange-block__all{ font-size:13px; color:var(--color-muted); } .fslider{ position:relative; height:18px; margin:12px 0 5px; } .fslider__track{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:4px; border-radius:2px; background:#e4e8ed; } .fslider__fill{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:4px; border-radius:2px; background:var(--color-primary); } .fslider__knob{ position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--color-primary); box-shadow:0 1px 3px rgba(0,0,0,.2); } .fslider__knob--min{ left:0; transform:translate(-50%,-50%); } .fslider__knob--max{ right:0; transform:translate(50%,-50%); } .fslider__scale{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--color-muted); } .fswitch-row{ display:flex; align-items:center; justify-content:flex-end; gap:9px; margin-top:13px; } .fswitch-row > span{ font-size:13px; color:var(--color-text); } .fswitch{ width:38px; height:22px; border-radius:999px; background:#cfd4da; position:relative; border:none; padding:0; flex:none; cursor:pointer; transition:background .15s; } .fswitch.is-on{ background:var(--color-primary); } .fswitch__knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:left .15s; } .fswitch.is-on .fswitch__knob{ left:18px; } .fgrid{ display:grid; gap:9px; } .fgrid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .fgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .fcell{ padding:11px 8px; border-radius:var(--radius-sm); border:1px solid var(--color-border); text-align:center; font-size:13px; font-weight:500; color:var(--color-text); background:#fff; cursor:pointer; font-family:inherit; } .fcell:hover{ border-color:var(--color-primary); } .fcell.is-on{ border-color:var(--color-primary); color:var(--color-primary); font-weight:700; } .fmodal__foot{ flex:none; display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--color-border); } .fmodal__reset{ flex:1; height:46px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:14px; font-weight:700; color:var(--color-text); cursor:pointer; } .fmodal__apply{ flex:1.8; height:46px; background:var(--color-primary); border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:700; color:#fff; cursor:pointer; } /* ========================= SEARCH — 목록 뷰 ========================= */ .listview{ display:grid; grid-template-columns:208px minmax(0,var(--maxw)) 208px; column-gap:20px; align-items:start; width:100%; max-width:calc(var(--maxw) + 456px); flex:1; min-height:0; margin-inline:auto; padding-block:26px 44px; } .listview__rail{ grid-column:1; justify-self:end; width:190px; display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--header-h) + 60px); } .listview__main{ grid-column:2; align-self:stretch; width:100%; min-width:0; padding-inline:22px; } .listview__contact{ grid-column:3; justify-self:start; width:208px; display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--header-h) + 60px); } .listview .cardgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .sb__cta{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:20px 16px; text-align:center; } .sb__cta small{ font-size:11px; color:var(--color-accent); font-weight:700; letter-spacing:.12em; } .sb__cta b{ display:block; font-family:var(--font-heading); font-size:18px; color:var(--color-text); margin:7px 0 6px; letter-spacing:-.02em; line-height:1.35; } .sb__cta p{ font-size:12.5px; color:var(--color-muted); margin-bottom:14px; } .sb__cta .btn{ width:100%; } /* 페이저 */ .pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:30px; } .pager__btn{ display:inline-flex; align-items:center; padding:9px 16px; font-size:13px; font-weight:600; color:var(--color-text); background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); } .pager__btn:hover{ border-color:var(--color-primary); color:var(--color-primary); } .pager__cur{ font-size:13px; font-weight:700; color:var(--color-muted); } .pager__status{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ========================= SEARCH — 지도 뷰 ========================= */ /* .search[data-view="map"] 가 flex column 스크롤 컨테이너 → .mapview 가 잔여 채움. */ .mapview{ flex:1; min-height:0; display:flex; } .mapview__canvas{ flex:1; min-width:0; position:relative; overflow:hidden; background:#eceae3; } .mapview__grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(16,42,69,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(16,42,69,.06) 1px, transparent 1px); background-size:48px 48px; } .mapview__zoom{ position:absolute; top:16px; right:16px; display:flex; flex-direction:column; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); } .mapview__zoom button{ width:38px; height:38px; border:none; background:#fff; font-size:18px; color:var(--color-text); } .mapview__zoom button:first-child{ border-bottom:1px solid var(--color-border); } .mapview__attr{ position:absolute; left:14px; bottom:14px; font-size:11px; color:var(--color-muted); background:rgba(255,255,255,.85); padding:4px 9px; border-radius:var(--radius-sm); } .mapcluster{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:4px; } .mapcluster__name{ font-size:12px; font-weight:800; color:var(--color-text); background:#fff; border:1px solid var(--color-border); border-radius:999px; padding:4px 10px; box-shadow:var(--shadow-sm); white-space:nowrap; } .mapcluster__dot{ width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:var(--color-primary); color:#fff; font-family:var(--font-heading); font-weight:800; font-size:19px; border:4px solid #fff; box-shadow:0 5px 18px rgba(16,42,69,.38); } .mapmarker{ position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; } .mapmarker__card{ display:flex; flex-direction:column; align-items:center; gap:1px; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:4px 9px 5px; box-shadow:0 3px 10px rgba(16,42,69,.22); white-space:nowrap; } .mapmarker__type{ font-size:10px; font-weight:700; letter-spacing:.02em; color:var(--color-primary); } .mapmarker__name{ font-size:12px; font-weight:700; color:var(--color-text); } .mapmarker__tail{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #fff; margin-top:-1px; } .mapview__list{ width:clamp(440px,34vw,520px); flex-basis:clamp(440px,34vw,520px); flex-grow:0; flex-shrink:0; box-sizing:border-box; border-left:1px solid var(--color-border); background:var(--color-bg); overflow:auto; } .maprow{ display:flex; gap:14px; padding:16px 18px; border-bottom:1px solid var(--color-border); transition:background .12s ease; } .maprow[hidden],.mrow[hidden]{ display:none !important; } .maprow:hover{ background:var(--color-surface); } .maprow__thumb{ width:150px; height:112px; flex:none; border-radius:var(--radius-sm); overflow:hidden; position:relative; background-color:#e9ecf0; background-image:repeating-linear-gradient(135deg,#edf0f3 0 9px,#e4e8ed 9px 18px); } .maprow__type{ position:absolute; left:6px; bottom:6px; font-size:10px; font-weight:700; color:#5d6772; background:rgba(255,255,255,.86); padding:2px 6px; border-radius:2px; } .maprow__theme{ position:absolute; top:0; right:0; font-size:10px; font-weight:700; color:#fff; background:var(--color-accent); padding:3px 9px; border-bottom-left-radius:var(--radius-sm); } .maprow__info{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:5px; } .maprow__no{ align-self:flex-start; max-width:100%; overflow:hidden; padding:3px 7px; border-radius:4px; background:var(--color-primary-soft); color:var(--color-primary); font-family:var(--font-mono); font-size:11px; font-weight:800; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; } .maprow__price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; } .maprow__price b{ font-family:var(--font-heading); font-weight:800; font-size:15px; color:var(--color-primary); font-variant-numeric:tabular-nums; } .maprow__price span{ font-size:11px; color:var(--color-muted); } .maprow__title{ font-size:14px; font-weight:800; color:var(--color-text); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .maprow__addr{ font-size:11.5px; color:var(--color-muted); } .mapview__list .board__empty{ margin:18px; } /* 카카오맵 placeholder(canvas 채움) — SDK 정상 초기화 시 JS 가 display:none. */ .mapview__placeholder{ position:absolute; inset:0; } /* 마커 클릭 시 우측 목록의 해당 행 강조. */ .maprow--on{ background:var(--color-primary-soft); box-shadow:inset 3px 0 0 var(--color-primary); } /* 지도 모드 chrome — 풀스크린 분할이라 footer·fab 숨김(JS 가 body 에 클래스 부여). */ body.is-mapview > .footer, body.is-mapview > .fab{ display:none; } /* ========================= RESPONSIVE ========================= */ /* 1280px 중앙 + 대칭 208px 슬롯 x 2 + 20px gap x 2 = 1736px. */ @media (max-width:1743px){ .rail{ display:none; } .listview{ grid-template-columns:minmax(0,var(--maxw)); justify-content:center; max-width:var(--maxw); } .listview__rail,.listview__contact{ display:none; } .listview__main{ grid-column:1; } } @media (max-width:1024px){ .nav{ display:none; } .hamburger{ display:flex; } .cardgrid{ grid-template-columns:repeat(3,1fr); } #latest .cardgrid,.catgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .contact__grid{ grid-template-columns:1fr; } .about__grid{ grid-template-columns:1fr; } .map__canvas{ min-height:300px; } } /* 검색 — 디자인 isMobile(vw<=760) 단일 분기. 그 위는 4열·레일 유지, 이하는 2열·레일 숨김·지도 세로적층. */ @media (max-width:760px){ /* 목록 — 레일 숨기고 카드 2열 */ .listview{ padding:16px 14px 36px; } .listview__main{ padding-inline:0; } .listview__rail{ display:none; } .listview__contact{ display:none; } .listview .cardgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } /* 필터 밴드 컴팩트 — 검색 입력·정렬 숨김 */ .fbar__inner{ padding:8px 14px; gap:8px; } .fbar__search{ display:none; } .fbar__sort{ display:none; } /* 지도 뷰 — 세로 적층(지도 위, 목록 아래). 모바일은 페이지 전체 스크롤 허용. */ .search[data-view="map"]{ height:auto; overflow:visible; } .search[data-view="map"] .fbar{ position:sticky; top:var(--header-h); z-index:30; } .search[data-view="map"] .fbar__inner{ padding:0; } .fbar__view--map{ width:100%; flex-basis:100%; border-left:none; padding:0 14px; justify-content:flex-end; } .fbar__count{ display:none; } .mapview{ flex-direction:column; flex:1; min-height:0; } .mapview__canvas{ height:44vh; flex:none; } .mapview__list{ width:100%; flex-basis:100%; border-left:none; border-top:1px solid var(--color-border); } .maprow__thumb{ width:104px; height:82px; } } @media (max-width:680px){ :root{ --gutter:14px; --header-h:58px; } .section{ padding-block:28px; } .board{ padding-block:0 26px; } .board__main{ gap:18px; } .shead{ margin-bottom:12px; } #recommend{ margin-inline:calc(var(--gutter) * -1); padding:20px var(--gutter) 22px; } .header__phone{ display:none; } .header__cta .btn{ display:none; } .hamburger{ display:flex; } /* 모바일은 16/5 를 그대로 쓰면 390px 폭에서 122px 로 납작해진다. 세로가 귀하니 비율만 세워 잡고(4/3 ≈ 292px @390) 클램프로 첫 화면을 다 먹지 않게 한다. 16/5 로 크롭된 이미지는 cover 로 좌우가 잘리는데, 모바일에선 의도한 절충이다. */ .banner{ aspect-ratio:4 / 3; min-height:240px; max-height:340px; } .banner__inner{ padding:16px var(--gutter); } .banner h1{ font-size:26px; } .banner__sub{ font-size:14.5px; } .ksearch{ flex-wrap:wrap; } .ksearch .btn{ width:100%; } .cardgrid{ grid-template-columns:1fr; gap:10px; } .board__main section:has(> .catgrid){ display:none; } #latest .cardgrid{ grid-template-columns:1fr; } #latest .cardgrid .pcard:nth-child(n+7){ display:none; } .catgrid{ grid-template-columns:repeat(2,1fr); gap:10px; } .entry{ grid-template-columns:1fr; gap:10px; } .entry__card--map{ grid-template-columns:42% 58%; } .entry__card--list{ grid-template-columns:58% 42%; } .entry__card,.entry__media{ min-height:142px; } .entry__content{ padding:20px 18px; } .entry__card h3{ font-size:18px; } .entry__card p{ font-size:12.5px; } .shead h2{ font-size:20px; } .form__row{ grid-template-columns:1fr; } .spec__grid{ grid-template-columns:1fr; } .about__panel{ padding:20px; } .footer{ padding-block:16px; } .footer__biz{ flex-wrap:wrap; overflow-x:visible; } .footer__biz-item{ flex-wrap:wrap; } .pagehead h1{ font-size:26px; } .fab{ display:inline-flex; } } /* Builder preview — section highlight driven by editor-panel hover (script.js). Spotlight: the hovered section stays lit while a huge box-shadow spread paints the rest of the page dark, so the section's location is unmistakable. z-index lifts the section above the shadow cast by sibling sections. No overlay element needed — script.js just toggles .bv-hl. Parent chain is overflow:visible so the 100vmax spread reaches the whole viewport. */ .bv-hl{ z-index:60; box-shadow:0 0 0 100vmax rgba(10,14,24,0.66); } /* position:relative 는 static 섹션에만 — 사이드바(.rail position:sticky)에 주면 sticky 가 깨져 스크롤 위치가 점프한다. sticky 는 이미 positioned 라 위 z-index 가 먹는다. */ .bv-hl:not(.rail){ position:relative; } /* ===== MOBILE THEME (.m* — 모바일 전용 셸/홈) ===== 모바일 UA 요청에 SSR 로 그리는 전용 모바일 홈(M-1). theme.css 토큰(--color-*, --radius-*, --font-*) 위에 얹는 .m* / .asksheet* 컴포넌트 레이어 — 전부 prefix 라 데스크탑 규칙과 충돌 없음. 원본: 디자인 mobile.css(.m* 97 클래스). 주의: 원본 mobile.css 의 전역 reset(*{box-sizing}, html,body{margin}, a{})은 blocks.css 상단 :where(*)/리셋이 이미 커버하므로 옮기지 않는다. 원본의 전역 body{background:#c9cdd3} 는 데스크탑 회귀를 막기 위해 body.m-page 로 스코프. ========================================================= */ body.m-page{ font-family:var(--font-body); color:var(--color-text); background:#c9cdd3; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .app{ position:relative; max-width:460px; margin:0 auto; min-height:100vh; background:var(--color-surface); overflow:hidden; box-shadow:0 0 50px rgba(20,40,70,.16); } .app--map{ display:flex; flex-direction:column; height:100vh; min-height:0; overflow:hidden; } /* ── 상단 앱바 ── */ .mbar{ position:sticky; top:0; z-index:30; height:54px; flex:none; display:flex; align-items:center; gap:10px; padding:0 8px 0 6px; background:rgba(255,255,255,.96); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--color-border); } .mbar__btn{ width:42px; height:42px; flex:none; display:grid; place-items:center; border:none; background:transparent; color:var(--color-text); cursor:pointer; } .mbar__btn svg{ width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .mbar__logo{ height:25px; display:block; } .mbar__title{ font-size:17px; font-weight:800; letter-spacing:-.02em; } .mbar__sp{ flex:1; } .mbar__call{ color:var(--color-primary); } .mbar__cta{ flex:none; border:none; cursor:pointer; height:34px; padding:0 15px; background:var(--color-primary); color:#fff; font-weight:700; font-size:14px; border-radius:var(--radius-pill); letter-spacing:-.01em; } .mbar__cta:active{ background:var(--color-primary-strong); } /* ── 문의 바텀시트 ── */ .asksheet{ position:fixed; top:0; bottom:0; left:0; right:0; max-width:460px; margin:0 auto; z-index:70; display:none; } .asksheet.open{ display:block; } .asksheet__scrim{ position:absolute; inset:0; background:rgba(16,42,69,.5); opacity:0; animation:asksheetFade .2s ease forwards; } .asksheet__panel{ position:absolute; left:0; right:0; bottom:0; background:var(--color-bg); border-radius:18px 18px 0 0; padding:10px 18px calc(20px + env(safe-area-inset-bottom)); transform:translateY(100%); animation:asksheetUp .28s cubic-bezier(.22,1,.36,1) forwards; } @keyframes asksheetFade{ to{ opacity:1; } } @keyframes asksheetUp{ to{ transform:translateY(0); } } .asksheet__grip{ width:38px; height:4px; border-radius:99px; background:var(--color-border); margin:6px auto 12px; } .asksheet__head{ padding:0 4px 14px; } .asksheet__head h3{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.02em; } .asksheet__head p{ margin:4px 0 0; font-size:13.5px; color:var(--color-muted); } .asksheet__opt{ display:flex; align-items:center; gap:14px; padding:14px 12px; border:1px solid var(--color-border); border-radius:var(--radius-md); margin-bottom:10px; } .asksheet__opt:active{ background:var(--color-surface); } .asksheet__ic{ flex:none; width:46px; height:46px; border-radius:var(--radius-md); display:grid; place-items:center; } .asksheet__ic svg{ width:23px; height:23px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .asksheet__ic--call{ background:var(--color-primary-soft); } .asksheet__ic--call svg{ stroke:var(--color-primary); } .asksheet__ic--form{ background:var(--color-surface); } .asksheet__ic--form svg{ stroke:var(--color-text); } .asksheet__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .asksheet__txt b{ font-size:16px; font-weight:700; letter-spacing:-.01em; } .asksheet__txt small{ font-size:12.5px; color:var(--color-muted); } .asksheet__arr{ flex:none; width:18px; height:18px; fill:none; stroke:var(--color-muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .asksheet__cancel{ width:100%; border:none; background:var(--color-surface); color:var(--color-muted); font-weight:700; font-size:15px; height:48px; border-radius:var(--radius-md); margin-top:4px; cursor:pointer; } /* ── 검색 바 ── */ .msearch{ background:var(--color-bg); padding:14px; } .msearch--tight{ padding:10px 14px; border-bottom:1px solid var(--color-border); } .msearch a, .msearch button{ width:100%; display:flex; align-items:center; gap:10px; height:48px; padding:0 18px; background:var(--color-surface); border:1.5px solid var(--color-primary); border-radius:var(--radius-pill); color:var(--color-muted); font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; } .msearch svg{ width:20px; height:20px; stroke:var(--color-primary); fill:none; stroke-width:2.2; flex:none; } /* ── 카테고리 아이콘 그리드 ── */ .mcats{ background:var(--color-bg); padding:6px 6px 20px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px 0; border-bottom:8px solid var(--color-surface); } .mcat{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 2px; } .mcat__ic{ width:52px; height:52px; border-radius:16px; background:var(--color-primary-soft); display:grid; place-items:center; } .mcat__ic svg{ width:25px; height:25px; stroke:var(--color-primary); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .mcat span{ font-size:12px; font-weight:600; color:var(--color-text); } /* ── 프로모 배너 ── */ .mpromo{ padding:16px 14px 18px; background:var(--color-bg); border-bottom:8px solid var(--color-surface); } .mpromo image-slot, .mpromo .mpromo__ph, .mpromo .mpromo__img{ display:block; width:100%; aspect-ratio:16/6.5; border-radius:var(--radius-lg); overflow:hidden; } .mpromo__ph{ background-color:#e9ecf0; background-image:repeating-linear-gradient(135deg,#edf0f3 0 17px,#e4e8ed 17px 34px); } /* ── 빠른 검색 (지도/목록) ── */ .mquick{ background:var(--color-bg); padding:18px 14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; border-bottom:8px solid var(--color-surface); } .mq{ display:flex; flex-direction:column; gap:11px; padding:16px 15px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg); } .mq__ic{ width:44px; height:44px; border-radius:12px; background:var(--color-primary-soft); display:grid; place-items:center; } .mq__ic svg{ width:22px; height:22px; stroke:var(--color-primary); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .mq b{ font-size:15px; font-weight:800; letter-spacing:-.01em; } .mq span{ font-size:12px; color:var(--color-muted); } /* ── 필터 칩 (가로 스크롤) ── */ .mchips{ display:flex; gap:8px; overflow-x:auto; padding:11px 14px; background:var(--color-bg); border-bottom:1px solid var(--color-border); scrollbar-width:none; } .mchips::-webkit-scrollbar{ display:none; } .mchip{ flex:none; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; padding:9px 15px; border:1px solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-bg); font-size:13px; font-weight:600; color:var(--color-text); cursor:pointer; } .mchip svg{ width:13px; height:13px; stroke:var(--color-muted); fill:none; stroke-width:2.2; } .mchip.on{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; } .mchip.on svg{ stroke:#fff; } /* ── 정렬/카운트 줄 ── */ .msort{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:var(--color-bg); border-bottom:1px solid var(--color-border); } .msort__n{ font-size:13.5px; font-weight:700; } .msort__n b{ color:var(--color-primary); } .msort__sel{ display:block; position:relative; font-size:13px; font-weight:600; color:var(--color-text); } .msort__sel summary{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; list-style:none; } .msort__sel summary::-webkit-details-marker{ display:none; } .msort__sel svg{ width:12px; height:12px; stroke:var(--color-muted); fill:none; stroke-width:2.4; } .msort__sel .sortmenu__items{ min-width:140px; top:calc(100% + 8px); } /* ── 섹션 공통 ── */ .msec{ background:var(--color-bg); padding:18px 14px; } .msec--gaptop{ border-top:8px solid var(--color-surface); } .msec__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; } .msec__head h2{ font-size:18px; font-weight:800; letter-spacing:-.02em; margin:0; } .msec__more{ font-size:13px; color:var(--color-muted); font-weight:600; } /* ── 가로 캐러셀 카드 ── */ .mcar{ display:flex; gap:12px; overflow-x:auto; margin:0 -14px; padding:0 14px 4px; scrollbar-width:none; } .mcar::-webkit-scrollbar{ display:none; } .mrcard{ flex:none; width:198px; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; background:var(--color-bg); position:relative; } .mthumb{ position:relative; aspect-ratio:4/3; overflow:hidden; background-color:#e9ecf0; background-image:repeating-linear-gradient(135deg,#edf0f3 0 17px,#e4e8ed 17px 34px); background-size:cover; background-position:center; } .mrcard__badge{ position:absolute; top:8px; left:8px; background:var(--color-recommend); color:#fff; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:2px; letter-spacing:.02em; } .mrcard__no{ position:absolute; right:8px; bottom:8px; max-width:calc(100% - 16px); overflow:hidden; font-size:9.5px; font-weight:800; color:#fff; background:rgba(16,42,69,.86); padding:3px 6px; border-radius:2px; text-overflow:ellipsis; white-space:nowrap; } .mrcard__b{ padding:11px 13px 14px; } .mrcard__title{ margin-bottom:6px; overflow:hidden; color:var(--color-text); font-size:13px; font-weight:800; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } .mrcard__price{ font-family:var(--font-heading); font-weight:800; font-size:16px; letter-spacing:-.01em; } .mrcard__sub{ font-size:11.5px; color:var(--color-muted); margin-top:3px; } .mrcard__addr{ font-size:12px; color:var(--color-muted); margin-top:8px; display:flex; gap:4px; align-items:center; } .mrcard__addr svg{ width:12px; height:12px; stroke:var(--color-muted); fill:none; stroke-width:2; flex:none; } /* ── 세로 리스트 (가로형 행 카드) ── */ .mlist{ display:flex; flex-direction:column; } .mlist--padded{ padding:0 14px; background:var(--color-bg); } .mrow{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--color-border); } .mrow:last-child{ border-bottom:none; } .mrow__thumb{ width:112px; flex:none; aspect-ratio:4/3; } .mrow__b{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px; } .mrow__title{ overflow:hidden; color:var(--color-text); font-size:13px; font-weight:800; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } .mrow__deal{ align-self:flex-start; font-size:10.5px; font-weight:700; color:var(--color-primary); background:var(--color-primary-soft); padding:2px 7px; border-radius:2px; } .mrow__addr{ font-size:12px; color:var(--color-muted); display:flex; gap:4px; align-items:center; } .mrow__addr svg{ width:12px; height:12px; stroke:var(--color-muted); fill:none; stroke-width:2; flex:none; } .mrow__price{ display:flex; flex-wrap:wrap; gap:2px 12px; } .mrow__price span{ font-size:12.5px; color:var(--color-muted); white-space:nowrap; } .mrow__price b{ font-family:var(--font-heading); font-weight:700; font-size:13.5px; color:var(--color-text); margin-left:4px; font-variant-numeric:tabular-nums; } .mmore{ display:block; text-align:center; margin:16px 14px 0; padding:13px; border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:14px; font-weight:700; color:var(--color-primary); background:var(--color-bg); } .mlist__status{ min-height:20px; padding:8px 14px 0; color:var(--color-muted); font-size:12px; text-align:center; } [data-listing-list][aria-busy="true"]{ opacity:.72; } /* ── 모바일 웹 푸터 ── */ .mfoot{ background:var(--color-primary-strong); color:#fff; padding:16px; border-top:1px solid rgba(255,255,255,.14); } .mfoot__info{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:0; } .mfoot__info > div{ display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:4px; min-width:0; max-width:100%; } .mfoot__info dt{ color:rgba(255,255,255,.78); font-size:10.5px; font-weight:600; } .mfoot__info dd{ min-width:0; margin:0; color:rgba(255,255,255,.88); font-size:11px; line-height:1.45; overflow-wrap:anywhere; } .mfoot__info a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; } .mfoot a:focus-visible{ outline-color:#fff; outline-offset:3px; } /* ── 드로어 메뉴 ── */ .mdrawer{ position:fixed; top:0; bottom:0; left:0; right:0; max-width:460px; margin:0 auto; z-index:60; display:none; } .mdrawer.open{ display:block; } .mdrawer__scrim{ display:none; } .mdrawer__panel{ position:absolute; inset:0; height:100%; width:100%; background:var(--color-bg); display:flex; flex-direction:column; padding:22px; opacity:0; transform:translateY(-10px); transition:opacity .22s ease, transform .22s ease; } .mdrawer.open .mdrawer__panel{ opacity:1; transform:translateY(0); } .mdrawer__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; } .mdrawer__top img{ height:26px; } .mdrawer__close{ width:38px; height:38px; border:none; background:var(--color-surface); border-radius:var(--radius-sm); font-size:19px; color:var(--color-muted); } .mdrawer__panel a{ padding:20px 4px; font-weight:700; font-size:22px; border-bottom:1px solid var(--color-border); } .mdrawer__call{ margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px; height:50px; background:var(--color-primary); color:#fff; border-radius:var(--radius-md); font-weight:700; font-size:15px; } .mdrawer__call svg{ width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; } /* ── 지도/목록/문의 (후속 모바일 페이지 — M-1 홈은 미사용, 전부 .m* prefix 라 무충돌) ── */ .mmapwrap{ position:relative; flex:1; min-height:0; overflow:hidden; background-color:#eceae3; background-image:linear-gradient(rgba(16,42,69,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(16,42,69,.06) 1px, transparent 1px); background-size:40px 40px; } .mmk{ position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; cursor:pointer; } .mmk__card{ display:flex; flex-direction:column; align-items:center; gap:1px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:4px 9px 5px; box-shadow:0 3px 10px rgba(16,42,69,.22); white-space:nowrap; } .mmk__type{ font-size:10px; font-weight:700; color:var(--color-primary); letter-spacing:.02em; } .mmk__name{ font-size:12px; font-weight:700; color:var(--color-text); } .mmk__tail{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--color-bg); margin-top:-1px; } .mmk.on .mmk__card{ background:var(--color-primary); border-color:var(--color-primary); } .mmk.on .mmk__type{ color:rgba(255,255,255,.85); } .mmk.on .mmk__name{ color:#fff; } .mmk.on .mmk__tail{ border-top-color:var(--color-primary); } .mcl{ position:absolute; transform:translate(-50%,-50%); display:grid; place-items:center; width:68px; height:68px; border-radius:50%; background:rgba(27,75,134,.94); color:#fff; font-weight:800; font-size:18px; border:4px solid rgba(255,255,255,.92); box-shadow:0 5px 18px rgba(16,42,69,.38); cursor:pointer; } .mcl__name{ position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); padding:4px 10px; border:1px solid var(--color-border); border-radius:999px; background:var(--color-bg); color:var(--color-text); box-shadow:var(--shadow-sm); font-size:12px; font-weight:800; white-space:nowrap; } .mmaptools{ position:absolute; top:12px; right:12px; display:flex; flex-direction:column; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); } .mmaptools button{ width:40px; height:40px; border:none; background:var(--color-bg); font-size:19px; color:var(--color-text); cursor:pointer; } .mmaptools button + button{ border-top:1px solid var(--color-border); } .msheet{ --msheet-inline:16px; position:absolute; left:0; right:0; bottom:0; height:100%; background:var(--color-bg); border-radius:16px 16px 0 0; box-shadow:0 -6px 24px rgba(16,42,69,.16); display:flex; flex-direction:column; z-index:6; transition:transform .28s cubic-bezier(.4,0,.2,1); will-change:transform; } .msheet.dragging{ transition:none; } .msheet__handle{ flex:none; touch-action:none; cursor:grab; user-select:none; } .msheet__handle:active{ cursor:grabbing; } .msheet__grab{ width:38px; height:4px; border-radius:2px; background:var(--color-border); margin:9px auto 4px; flex:none; } .msheet__head{ display:flex; align-items:center; padding:4px var(--msheet-inline) 10px; border-bottom:1px solid var(--color-border); flex:none; } .msheet__n{ font-size:14px; font-weight:800; } .msheet__n b{ color:var(--color-primary); } .msheet__body{ flex:1; min-height:0; overflow-y:auto; padding:0 var(--msheet-inline) 16px; } .msheet__body .mlist{ width:100%; } .msheet .mrow.on{ background:var(--color-primary-soft); margin:0 calc(var(--msheet-inline) * -1); padding-left:var(--msheet-inline); padding-right:var(--msheet-inline); } .mtoggle{ position:fixed; left:50%; transform:translateX(-50%); bottom:20px; z-index:25; display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 22px; background:var(--color-text); color:#fff; border-radius:var(--radius-pill); font-weight:700; font-size:14px; box-shadow:0 6px 20px rgba(16,42,69,.32); } .mtoggle svg{ width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; } .mhead{ background:var(--color-surface); padding:20px 16px 22px; border-bottom:1px solid var(--color-border); } .mhead h1{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0; } .mhead p{ margin:8px 0 0; font-size:13.5px; color:var(--color-muted); line-height:1.6; } .mqk{ display:flex; flex-direction:column; gap:10px; } .mqklink{ display:flex; align-items:center; gap:13px; padding:15px 16px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg); } .mqklink__ic{ width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center; } .mqklink__ic svg{ width:22px; height:22px; } .mqklink--call .mqklink__ic{ background:var(--color-primary-soft); } .mqklink--call svg{ stroke:var(--color-primary); fill:none; stroke-width:2; } .mqklink--kakao .mqklink__ic{ background:#fee500; } .mqklink--kakao svg{ fill:#3a1d1d; } .mqklink b{ font-size:15px; font-weight:700; } .mqklink div span{ display:block; font-size:12.5px; color:var(--color-muted); margin-top:2px; } .mqklink__arrow{ margin-left:auto; color:var(--color-muted); font-size:18px; } .mform{ display:flex; flex-direction:column; gap:14px; } .mfield{ display:flex; flex-direction:column; gap:7px; } .mfield label{ font-size:13px; font-weight:700; color:var(--color-text); } .mfield input, .mfield select, .mfield textarea{ width:100%; padding:13px 14px; font-size:15px; font-family:inherit; color:var(--color-text); background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); appearance:none; } .mfield textarea{ min-height:120px; resize:vertical; line-height:1.6; } .mfield input:focus, .mfield select:focus, .mfield textarea:focus{ border-color:var(--color-primary); outline:none; } .mfield select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23707a86' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } .mrow2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .magree{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--color-muted); line-height:1.5; } .magree input{ width:17px; height:17px; margin-top:1px; accent-color:var(--color-primary); flex:none; } .msubmit{ width:100%; height:52px; border:none; border-radius:var(--radius-md); background:var(--color-primary); color:#fff; font-size:16px; font-weight:700; font-family:inherit; cursor:pointer; } .msubmit:active{ background:var(--color-primary-strong); } .minfo{ display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--color-border); } .minfo:last-of-type{ border-bottom:none; } .minfo svg{ width:20px; height:20px; stroke:var(--color-primary); fill:none; stroke-width:2; flex:none; margin-top:1px; } .minfo b{ display:block; font-size:14.5px; font-weight:700; } .minfo span{ font-size:13px; color:var(--color-muted); } .mmapcanvas{ margin-top:14px; height:200px; border-radius:var(--radius-md); border:1px solid var(--color-border); overflow:hidden; position:relative; background-color:var(--color-surface); background-image:linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size:40px 40px; } .mmapcanvas__pin{ position:absolute; left:50%; top:48%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:5px; } .mmapcanvas__pin svg{ width:36px; height:36px; fill:var(--color-primary); stroke:#fff; stroke-width:1.5; filter:drop-shadow(0 4px 8px rgba(16,42,69,.3)); } .mmapcanvas__pin b{ background:var(--color-bg); box-shadow:var(--shadow-sm); padding:5px 12px; border-radius:var(--radius-pill); font-size:13px; font-weight:700; } /* ========================================================= 매물 상세 (.bfx-detail) — desk-ui 매물 브리핑 화면 이식 원본: apps/desk-ui/src/pages/briefing/BriefingPage.css React 재사용이 불가(홈페이지 도메인에 desk-ui 번들 없음)해 마크업·스타일을 옮겼다. 클래스명은 원본 bf-* 를 유지하고 .bfx-detail 스코프로만 감싼다 — 전역 단일 클래스와 같은 specificity 로 부딪히지 않게 항상 부모 prefix(0,2,0)를 붙인다. ========================================================= */ /* 토큰 브리지 — 원본 규칙이 참조하는 desk-ui 토큰을 홈페이지 토큰으로 매핑한다. --radius-md/lg, --shadow-* 는 홈페이지에도 같은 이름이 있으므로 재정의하지 않는다: 테마 프리셋(color/font/corners)이 계속 외형을 지배해야 하기 때문. */ .bfx-detail{ --surface-0: var(--color-bg); --surface-subtle: var(--color-surface); --surface-sunken: var(--color-surface); --text-primary: var(--color-text); --text-secondary: var(--color-text); --text-tertiary: var(--color-muted); --border: var(--color-border); --border-subtle: var(--color-border); --brand-600: var(--color-primary); --success: var(--color-vacant); --success-subtle: color-mix(in srgb, var(--color-vacant) 12%, #fff); --font-display: var(--font-heading); --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-xs: var(--radius-sm); --radius-full: var(--radius-pill); --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-base: 15px; --text-lg: 17px; --text-xl: 19px; --weight-regular: 400; --weight-medium: 600; --weight-semibold: 700; --weight-bold: 800; --tracking-tight: -.02em; --tracking-snug: -.01em; --leading-relaxed: 1.65; --bf-gap: 24px; --bf-section-pad: 22px; background: var(--surface-sunken); padding-block: 24px 64px; } .bfx-detail img{ display:block; max-width:100%; } .bfx-crumb{ margin-bottom:14px; } .bfx-crumb a:hover{ color:var(--color-primary); } /* ---------- Hero ---------- */ .bfx-detail .bf-hero{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin-bottom:var(--bf-gap); } .bfx-detail .bf-hero-header{ display:block; margin-bottom:4px; } .bfx-detail .bf-title{ font-family:var(--font-display); font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight); color:var(--text-primary); line-height:1.15; font-size:clamp(26px,3.4vw,38px); } .bfx-detail .bf-subtitle{ margin-top:6px; color:var(--text-secondary); font-size:var(--text-lg); font-weight:var(--weight-regular); } .bfx-detail .bf-status-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .bfx-detail .bf-mgmt-no{ font-family:var(--font-mono); font-size:var(--text-sm); font-weight:800; color:var(--color-primary); padding:5px 9px; background:var(--color-primary-soft); border:1px solid color-mix(in srgb,var(--color-primary) 28%,var(--border)); border-radius:var(--radius-sm); } .bfx-detail .bf-tag{ display:inline-flex; align-items:center; height:22px; padding:2px 8px; font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-snug); color:var(--text-secondary); background:var(--surface-0); border:1px solid var(--border); border-radius:var(--radius-sm); } .bfx-detail .bf-hero-main{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:stretch; } /* 갤러리 높이는 aspect-ratio 로 고정 — 사진 원본 비율에 좌우되지 않게. 사이드바는 stretch 로 같은 높이를 따라간다(사진 0장 placeholder 도 같은 16/10). */ .bfx-detail .bf-hero-media{ display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:6px; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/10; } .bfx-detail .bf-hero-media .m-main{ grid-column:1; grid-row:1/3; position:relative; } .bfx-detail .bf-hero-media .m-thumb{ grid-column:2; position:relative; } .bfx-detail .bf-hero-media .m-thumb:nth-child(n+4){ display:none; } .bfx-detail .bf-hero-media-empty{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--surface-subtle); color:var(--text-tertiary); font-size:var(--text-sm); border-radius:var(--radius-lg); aspect-ratio:16/10; } .bfx-detail .bf-photo{ background:var(--surface-subtle); overflow:hidden; position:relative; cursor:pointer; border:none; padding:0; font:inherit; color:inherit; display:block; width:100%; } .bfx-detail .bf-photo-skeleton{ position:absolute; z-index:1; inset:0; display:block; overflow:hidden; background:linear-gradient(110deg,#e8eaed 20%,#f5f6f7 38%,#e8eaed 56%); background-size:220% 100%; opacity:0; transition:opacity .18s ease; pointer-events:none; } .bfx-detail .bf-photo.is-loading .bf-photo-skeleton{ opacity:1; animation:bf-photo-shimmer 1.35s ease-in-out infinite; } .bfx-detail .bf-photo.is-error .bf-photo-skeleton{ opacity:1; background:#e8eaed; } .bfx-detail .bf-photo img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .18s ease,transform 400ms cubic-bezier(.2,0,.1,1); } .bfx-detail .bf-photo.is-loaded img{ opacity:1; } .bfx-detail .bf-photo.is-loaded:hover img{ transform:scale(1.03); } .bfx-detail .bf-photo .count-overlay{ position:absolute; z-index:2; left:10px; bottom:10px; background:rgba(20,20,18,.7); color:#fff; padding:6px 10px; border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:var(--weight-medium); display:inline-flex; align-items:center; gap:5px; } @keyframes bf-photo-shimmer{ to{ background-position:-220% 0; } } @media (prefers-reduced-motion:reduce){ .bfx-detail .bf-photo.is-loading .bf-photo-skeleton{ animation:none; } } .bfx-detail .bf-hero-strip{ display:none; } /* ---------- Hero aside (가격 요약) ---------- */ .bfx-detail .bf-hero-aside{ display:flex; flex-direction:column; gap:8px; padding:14px 18px 12px; background:var(--surface-0); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); height:100%; min-height:0; } .bfx-detail .bf-aside-headline{ display:flex; flex-direction:column; gap:4px; padding-bottom:8px; border-bottom:1px solid var(--border-subtle); } .bfx-detail .bf-aside-headline-label{ font-size:var(--text-xs); color:var(--text-tertiary); font-weight:var(--weight-medium); } .bfx-detail .bf-aside-headline-value{ display:inline-flex; align-items:baseline; gap:4px; color:var(--text-primary); font-variant-numeric:tabular-nums; } .bfx-detail .bf-aside-headline-value .num{ font-size:24px; font-weight:var(--weight-bold); letter-spacing:-.02em; line-height:1.1; } .bfx-detail .bf-aside-rows{ display:flex; flex-direction:column; gap:0; margin:0; } .bfx-detail .bf-aside-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:5px 0; border-top:1px solid var(--border-subtle); } .bfx-detail .bf-aside-row:first-child{ border-top:0; } .bfx-detail .bf-aside-row dt{ font-size:var(--text-sm); color:var(--text-tertiary); font-weight:var(--weight-medium); } .bfx-detail .bf-aside-row dd{ display:inline-flex; align-items:baseline; gap:3px; margin:0; font-variant-numeric:tabular-nums; } .bfx-detail .bf-aside-row dd .num{ font-size:var(--text-lg); font-weight:var(--weight-semibold); color:var(--text-primary); letter-spacing:var(--tracking-snug); } /* margin-top:auto — 사이드바가 갤러리 높이만큼 늘어나도 월 고정비는 하단 고정. */ .bfx-detail .bf-aside-fixed{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 0 0; border-top:1px solid var(--border-subtle); margin-top:auto; } .bfx-detail .bf-aside-fixed-label{ display:flex; align-items:baseline; gap:6px; font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-primary); } .bfx-detail .bf-aside-fixed-formula{ font-size:10px; font-weight:var(--weight-regular); color:var(--text-tertiary); } .bfx-detail .bf-aside-fixed-value{ display:inline-flex; align-items:baseline; gap:3px; font-variant-numeric:tabular-nums; } .bfx-detail .bf-aside-fixed-value .num{ font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--brand-600); letter-spacing:var(--tracking-snug); } .bfx-detail .bfx-call{ margin-top:12px; } /* ---------- Section card ---------- */ .bfx-detail .bf-section{ background:var(--surface-0); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--bf-section-pad); margin-top:var(--bf-gap); } .bfx-detail .bf-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; } .bfx-detail .bf-section-title{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-snug); color:var(--text-primary); } .bfx-detail .bf-section-sub{ font-size:var(--text-sm); color:var(--text-tertiary); } .bfx-detail .bf-empty{ padding:18px 0; color:var(--text-tertiary); font-size:var(--text-sm); } /* ---------- 제원표 ---------- */ .bfx-detail .bf-specs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; } .bfx-detail .bf-specs-row{ display:grid; grid-template-columns:110px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-subtle); align-items:baseline; } .bfx-detail .bf-specs-row:nth-last-child(-n+2){ border-bottom:none; } .bfx-detail .bf-specs-row dt{ font-size:var(--text-sm); color:var(--text-tertiary); font-weight:var(--weight-regular); } .bfx-detail .bf-specs-row dd{ margin:0; font-size:var(--text-md); color:var(--text-primary); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; } .bfx-detail .bf-specs-row dd .muted{ color:var(--text-tertiary); font-weight:var(--weight-regular); } .bfx-detail .bf-specs-row dd .unit{ color:var(--text-tertiary); font-size:var(--text-sm); margin-left:3px; font-weight:var(--weight-regular); } /* ---------- 옵션 ---------- */ .bfx-detail .bf-options{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; } .bfx-detail .bf-option{ display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-0); } .bfx-detail .bf-option .ic{ display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:50%; color:var(--success); background:var(--success-subtle); } .bfx-detail .bf-option .ic svg{ width:16px; height:16px; } .bfx-detail .bf-option .lbl{ font-size:var(--text-md); color:var(--text-primary); font-weight:var(--weight-medium); } /* ---------- 관리비 ---------- */ .bfx-detail .bf-mgmt-layout{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .bfx-detail .bf-included-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } .bfx-detail .bf-included-item{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--radius-md); font-size:var(--text-md); color:var(--text-secondary); } .bfx-detail .bf-included-item.on{ background:var(--success-subtle); color:var(--success); font-weight:var(--weight-medium); } .bfx-detail .bf-mgmt-note{ padding:14px 16px; border-radius:var(--radius-md); background:var(--surface-subtle); font-size:var(--text-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); } /* ---------- 설명 ---------- */ .bfx-detail .bf-description{ font-size:var(--text-lg); color:var(--text-primary); line-height:var(--leading-relaxed); letter-spacing:var(--tracking-snug); white-space:pre-wrap; text-wrap:pretty; } /* ---------- 위치 및 주변 시설 (고객 공유 skyline stage 이식) ---------- */ .bfx-detail .bf-location-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:14px; align-items:stretch; } .bfx-detail .bf-location-map-column{ min-width:0; } .bfx-detail .bf-location-map{ position:relative; height:300px; aspect-ratio:unset; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-subtle); background:var(--surface-subtle); } .bfx-detail .bf-map-placeholder{ position:absolute; inset:0; display:grid; place-items:center; color:var(--text-tertiary); font-size:var(--text-sm); } .bfx-detail .bf-stage-wrap{ --na-walk-fill:hsl(112 31% 79%); --na-walk-strong:hsl(108 28% 57%); --na-walk-text:hsl(122 39% 30%); --na-car-fill:hsl(214 39% 82%); --na-car-strong:hsl(213 39% 60%); --na-car-text:hsl(217 44% 33%); min-width:0; } .bfx-detail .bf-stage{ position:relative; height:300px; border-radius:var(--radius-md); background:linear-gradient(to bottom,var(--surface-0) 0%,var(--surface-subtle) 70%,var(--border-subtle) 100%); overflow:hidden; border-bottom:1px solid var(--border-subtle); } .bfx-detail .bf-stage-skyline{ position:absolute; left:0; right:0; bottom:0; height:120px; pointer-events:none; } .bfx-detail .bf-stage-skyline-fill{ color:var(--border-default,hsl(220 13% 86%)); } .bfx-detail .bf-stage-fac{ position:absolute; bottom:0; display:flex; flex-direction:column; align-items:flex-start; } .bfx-detail .bf-stage-pill{ position:relative; z-index:6; flex-shrink:0; padding:3px 9px; border-radius:999px; background:var(--na-walk-fill); color:var(--na-walk-text); font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:-.02em; white-space:nowrap; } .bfx-detail .bf-stage-fac--car .bf-stage-pill{ background:var(--na-car-fill); color:var(--na-car-text); } .bfx-detail .bf-stage-stem{ width:1px; flex:1; min-height:4px; margin:0 0 4px 20px; background-image:linear-gradient(to bottom,var(--na-walk-strong) 50%,transparent 50%); background-size:1px 6px; background-repeat:repeat-y; opacity:.85; } .bfx-detail .bf-stage-fac--car .bf-stage-stem{ background-image:linear-gradient(to bottom,var(--na-car-strong) 50%,transparent 50%); } .bfx-detail .bf-stage-anchor{ width:8px; height:8px; flex-shrink:0; margin-left:16px; border-radius:50%; background:var(--na-walk-strong); box-shadow:0 0 0 3px hsl(108 28% 57% / .2); } .bfx-detail .bf-stage-fac--car .bf-stage-anchor{ background:var(--na-car-strong); box-shadow:0 0 0 3px hsl(213 39% 60% / .2); } .bfx-detail .bf-stage-legend{ position:absolute; top:10px; left:50%; z-index:8; display:flex; gap:18px; padding:4px 12px; transform:translateX(-50%); border-radius:999px; background:rgba(255,255,255,.88); color:var(--text-tertiary); font-size:var(--text-xs); backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%); } .bfx-detail .bf-stage-legend-item{ display:inline-flex; align-items:center; gap:6px; } .bfx-detail .bf-stage-legend-dot{ width:10px; height:10px; flex-shrink:0; border-radius:50%; } .bfx-detail .bf-stage-legend-dot--walk{ background:var(--na-walk-strong); } .bfx-detail .bf-stage-legend-dot--car{ background:var(--na-car-strong); } .bfx-detail .bf-nearby-loading,.bfx-detail .bf-nearby-empty{ position:absolute; top:50%; left:50%; z-index:5; transform:translate(-50%,-50%); color:var(--text-tertiary); font-size:var(--text-sm); white-space:nowrap; } .bfx-detail .bf-nearby-loading[hidden],.bfx-detail .bf-nearby-empty[hidden]{ display:none; } /* ---------- 면책 문구 ---------- */ .bfx-detail .bf-footer-legal{ margin-top:24px; font-size:var(--text-xs); color:var(--text-tertiary); line-height:var(--leading-relaxed); } /* ---------- 사진 라이트박스 ---------- [hidden] 의 display:none 은 author display:flex 와 specificity 동률이라 닫힘 상태에서도 스크림이 화면을 덮는 사고가 난다 — 명시 규칙으로 못 박는다. */ .bfx-lightbox{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; } .bfx-lightbox[hidden]{ display:none; } .bfx-lightbox__scrim{ position:absolute; inset:0; background:rgba(12,18,26,.86); border:none; padding:0; cursor:zoom-out; } .bfx-lightbox__figure{ position:relative; margin:0; max-width:92vw; max-height:86vh; } .bfx-lightbox__figure img{ max-width:92vw; max-height:86vh; object-fit:contain; } .bfx-lightbox__nav,.bfx-lightbox__x{ position:absolute; background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:50%; width:44px; height:44px; font-size:24px; line-height:1; display:grid; place-items:center; } .bfx-lightbox__nav:hover,.bfx-lightbox__x:hover{ background:rgba(255,255,255,.26); } .bfx-lightbox__nav--prev{ left:16px; } .bfx-lightbox__nav--next{ right:16px; } .bfx-lightbox__x{ top:16px; right:16px; font-size:18px; } .bfx-lightbox__count{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; letter-spacing:.02em; } /* ---------- 반응형 ---------- ≤1024px: 갤러리 폭이 줄어 썸네일 제거(단일 이미지, 비율 유지). ≤860px: 단일 컬럼 + 모바일 캐러셀(스크롤 스냅). */ @media (max-width:1024px){ .bfx-detail .bf-hero-media{ grid-template-columns:1fr; grid-template-rows:1fr; aspect-ratio:16/10; } .bfx-detail .bf-hero-media .m-thumb{ display:none; } .bfx-detail .bf-hero-media .m-main{ grid-column:auto; grid-row:auto; } } @media (max-width:860px){ .bfx-detail .bf-hero-main{ grid-template-columns:1fr; } .bfx-detail .bf-location-grid{ grid-template-columns:1fr; } .bfx-detail .bf-location-map,.bfx-detail .bf-stage{ height:240px; } /* 상위 aspect-ratio 가 명시 height 와 만나면 block 박스 폭이 비율 환산값으로 풀려 가로 스크롤이 생긴다 — 캐러셀은 높이 고정이므로 비율 상속을 끊는다. */ .bfx-detail .bf-hero-media{ display:block; height:320px; aspect-ratio:auto; } .bfx-detail .bf-hero-media .m-main, .bfx-detail .bf-hero-media .m-thumb{ display:none !important; } .bfx-detail .bf-hero-strip{ display:flex; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .bfx-detail .bf-hero-strip::-webkit-scrollbar{ display:none; } .bfx-detail .bf-strip-slide{ flex:0 0 100%; height:100%; scroll-snap-align:center; scroll-snap-stop:always; } .bfx-detail .bf-mgmt-layout{ grid-template-columns:1fr; } } @media (max-width:640px){ .bfx-detail .bf-specs{ grid-template-columns:1fr; } .bfx-detail .bf-specs-row:nth-last-child(-n+2){ border-bottom:1px solid var(--border-subtle); } .bfx-detail .bf-specs-row:last-child{ border-bottom:none; } .bfx-detail .bf-included-list{ grid-template-columns:1fr; } }