/* ============================================================================ pages.css — 기존 서브페이지 전용. styles.css(토큰·부품 킷·헤더/푸터) 뒤에 실린다. 4차 "당근형" 리뉴얼(2026-09-15) 전면 재작성. 3차 토큰(--accent · --paper · --sand* · --font-serif)은 전부 사라졌다 — 이 파일은 styles.css §0 의 4차 토큰만 쓴다. 부품(버튼·칩·카드·폼·모달·탭·빈상태)은 킷 것을 그대로 쓰고, 여기엔 **페이지 고유 배치**만 둔다. 새 부품을 만들기 전에 scratchpad/build-kit.md 를 먼저 볼 것. 대상 화면 (시안 번호) 2a 업체 찾기 businesses.php .bf-* .bizrow 1h 업체 상세·모달 businesses.php?id= .dir-* .inquiry-* ← bizmodal.js 의 DOM 계약 2b 공고·소식 notices.php .notice-* 2d 모임 소개·운영진 about.php .about-* .team-* (조직도는 orgchart.css) 운영진 상세 officer.php .ofd-* 2f 내 업체 관리 my-businesses.php · my-inquiries.php · my-matches.php .acct-* .inq-* .match-* 2e 로그인·가입·등록 login.php · signup.php · register-business.php · edit-profile.php .authcard .form-screen .step-* 개인정보처리방침 privacy.php .legal-* ⚠️ 이름을 바꾸면 안 되는 것(JS 계약) .dir / .dir-head / .dir-head-actions bizmodal.js 가 꺼내 쓰는 덩어리·× 슬롯 [data-inquiry] .inquiry-toggle .inquiry-form .inquiry-msg .pf-hp 문의 전송(CSRF·허니팟) .match-card .match-why [data-explain-*] explain.js .empty .empty-title .empty-text .empty-actions main.js emptyHtml() ========================================================================== */ /* ══════════════════════════════════════════════════════════════════════════ §1. 서브페이지 공통 틀 시안 2a·2b·2d·2f 는 모두 같은 껍데기다: 폭 1080 · 라운드 18 · 1px --line · 머리 24/28/18 + 아래 1px --line-2. 킷의 .screen 에 머리 여백만 얹는다. ══════════════════════════════════════════════════════════════════════════ */ .subpage { padding-block: 28px 0; } /* 시안 2a~2f 의 '화면 카드' 는 폭 1080 이다. 킷의 .container--sub(1080)는 좌우 여백을 **포함한** 값이라 그대로 쓰면 카드가 1032 가 된다 → 서브페이지에서만 여백만큼 넓혀 카드 자체를 1080 으로 맞춘다. */ .subpage.container--sub { width: min(calc(1080px + var(--gutter) * 2), 100%); } .screen--page > .screen__head { padding: 24px 28px 18px; } .screen--page > .screen__head--flush { padding-bottom: 0; } /* 탭바가 붙는 머리(2f) */ .sp-title { font: 800 var(--fs-h1-sm) / var(--lh-tight) var(--font); letter-spacing: var(--ls-title); } .sp-lead { margin-top: 6px; font: 400 var(--fs-sm) / var(--lh-body) var(--font); color: var(--ink-2); } .sp-lead b { font-weight: 700; color: var(--ink); } .crumb { margin-bottom: 10px; font: 600 var(--fs-xs) / 1 var(--font); color: var(--ink-3); } .crumb a { color: var(--ink-3); }/* 아래 호버는 마우스가 있는 기기에서만 - 터치에서는 한 번 누르면 색이 눌러붙는다 (손가락은 '떠나지' 않아서 :hover 가 풀리지 않는다). */ @media (hover: hover) { .crumb a:hover { color: var(--ink); } } /* 화면 껍데기 안에서 쓰는 소제목 (시안 800 18/1.3) */ .sp-h2 { font: 800 var(--fs-h4) / var(--lh-tight) var(--font); letter-spacing: var(--ls-title); } /* 접기 섹션 — 2a '기타 업종 더보기' · 2d '조직도' 가 같은 제스처를 쓴다 */ .fold > summary { list-style: none; cursor: pointer; } .fold > summary::-webkit-details-marker { display: none; } .fold > summary::after { content: '▾'; color: var(--ink-4); font-weight: 400; } .fold[open] > summary::after { content: '▴'; } /* 빈 상태는 킷(.empty) 그대로. 서브페이지에서만 조금 넉넉하게 */ .subpage .empty { padding: 32px 22px; } /* ══════════════════════════════════════════════════════════════════════════ §2. 2a 업체 찾기 (businesses.php 목록) 본문 grid 224px | 1fr · gap 24 · padding 20/28/28 (안쪽 실폭 1022 → 오른쪽 774) ══════════════════════════════════════════════════════════════════════════ */ .bf-tools { display: flex; align-items: center; gap: 10px; margin-top: 14px; } .bf-tools .search { flex: 1; min-width: 0; } .bf-tools .viewtoggle { flex: none; } .bf-body { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px; padding: 20px 28px 28px; } /* ── 왼쪽: 업종 목록 ── */ .bf-specs__title { font: 800 var(--fs-sm) / 1 var(--font); margin-bottom: 10px; } .bf-speclist { display: flex; flex-direction: column; gap: 2px; } .bf-spec { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--r-xs); font: 500 var(--fs-xs) / 1.3 var(--font); color: var(--ink-2); } @media (hover: hover) { .bf-spec:hover { background: var(--fill); color: var(--ink); } } .bf-spec.is-on { background: var(--c-orange); color: var(--c-orange-fg); font-weight: 700; } .bf-spec__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bf-spec__n { flex: none; font-variant-numeric: tabular-nums; } .bf-specs__note { margin-top: 8px; padding: 0 12px; font: 400 var(--fs-meta) / 1.6 var(--font); color: var(--ink-3); } .bf-specs__note b { font-weight: 700; color: var(--ink-2); } .bf-etc { margin-top: 4px; } .bf-etc > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--r-xs); font: 600 var(--fs-xs) / 1.3 var(--font); color: var(--ink-2); } @media (hover: hover) { .bf-etc > summary:hover { background: var(--fill); color: var(--ink); } } .bf-etc .bf-speclist { margin-top: 2px; } /* ── 오른쪽: 개수 + 정렬 ── */ .bf-main { min-width: 0; } .bf-count-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .bf-count { font: 600 var(--fs-xs) / 1 var(--font); color: var(--ink-3); } .sortdd { position: relative; flex: none; } .sortdd > summary { list-style: none; cursor: pointer; } .sortdd > summary::-webkit-details-marker { display: none; } .sortdd__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 168px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--card); } .sortdd__menu a { display: block; padding: 10px 12px; border-radius: var(--r-sm); font: 600 var(--fs-xs) / 1 var(--font); color: var(--ink-2); }/* 아래 호버는 마우스가 있는 기기에서만 - 터치에서는 한 번 누르면 색이 눌러붙는다 (손가락은 '떠나지' 않아서 :hover 가 풀리지 않는다). */ @media (hover: hover) { .sortdd__menu a:hover { background: var(--fill); color: var(--ink); } } .sortdd__menu a[aria-current="true"] { color: var(--carrot-ink); } /* ── 업체 카드 2열 ── */ .bf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bizrow { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-tile); background: var(--card); color: var(--ink); } @media (hover: hover) { .bizrow:hover { border-color: var(--line); background: var(--surface); } } /* 관리자가 정한 업체 색은 **이 왼쪽 띠 한 곳에만** 쓴다(--biz-accent · 3차 사고 방지) */ .bizrow.biz-band { padding-left: 18px; } .bizrow__thumb { flex: none; width: 76px; height: 48px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); } .bizrow__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .bizrow__thumb.ph { border-radius: 8px; } .bizrow__body { min-width: 0; display: block; } .bizrow__name { display: flex; align-items: center; gap: 6px; min-width: 0; font: 800 var(--fs-md) / var(--lh-tight) var(--font); letter-spacing: var(--ls-title); } .bizrow__name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bizrow__meta { display: block; margin-top: 4px; font: 400 var(--fs-meta) / 1.5 var(--font); color: var(--ink-3); } .bizrow__desc { margin-top: 6px; font: 400 var(--fs-meta) / 1.6 var(--font); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bf-more { display: grid; place-items: center; height: 46px; margin-top: 12px; border-radius: var(--r-input); background: var(--fill); font: 700 var(--fs-sm) / 1 var(--font); color: var(--ink-2); }/* 아래 호버는 마우스가 있는 기기에서만 - 터치에서는 한 번 누르면 색이 눌러붙는다 (손가락은 '떠나지' 않아서 :hover 가 풀리지 않는다). */ @media (hover: hover) { .bf-more:hover { background: var(--fill-hover); } } .bf-foot { margin-top: 10px; font: 400 var(--fs-meta) / 1.6 var(--font); color: var(--ink-3); } /* ── 지도 보기 (시안에 없어 새로 구성) ── 카카오 JS 키가 운영 도메인 전용이라 로컬·미리보기에서는 지도가 뜨지 않는다. 그래서 지도 칸은 항상 --map-fill 바탕 + 안내 문구를 깔고, 그 위에 지도가 그려지면 덮인다. */ .bf-map { position: relative; height: 440px; border-radius: var(--r-tile); background: var(--map-fill); overflow: hidden; } .bf-map__note { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; gap: 6px; align-content: center; padding: 0 24px; text-align: center; font: 500 var(--fs-xs) / 1.7 var(--font); color: var(--ink-3); } .bf-map.is-live .bf-map__note { display: none; } /* 핀을 눌렀을 때 뜨는 말풍선. 누르면 bizmodal.js 가 그 자리에서 상세를 연다. 카카오가 그리는 흰 말풍선 안에 들어가므로 바탕은 두지 않는다. */ .bf-pin { padding: 9px 12px; max-width: 220px; } .bf-pin .bcard-hit { display: block; text-decoration: none; } .bf-pin b { display: block; font: 700 var(--fs-sm) / 1.35 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bf-pin span { display: block; margin-top: 2px; font: 400 var(--fs-meta) / 1.4 var(--font); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (hover: hover) { .bf-pin .bcard-hit:hover b { color: var(--carrot-ink); } } .bf-maplist { margin-top: 12px; } .bf-maplist__title { font: 700 var(--fs-xs) / 1 var(--font); color: var(--ink-2); margin-bottom: 8px; } /* ══════════════════════════════════════════════════════════════════════════ §3. 1h 업체 상세 + 그 자리 모달 (businesses.php?id= · bizmodal.js) 시안: 모달 860 · 왼쪽 376 | 나머지 482. 페이지로 볼 때도 같은 치수를 쓴다. ⚠️ 클래스 이름은 3차 그대로(.dir …) — bizmodal.js 가 계약으로 잡고 있다. ══════════════════════════════════════════════════════════════════════════ */ .dir { width: min(860px, 100%); margin-inline: auto; border: 1px solid var(--line); border-radius: var(--r-modal); background: var(--card); overflow: hidden; } .dir-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); } .dir-title { min-width: 0; } .dir-title h1, .dir-title h2 { font: 800 var(--fs-h2) / var(--lh-tight) var(--font); letter-spacing: var(--ls-title); } .dir-sub { display: block; margin-top: 4px; font: 500 var(--fs-xs) / 1.4 var(--font); color: var(--ink-3); } .dir-head-actions { display: flex; align-items: center; gap: 8px; flex: none; } .dir-grid { display: grid; grid-template-columns: 376px minmax(0, 1fr); } /* 관리자가 정한 업체 색이 드러나는 **유일한** 자리 — 본문 왼쪽 4px 띠(--biz-accent) */ .dir-grid.biz-band .dir-left { padding-left: 24px; } .dir-left { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-right: 1px solid var(--line-2); background: var(--surface-2); min-width: 0; } .dir-right { display: flex; flex-direction: column; padding: 20px; min-width: 0; } /* 명함 — 시안 206px · 클릭하면 확대(새 탭) */ .dir-card { display: grid; place-items: center; height: 206px; padding: 10px; border: 1px solid var(--line-2); border-radius: var(--r-tile); background: var(--card); overflow: hidden; } .dir-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } a.dir-card { cursor: zoom-in; } @media (hover: hover) { a.dir-card:hover { border-color: var(--line); background: var(--surface); } } .dir-cap { font: 500 var(--fs-mini) / 1.5 var(--font-mono); color: var(--ink-3); text-align: center; } /* 사진 3칸 고정 — 빈 칸도 자리를 잡는다(시안) */ .dir-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .dir-photo { display: block; height: 64px; border-radius: var(--r-sm); overflow: hidden; background: var(--ph-a); } .dir-photo img { width: 100%; height: 100%; object-fit: cover; } .dir-photo--none { display: grid; place-items: center; border: 1px dashed var(--line); background: var(--card); font: 500 var(--fs-mini) / 1 var(--font-mono); color: var(--ink-4); }/* 아래 호버는 마우스가 있는 기기에서만 - 터치에서는 한 번 누르면 색이 눌러붙는다 (손가락은 '떠나지' 않아서 :hover 가 풀리지 않는다). */ @media (hover: hover) { a.dir-photo--none:hover { border-color: var(--carrot-ink); color: var(--carrot-ink); } } /* 지도 자리 — 로컬에선 주소만, 운영에선 카카오맵 링크 */ .dir-map { display: grid; place-items: center; align-content: center; gap: 4px; height: 120px; padding: 0 14px; border-radius: var(--r-input); background: var(--map-fill); font: 500 var(--fs-mini) / 1.6 var(--font-mono); color: var(--ink-3); text-align: center; }/* 아래 호버는 마우스가 있는 기기에서만 - 터치에서는 한 번 누르면 색이 눌러붙는다 (손가락은 '떠나지' 않아서 :hover 가 풀리지 않는다). */ @media (hover: hover) { a.dir-map:hover { color: var(--ink); } } /* 오른쪽 — 소개 */ .dir-desc { font: 400 var(--fs-sm) / 1.8 var(--font); color: var(--ink); white-space: pre-line; text-wrap: pretty; } .dir-desc.is-empty { color: var(--ink-3); } /* 소개 접기 — 잘릴 만큼 길 때만 bizmodal.js 가 버튼을 보여 준다(눌러도 아무 일 없는 버튼을 두지 않게) */ .dir-desc.is-clamp { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } .dir-more { margin-top: 10px; border: 0; background: transparent; cursor: pointer; align-self: flex-start; } .dir-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; } .dir-links a { display: inline-flex; align-items: center; gap: 3px; font: 600 var(--fs-xs) / 1 var(--font); color: var(--ink-2); }/* 아래 호버는 마우스가 있는 기기에서만 - 터치에서는 한 번 누르면 색이 눌러붙는다 (손가락은 '떠나지' 않아서 :hover 가 풀리지 않는다). */ @media (hover: hover) { .dir-links a:hover { color: var(--ink); } } .dir-links svg { width: 14px; height: 14px; fill: currentColor; } /* ── 문의 블록 3상태 ── 상태 2(남의 업체)만 tint 카드, 상태 1·3 은 --surface 안내 상자. */ .dir-inq { margin-top: 16px; padding: 18px; border: 1px solid var(--tint-line); border-radius: var(--r-card); background: var(--tint); } .dir-inq--box { border-color: var(--line-2); border-radius: var(--r-tile); background: var(--surface); } .dir-inq-title { font: 700 var(--fs-sm) / 1.6 var(--font); color: var(--ink); } .dir-inq-text { margin-top: 7px; font: 400 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-2); } .dir-inq .btn-row { margin-top: 12px; } .dir-inq .btn-row .btn { --btn-h: 42px; } .dir-inq-note { margin-top: 10px; font: 400 var(--fs-meta) / var(--lh-body) var(--font); color: var(--ink-3); } .inquiry-toggles { display: flex; gap: 8px; margin-top: 12px; } .inquiry-toggle { flex: 1; height: 42px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); color: var(--ink); font: 700 var(--fs-xs) / 1 var(--font); cursor: pointer; } @media (hover: hover) { .inquiry-toggle:hover { border-color: var(--line-hover); background: var(--surface); } } .inquiry-toggle.active { background: var(--carrot-ink); border-color: var(--carrot-ink); color: #fff; } .inquiry-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .inquiry-form input:not(.pf-hp) { height: 44px; border-radius: var(--r-btn); } .inquiry-form textarea { min-height: 88px; border-radius: var(--r-btn); } /* 시안은 14px 이지만 iOS 가 16px 미만 입력칸에서 화면을 확대한다 → 폰에서만 16px 로 올린다 */ @media (min-width: 769px) { .inquiry-form input:not(.pf-hp), .inquiry-form textarea { font-size: var(--fs-xs); } } /* 보내기 버튼은 검정이다 — 블록 안에 이미 주황 토글이 있어 주황을 두 번 쓰지 않는다(시안) */ .inquiry-form .btn--dark { border-radius: var(--r-btn); } /* 허니팟 — 사람 눈에 안 보이지만 스크린리더가 읽지도 않게(aria-hidden 은 마크업에 있다) */ .pf-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; } .inquiry-msg:empty { display: none; } .inquiry-msg { margin-top: 10px; font: 600 var(--fs-meta) / 1.6 var(--font); } .inquiry-msg.is-ok { color: var(--ok); } .inquiry-msg.is-err { color: var(--danger); } /* ── 그 자리 오버레이 (bizmodal.js) ── .modal/.modal-backdrop/.modal-dialog/body.modal-open 은 킷(styles.css)의 것. */ .bizmodal-dialog { padding: 0; } /* 대화상자가 세로 flex 다 — 스크롤은 이 한 칸(.bizmodal-body)에서만 일어난다. (안 그러면 폰에서 모달 아래쪽 문의 폼이 잘려 손이 닿지 않는다) */ .bizmodal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .bizmodal-dialog .dir { width: 100%; border: 0; border-radius: 0; overflow: visible; } /* overflow:hidden 이면 아래 sticky 가 죽는다 */ .bizmodal-dialog .dir-body { overflow: visible; } /* 머리 줄은 따라다닌다 — 아래로 내려가도 × 가 보이게 */ .bizmodal-body .dir-head { position: sticky; top: 0; z-index: 2; background: var(--card); } .bizmodal-close { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--r-sm); background: transparent; font: 400 24px/1 var(--font); color: var(--ink-3); cursor: pointer; }/* 아래 호버는 마우스가 있는 기기에서만 - 터치에서는 한 번 누르면 색이 눌러붙는다 (손가락은 '떠나지' 않아서 :hover 가 풀리지 않는다). */ @media (hover: hover) { .bizmodal-close:hover { background: var(--fill); color: var(--ink); } } .dir-head .bizmodal-close { position: static; flex: none; margin: -6px -6px -6px 2px; } .bizmodal-loading { padding: 64px 28px; text-align: center; font: 500 var(--fs-sm) / 1 var(--font); color: var(--ink-3); } /* ══════════════════════════════════════════════════════════════════════════ §4. 2b 공고 · 소식 (notices.php) ══════════════════════════════════════════════════════════════════════════ */ .notice-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .notice-search { display: flex; gap: 8px; margin-top: 12px; width: min(420px, 100%); } .notice-search .search { flex: 1; min-width: 0; } /* 지역 공고 / 모임 공지 두 탭(2026-10-08). 폰에서도 나란히 — 킷 .seg 는 좁으면 세로로 쌓는다 */ .seg.notice-seg { grid-auto-flow: column; grid-auto-columns: 1fr; width: min(420px, 100%); margin-top: 14px; } .notice-seg .seg__item { text-decoration: none; } .notice-seg__n { font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; } .notice-seg .seg__item.is-on .notice-seg__n { color: var(--carrot-ink); } /* 홍보관 모집 공고의 「참여하기」(2026-10-08) — 포스터 위, 눈에 먼저 띄게 */ .notice-cta { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--tint-line); border-radius: var(--r-card); background: var(--tint); } .notice-cta__txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .notice-cta__txt b { font: 800 var(--fs-md) / 1.4 var(--font); color: var(--ink); word-break: keep-all; } .notice-cta__txt span { font: 400 var(--fs-meta) / 1.6 var(--font); color: var(--ink-2); word-break: keep-all; } .notice-cta__btn { flex: none; } .notice-body-wrap { padding: 8px 28px 28px; } .notice-list { display: flex; flex-direction: column; } .notice-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-3); } .notice-row:last-child { border-bottom: 0; } .notice-row__main { flex: 1; min-width: 0; } .notice-row__title { font: 500 var(--fs-sm) / 1.5 var(--font); color: var(--ink); }/* 아래 호버는 마우스가 있는 기기에서만 - 터치에서는 한 번 누르면 색이 눌러붙는다 (손가락은 '떠나지' 않아서 :hover 가 풀리지 않는다). */ @media (hover: hover) { .notice-row a:hover .notice-row__title { color: var(--carrot-ink); } } .notice-row .chip { margin-right: 8px; vertical-align: 1px; } .notice-row__date { flex: none; font: 400 var(--fs-xs) / 1.5 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; } .notice-freshness { margin-top: 12px; font: 400 var(--fs-meta) / 1.5 var(--font); color: var(--ink-3); } .notice-freshness.is-warn { color: var(--danger); } .notice-detail { display: flex; flex-direction: column; gap: 18px; } .notice-detail__title { font: 800 var(--fs-h3) / 1.45 var(--font); letter-spacing: var(--ls-title); text-wrap: pretty; } .notice-detail__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); font: 400 var(--fs-xs) / 1.4 var(--font); color: var(--ink-3); } .notice-att { display: flex; flex-direction: column; gap: 8px; } .notice-att strong { font: 700 var(--fs-xs) / 1 var(--font); } .notice-att li a { font: 500 var(--fs-sm) / 1.7 var(--font); color: var(--carrot-ink); text-decoration: underline; } .notice-body { font: 400 var(--fs-md) / 1.8 var(--font); color: var(--ink); overflow-wrap: anywhere; } .notice-body img { max-width: 100%; height: auto; } .notice-body table { max-width: 100%; border-collapse: collapse; } .notice-body td, .notice-body th { border: 1px solid var(--line-2); padding: 6px 10px; } .notice-body a { text-decoration: underline; } .notice-detail__foot { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line-2); } /* 우리가 직접 올린 공고의 포스터(2026-10-08) — 누르면 크게 보기(lightbox.js) */ .notice-poster { display: block; align-self: flex-start; width: min(420px, 100%); overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-card); cursor: zoom-in; } .notice-poster img { display: block; width: 100%; height: auto; } .notice-poster:focus-visible { outline: 2px solid var(--carrot-ink); outline-offset: 2px; } .notice-att li a svg { vertical-align: -3px; } /* ══════════════════════════════════════════════════════════════════════════ §5. 2d 모임 소개 · 운영진 (about.php) ══════════════════════════════════════════════════════════════════════════ */ .about-hero { padding: 28px 28px 24px; background: var(--tint); border-bottom: 1px solid var(--tint-line); } .about-hero__title { font: 800 28px / 1.35 var(--font); letter-spacing: var(--ls-title); text-wrap: pretty; } .about-hero__text { margin-top: 10px; max-width: 720px; font: 400 var(--fs-md) / 1.8 var(--font); color: var(--ink-2); text-wrap: pretty; } .about-hero__text + .about-hero__text { margin-top: 12px; } .about-hero__meta { margin-top: 14px; font: 500 var(--fs-meta) / 1.6 var(--font); color: var(--ink-3); } .about-stats { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-top: 20px; } .about-stat__v { font: 800 26px / 1 var(--font); color: var(--ink); } .about-stat__l { display: block; margin-top: 6px; font: 600 var(--fs-meta) / 1 var(--font); color: var(--ink-3); } .about-body { padding: 24px 28px 28px; } .about-sec + .about-sec { margin-top: 24px; } .about-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .team-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-tile); background: var(--card); color: var(--ink); } @media (hover: hover) { a.team-card:hover { border-color: var(--line); background: var(--surface); } } .team-ava { flex: none; display: grid; place-items: center; overflow: hidden; width: 42px; height: 42px; border-radius: var(--r-pill); background: var(--c-grey); color: var(--c-grey-fg); font: 800 var(--fs-sm) / 1 var(--font); } .team-ava--head { background: var(--c-orange); color: var(--c-orange-fg); } .team-txt { min-width: 0; } .team-name { display: block; font: 800 var(--fs-sm) / var(--lh-tight) var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-role { display: block; margin-top: 3px; font: 500 var(--fs-meta) / 1.3 var(--font); color: var(--ink-3); } .team-card--empty { display: grid; place-items: center; text-align: center; border-style: dashed; border-color: var(--line); font: 600 var(--fs-xs) / 1.5 var(--font); color: var(--ink-3); } /* 조직도 — 시안 2d 에는 없지만 기존 기능이라 접힌 섹션으로 살린다(사장님 지시) */ .about-org > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-tile); background: var(--surface-2); font: 800 var(--fs-xs) / 1 var(--font); color: var(--ink); } @media (hover: hover) { .about-org > summary:hover { border-color: var(--line); background: var(--surface); } } .about-org[open] > summary { border-radius: var(--r-tile) var(--r-tile) 0 0; } .about-org__body { border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 var(--r-tile) var(--r-tile); padding: 18px; } .about-org__body .orgchart { border: 0; padding: 0; } .about-note { margin-top: 16px; font: 400 var(--fs-meta) / var(--lh-body) var(--font); color: var(--ink-3); } .about-note a { text-decoration: underline; } .about-greet { display: flex; flex-direction: column; gap: 12px; max-width: 760px; } .about-greet p { font: 400 var(--fs-sm) / 1.85 var(--font); color: var(--ink-2); text-wrap: pretty; } .about-greet__sign { font: 700 var(--fs-xs) / 1.5 var(--font) !important; color: var(--ink) !important; } /* 가입 안내 CTA — 주황 바탕은 carrot-ink(흰 글자가 올라가므로), 그 위 버튼은 검정 */ .about-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .about-cta__txt { flex: 1; min-width: 220px; } .about-cta__title { font: 800 17px / 1.4 var(--font); color: #fff; } .about-cta__text { margin-top: 6px; font: 400 var(--fs-xs) / 1.65 var(--font); color: #fff; } .about-cta .btn--dark { --btn-px: 18px; border-radius: var(--r-input); } /* 관리자에서 끌어 맞춘 사진 칸 (officer_shot_style 이 --px/--py/--pz/--shot 을 준다) ⚠️ 공식은 관리자 조절기(admin/officer-photo.js · admin.css .pp-stage)와 **글자 하나까지 같아야** 한다: transform: scale(z) translate(x, y) — 확대가 앞이라 실제 이동량은 z 배. 순서를 뒤집지 말 것. */ .shot { position: relative; overflow: hidden; isolation: isolate; background: var(--ph-a); } .shot::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--shot, none) center / cover no-repeat; filter: blur(16px) saturate(.8) brightness(1.04); transform: scale(calc(var(--pz, 1) * var(--pb, 1) * 1.35)) translate(calc(var(--px, 0%) / 1.35), calc(var(--py, 0%) / 1.35)); } .shot > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(var(--pz, 1) * var(--pb, 1))) translate(var(--px, 0%), var(--py, 0%)); transform-origin: center; } .shot[data-anchor="top"] > img { inset: auto; top: 0; left: 0; height: auto; min-height: 100%; transform-origin: 50% 0; } .shot[data-anchor="top"]::before { background-position: center top; transform-origin: 50% 0; } /* ══════════════════════════════════════════════════════════════════════════ §6. 운영진 상세 (officer.php) ══════════════════════════════════════════════════════════════════════════ */ .ofd { display: flex; flex-direction: column; gap: 22px; } /* ── 프로필 한 덩어리 — 사진 · 역할 · 이름 · 한 줄 소개 · 소속 업체 · 명함 버튼 ── 예전엔 이 정보가 세 곳(머리 · 본문 위 · 맨 아래)에 흩어져 있었고, 사진(96px) 옆은 919px 중 560px 이 통째로 비어 있었다. 한 상자에 모아 그 자리를 글이 쓰게 한다. */ .ofd-profile { display: flex; align-items: flex-start; gap: 22px; padding: 22px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface); } .ofd-photo { flex: none; width: 150px; height: 150px; border-radius: var(--r-card); overflow: hidden; } .ofd-photo--none { display: grid; place-items: center; background: var(--c-orange); color: var(--c-orange-fg); font: 800 46px/1 var(--font); } .ofd-id { min-width: 0; flex: 1; } .ofd-role { font: 700 var(--fs-xs) / 1 var(--font); color: var(--carrot-ink); } .ofd-name { margin-top: 6px; font: 800 var(--fs-h1-sm) / var(--lh-tight) var(--font); letter-spacing: var(--ls-title); } .ofd-duty { margin-top: 10px; font: 400 var(--fs-md) / 1.7 var(--font); color: var(--ink-2); text-wrap: pretty; } /* 소속 업체 — 이름 옆에 두면 '누구'와 '무슨 일'이 한눈에 붙는다 */ .ofd-biz { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); } .ofd-biz__line { min-width: 0; font: 400 var(--fs-sm) / 1.5 var(--font); color: var(--ink-2); } .ofd-biz__line b { color: var(--ink); } .ofd-biz__spec { display: block; color: var(--ink-3); font-size: var(--fs-xs); } .ofd-biz__btn { margin-left: auto; flex: none; } /* 섹션 제목 — 네 개가 똑같은 밑줄로 반복돼 어디부터 읽을지 안 보였다. 왼쪽에 주황 막대를 세운다 */ .ofd-sec__title { position: relative; padding-left: 12px; font: 800 var(--fs-h4) / 1.3 var(--font); letter-spacing: var(--ls-title); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line-2); } .ofd-sec__title::before { content: ''; position: absolute; left: 0; top: 2px; width: 3px; height: 1em; border-radius: 2px; background: var(--carrot-ink); } .ofd-body { display: flex; flex-direction: column; gap: 10px; font: 400 var(--fs-sm) / 1.8 var(--font); color: var(--ink-2); } .ofd-body p { text-wrap: pretty; } .ofd-body .ofc-bullets { display: flex; flex-direction: column; gap: 4px; } .ofd-body .ofc-bullets li { position: relative; padding-left: 14px; } .ofd-body .ofc-bullets li::before { content: '·'; position: absolute; left: 2px; color: var(--carrot-ink); font-weight: 700; } .ofd-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ofd-nav-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-tile); color: var(--ink); } @media (hover: hover) { .ofd-nav-item:hover { border-color: var(--line); background: var(--surface); } } .ofd-nav-next { text-align: right; } .ofd-nav-dir { font: 600 var(--fs-mini) / 1 var(--font); color: var(--ink-3); } .ofd-nav-who { font: 700 var(--fs-sm) / 1.3 var(--font); } /* ══════════════════════════════════════════════════════════════════════════ §7. 2f 내 업체 관리 · 받은 문의 · 나와 맞는 업체 본문 grid 1fr | 300px · gap 24 · padding 20/28/28 ══════════════════════════════════════════════════════════════════════════ */ .acct-tabs { margin-top: 16px; } .acct-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding: 20px 28px 28px; align-items: start; } .acct-body--full { grid-template-columns: minmax(0, 1fr); } .acct-side { display: flex; flex-direction: column; gap: 12px; } .acct-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; } /* 받은 문의 카드 — 새 문의(tint) / 답장함(흰) 두 상태 */ .inq-list { display: flex; flex-direction: column; gap: 10px; } .inq-item { padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--card); } .inq-item.is-new { border-color: var(--tint-line); background: var(--tint); } .inq-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .inq-meta { font: 600 var(--fs-meta) / 1.4 var(--font); color: var(--ink-3); } .inq-msg { margin-top: 10px; font: 400 var(--fs-sm) / 1.75 var(--font); color: var(--ink); white-space: pre-line; } .inq-item.is-done .inq-msg { color: var(--ink-2); } .inq-contact { margin-top: 8px; font: 400 var(--fs-xs) / 1.6 var(--font); color: var(--ink-2); } .inq-contact a { text-decoration: underline; } .inq-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .inq-actions .btn { --btn-h: 40px; } /* 내 업체 줄 (업체 정보 탭) */ .mybiz-list { display: flex; flex-direction: column; gap: 10px; } .mybiz { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-card); } .mybiz.is-saved { border-color: var(--carrot-ink); background: var(--tint); } .mybiz__thumb { width: 96px; height: 60px; border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center; background: var(--surface-2); } .mybiz__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .mybiz__info { min-width: 0; } .mybiz__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 800 var(--fs-md) / var(--lh-tight) var(--font); } .mybiz__addr { margin-top: 5px; font: 400 var(--fs-meta) / 1.5 var(--font); color: var(--ink-3); } /* 이번 달 조회(시안 2f) */ .mybiz__stat { margin-top: 5px; font: 400 var(--fs-meta) / 1.5 var(--font); color: var(--ink-2); } .mybiz__stat b { font-weight: 800; color: var(--ink); } .mybiz__stat .hint { color: var(--ink-3); } .mybiz__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .mybiz__actions .btn { --btn-h: 36px; --btn-px: 14px; } .mybiz-match { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line-3); } .mybiz-match__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font: 700 var(--fs-xs) / 1 var(--font); color: var(--ink-2); } .mybiz-match .match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 업체 줄 안쪽이라 3열은 좁다 */ /* 매칭 카드 (matching.php render_match_list) */ .match-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } /* 카드는 **세로로 쌓는다** — 명함을 위에 두고 글은 카드 폭을 다 쓴다. 가로로 두면 명함(76px)이 옆자리를 먹어 330px 짜리 카드에서 글이 210px 밖에 못 쓰는데, 정작 **명함 아래는 비어 있었다**(썸네일 48px / 카드 229px · 2026-09-17 대표 지적). 그 빈 자리를 글이 쓰게 하면 키워드가 한 줄에 들어가고 설명도 5줄에서 줄어든다. */ .match-card { flex-direction: column; align-items: stretch; gap: 8px; } .match-why { display: block; margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); font: 400 var(--fs-meta) / 1.6 var(--font); color: var(--ink-2); } .match-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .match-block + .match-block { margin-top: 22px; } .match-note { margin-top: 12px; font: 400 var(--fs-meta) / var(--lh-body) var(--font); color: var(--ink-3); } /* 일치 등급 — 시안 1d 는 칩이 아니라 카드 오른쪽 끝의 맨글자 라벨이다. 점수 숫자는 어디에도 쓰지 않는다 */ .match-tier { flex: none; margin-left: auto; padding-left: 8px; font: 700 var(--fs-mini) / 1 var(--font); color: var(--ink-3); white-space: nowrap; } .match-tier--high { color: var(--ok); } .match-tier--mid { color: var(--ink-2); } /* 겹친 키워드 한 줄 */ .match-kw { display: block; margin-top: 6px; font: 400 var(--fs-meta) / 1.6 var(--font); color: var(--ink-2); /* 무조건 한 줄. 두 줄로 접히면 카드가 들쭉날쭉해 보기 불편하다 — 넘치면 … 로 끊는다 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .match-card.is-relaxed .match-kw { color: var(--ink-3); } /* 기준 완화 안내 — 시안 1d 주황 tint 박스(.note--tint .note--sm 그대로) */ .match-relax { margin-bottom: 12px; color: var(--ink-2); } .match-relax b { font-weight: 800; } /* ══════════════════════════════════════════════════════════════════════════ §8. 2e 로그인 · 가입 · 업체 등록 · 내 정보 수정 ══════════════════════════════════════════════════════════════════════════ */ .authwrap { display: flex; justify-content: center; } .authcard { width: min(380px, 100%); padding: 26px; border: 1px solid var(--line); border-radius: var(--r-screen); background: var(--card); } .authcard__title { font: 800 22px / var(--lh-tight) var(--font); letter-spacing: var(--ls-title); } .authcard form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .authcard__links { margin-top: 14px; font: 500 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-3); text-align: center; } .authcard__links a { color: var(--ink-3); }/* 아래 호버는 마우스가 있는 기기에서만 - 터치에서는 한 번 누르면 색이 눌러붙는다 (손가락은 '떠나지' 않아서 :hover 가 풀리지 않는다). */ @media (hover: hover) { .authcard__links a:hover { color: var(--ink); } } .authcard__foot { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); text-align: center; } .authcard__foot p { font: 400 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-2); } .authcard__foot .btn { margin-top: 10px; } /* 폼 화면 — .screen 안에 폼 하나 */ .form-screen { width: min(724px, 100%); margin-inline: auto; } .form-screen--narrow { width: min(520px, 100%); } .form-screen form { display: flex; flex-direction: column; gap: 16px; } .form-screen .field + .field { margin-top: 0; } .form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .form-sub { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line-2); font: 800 var(--fs-md) / 1.3 var(--font); } .form-sub .hint { margin-left: 6px; font: 400 var(--fs-meta) / 1 var(--font); color: var(--ink-3); } .form-foot { margin-top: 16px; font: 400 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-3); text-align: center; } .form-consent { font: 400 var(--fs-meta) / var(--lh-body) var(--font); color: var(--ink-3); } .form-consent a { text-decoration: underline; } .field .hint { margin-left: 5px; font: 400 var(--fs-meta) / 1 var(--font); font-weight: 400; color: var(--ink-3); } .field.has-err > .field__label { color: var(--danger); } /* 파일 입력 — 킷에 없어 여기서 톤만 맞춘다 */ input[type="file"] { width: 100%; height: auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--surface-2); font-size: var(--fs-xs); } input[type="file"]::file-selector-button { height: 34px; padding: 0 14px; margin-right: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: 700 var(--fs-meta) / 1 var(--font); cursor: pointer; } input[readonly] { background: var(--surface); color: var(--ink-2); } .current-img { display: flex; align-items: center; gap: 12px; margin-top: 7px; } .current-img img { max-height: 72px; max-width: 180px; width: auto; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); } .existing-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 7px; } /* ⚠️ 사진 자체는 **누르는 곳이 아니다.** 예전엔 타일 전체가