/* * 비정사진담 responsive layer v92 * ------------------------------------------------------------ * 원칙 * - 기존 모바일 UI/기능을 기준으로 유지한다. * - 768px 이상에서만 레이아웃을 확장한다. * - app.js / server.js / DB / NAS 미디어 구조를 건드리지 않는다. * - 기존 DOM과 버튼을 그대로 사용해 PC에서도 모든 기능이 동일하게 동작한다. */ /* 공통: 폭이 작은 화면에서 긴 문자열/첨부파일명이 레이아웃을 밀지 않게 한다. */ img, video, canvas { max-width: 100%; } .bp-resource-file, .bp-comment-body, .bp-q-body, .bp-feed-info, .bp-profile-meta { min-width: 0; overflow-wrap: anywhere; } /* 관리자 화면은 작은 화면에서도 표/차트가 페이지 전체 폭을 깨지 않게 한다. */ body.bp-page-admin main { min-width: 0; } body.bp-page-admin table { width: 100%; } body.bp-page-admin .overflow-x-auto { -webkit-overflow-scrolling: touch; } /* -------------------------------------------------------------------------- Tablet 768 ~ 1023 -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { /* 430px 모바일 프레임을 태블릿부터 해제해 실제 화면 폭을 사용한다. */ body.bp-responsive-page { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-shadow: none !important; } body.bp-responsive-page > nav.fixed.bottom-0 { left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; transform: none !important; } body.bp-responsive-page > main { width: 100% !important; max-width: 900px !important; padding-left: 30px !important; padding-right: 30px !important; margin-left: auto !important; margin-right: auto !important; } body.bp-responsive-page > header { padding-left: 30px !important; padding-right: 30px !important; } /* 피드백 개인 화면은 원본 DOM에 fixed 클래스가 남아 있어 mobile.css의 430px 중앙 고정값이 적용될 수 있다. 태블릿부터 해당 값을 완전히 해제한다. */ body.bp-responsive-page > header[class~="fixed"][class~="w-full"] { left: auto !important; right: auto !important; transform: none !important; max-width: none !important; } .viewfinder-frame, .bp-topic, .bp-feed-search, .bp-vote-status, .bp-bijeong-archive-search, .bp-admin-preview-note { width: min(100%, 720px) !important; max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; } .bp-feed-card { width: min(100%, 640px) !important; margin-left: auto !important; margin-right: auto !important; } .bp-host-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } body.bp-page-qna main > .grid, body.bp-page-resources main > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.bp-page-upload main form, body.bp-page-qna-write main form, body.bp-page-resource-upload main form { max-width: 760px; margin-left: auto; margin-right: auto; } .bp-guide { width: min(760px, calc(100vw - 72px)) !important; } } /* -------------------------------------------------------------------------- Desktop 1024+ -------------------------------------------------------------------------- */ @media (min-width: 1024px) { :root { --bp-desktop-nav: 236px; --bp-desktop-content: 1180px; --bp-desktop-reading: 760px; --bp-desktop-feed: 700px; } html { min-width: 1024px; } /* mobile.css 의 430px 앱 프레임 값을 PC에서는 완전히 해제한다. 이 리셋이 없으면 1024px 전후 창에서 body가 가운데 430px로 남고, 좌측 메뉴의 translateX(-50%)까지 겹쳐 메뉴 절반이 화면 밖으로 잘린다. */ body.bp-responsive-page { box-sizing: border-box; width: 100% !important; max-width: none !important; min-width: 1024px; min-height: 100vh; margin-left: 0 !important; margin-right: 0 !important; padding-left: var(--bp-desktop-nav); background: #f7f6f5 !important; box-shadow: none !important; overflow-x: hidden; } /* 상단 앱바 */ body.bp-responsive-page > header { position: sticky !important; left: auto !important; right: auto !important; transform: none !important; max-width: none !important; width: 100% !important; min-height: 72px !important; height: 72px !important; padding-left: 38px !important; padding-right: 38px !important; box-sizing: border-box; justify-content: flex-start !important; gap: 10px !important; background: rgba(250,249,249,.96) !important; border-bottom: 1px solid rgba(27,28,28,.10) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } body.bp-responsive-page > header > h1 { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; font-size: 22px !important; line-height: 1.2 !important; letter-spacing: -.035em !important; white-space: nowrap; cursor: pointer; text-align: center !important; } body.bp-responsive-page > header > button:first-child { margin-left: -6px !important; } body.bp-responsive-page > header > button:last-child { margin-left: auto !important; margin-right: -6px !important; } /* 기존 모바일 하단 메뉴를 PC 좌측 메뉴로 재사용한다. 버튼 DOM/이벤트는 그대로다. */ body.bp-responsive-page > nav.fixed.bottom-0 { top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: var(--bp-desktop-nav) !important; max-width: none !important; height: 100dvh !important; transform: none !important; min-height: 620px; padding: 30px 18px 22px !important; box-sizing: border-box; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 6px !important; background: #fff !important; border-top: 0 !important; border-right: 1px solid rgba(27,28,28,.10) !important; box-shadow: 8px 0 26px rgba(27,28,28,.025); z-index: 70 !important; } /* v79: PC 좌측 상단의 별도 브랜드 문구는 제거한다. */ body.bp-responsive-page > nav.fixed.bottom-0::before { content: none !important; display: none !important; } body.bp-responsive-page > nav.fixed.bottom-0::after { content: "귤커뮤니티"; display: block; margin: auto 10px 2px; padding-top: 18px; border-top: 1px solid rgba(27,28,28,.08); color: #9a9d9d; font-family: "Space Grotesk", Manrope, sans-serif; font-size: 9px; line-height: 1.4; letter-spacing: .02em; font-weight: 600; } body.bp-responsive-page > nav.fixed.bottom-0 > button { width: 100% !important; min-height: 48px !important; height: 48px !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box; flex: 0 0 48px !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 12px !important; border: 0 !important; border-left: 3px solid transparent !important; border-radius: 8px !important; background: transparent !important; color: #686b6b !important; transition: background .15s ease, color .15s ease, transform .15s ease !important; } body.bp-responsive-page > nav.fixed.bottom-0 > button:hover { background: #f2f1f0 !important; color: #1b1c1c !important; } body.bp-responsive-page > nav.fixed.bottom-0 > button.border-t-2, body.bp-responsive-page > nav.fixed.bottom-0 > button.font-bold { border-left-color: #1b1c1c !important; background: #1b1c1c !important; color: #fff !important; } body.bp-responsive-page > nav.fixed.bottom-0 > button > .material-symbols-outlined { width: 25px; margin: 0 !important; flex: 0 0 25px; font-size: 22px !important; text-align: center; } body.bp-responsive-page > nav.fixed.bottom-0 > button > span:last-child { margin: 0 !important; font-size: 12px !important; line-height: 1 !important; letter-spacing: .035em !important; text-transform: none !important; } /* 본문 */ body.bp-responsive-page > main { width: 100% !important; max-width: var(--bp-desktop-content) !important; margin-left: auto !important; margin-right: auto !important; padding: 34px 44px 64px !important; box-sizing: border-box; min-width: 0; } body.bp-responsive-page > main.safe-pb, body.bp-responsive-page .safe-pb { padding-bottom: 64px !important; } /* 피드 / 비정사진담 */ body.bp-page-feed .viewfinder-frame { width: 100% !important; max-width: var(--bp-desktop-feed) !important; margin-left: auto !important; margin-right: auto !important; padding: 18px !important; } .bp-feed-card { width: min(100%, 660px) !important; margin-left: auto !important; margin-right: auto !important; padding: 12px 12px 16px !important; border-radius: 10px !important; box-shadow: 0 11px 30px rgba(0,0,0,.08) !important; } .bp-feed-card h3 { font-size: 15px !important; line-height: 21px !important; } .bp-feed-card .bp-feed-info > p { font-size: 12px !important; line-height: 18px !important; } .bp-feed-card .bp-author { font-size: 12px !important; } .bp-feed-card .bp-time { font-size: 10px !important; } .bp-feed-actions { gap: 18px !important; } .bp-topic, .bp-feed-search, .bp-vote-status, .bp-bijeong-archive-search, .bp-admin-preview-note { width: min(100%, var(--bp-desktop-feed)) !important; max-width: var(--bp-desktop-feed) !important; margin-left: auto !important; margin-right: auto !important; } .bp-topic h2 { font-size: 38px !important; } .bp-feed-search-row { min-height: 48px !important; } .bp-feed-search-row input, .bp-feed-search-row button { height: 48px !important; } /* 업로드 / 글쓰기 / 프로필 편집은 읽기 좋은 폭으로 제한 */ body.bp-page-upload > main, body.bp-page-profile-edit > main, body.bp-page-qna-write > main, body.bp-page-qna-detail > main, body.bp-page-resource-upload > main, body.bp-page-comments > main, body.bp-page-archive > main { max-width: 980px !important; } body.bp-page-upload .viewfinder-frame, body.bp-page-profile-edit .viewfinder-frame, body.bp-page-qna-write .viewfinder-frame, body.bp-page-qna-detail .viewfinder-frame, body.bp-page-resource-upload .viewfinder-frame, body.bp-page-comments .viewfinder-frame, body.bp-page-archive .viewfinder-frame { width: min(100%, 820px) !important; margin-left: auto !important; margin-right: auto !important; } body.bp-page-upload main form, body.bp-page-qna-write main form, body.bp-page-resource-upload main form { max-width: 820px; margin-left: auto; margin-right: auto; } /* 프로필 */ body.bp-page-profile .viewfinder-frame { width: min(100%, 760px) !important; margin-left: auto !important; margin-right: auto !important; } body.bp-page-profile .bp-account-area, body.bp-page-profile .bp-account-detail { max-width: 760px; margin-left: auto; margin-right: auto; } /* 진행자 */ .bp-host-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; } body.bp-page-host-feed .viewfinder-frame { width: min(100%, var(--bp-desktop-feed)) !important; margin-left: auto !important; margin-right: auto !important; } /* v82: Q&A / 자료실의 본문 축을 피드와 동일하게 "사이드바를 제외한 영역의 정중앙"에 고정한다. 기존처럼 거의 전체 폭을 채우면 왼쪽에 붙어 보일 수 있어, PC에서는 읽기 폭도 함께 제한한다. */ body.bp-page-qna > main, body.bp-page-resources > main { width: min(860px, calc(100% - 72px)) !important; max-width: 860px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; transform: none !important; position: relative !important; left: auto !important; right: auto !important; } body.bp-page-qna > main > *, body.bp-page-resources > main > * { box-sizing: border-box; max-width: 100% !important; margin-left: auto; margin-right: auto; } body.bp-page-qna .bp-cat-title, body.bp-page-qna .bp-cat-scroll-shell, body.bp-page-qna main > .viewfinder-frame, body.bp-page-qna main > .grid, body.bp-page-qna main > .mb-lg, body.bp-page-qna main > .mb-md, body.bp-page-qna main > .mb-sm, body.bp-page-resources .bp-cat-scroll-shell, body.bp-page-resources main > .grid, body.bp-page-resources main > .mb-lg, body.bp-page-resources main > .mb-md, body.bp-page-resources main > .mb-sm { width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Q&A / 자료실: PC에서는 카드형 2~3열 */ body.bp-page-qna main > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; } body.bp-page-resources main > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; } /* v79: PC에서는 Q&A / 자료실의 페이지 제목을 화면 중앙 축에 맞춘다. */ body.bp-page-qna > main > .mb-lg { position: relative; justify-content: center !important; align-items: center !important; text-align: center !important; } body.bp-page-qna > main > .mb-lg > div:first-child { width: 100%; text-align: center !important; } body.bp-page-resources > main > .mb-sm:first-child { text-align: center !important; } .bp-cat-scroll-shell { grid-template-columns: 30px minmax(0,1fr) 30px !important; gap: 8px !important; } .bp-cat-scroll-btn { width: 30px !important; } /* 동적 팝업/패널 */ .bp-noti { top: 78px !important; right: 26px !important; width: min(420px, calc(100vw - var(--bp-desktop-nav) - 52px)) !important; max-height: calc(100dvh - 100px) !important; } .bp-profile { width: min(520px, calc(100vw - 320px)) !important; } .bp-ask { width: min(520px, calc(100vw - 320px)) !important; } .bp-guide { width: min(900px, calc(100vw - var(--bp-desktop-nav) - 90px)) !important; max-height: min(880px, calc(100dvh - 64px)) !important; } /* 피드 사진 확대창: JS가 계산한 실제 사진 폭을 그대로 사용해 사진 오른쪽과 내용/댓글 패널 사이에 빈 공간이 생기지 않게 한다. */ .bp-lightbox .bp-lb-inner { width: var(--bp-lb-width, min(1200px, calc(100vw - 40px))) !important; max-width: min(1200px, calc(100vw - 40px)) !important; gap: 0 !important; } .bp-lightbox .bp-lb-media, .bp-lightbox .bp-lb-side { margin: 0 !important; } /* X와 좌/우 화살표를 실제 사진 가장자리에서 같은 16px 간격으로 정렬한다. */ .bp-lightbox .bp-lb-close { top: 16px !important; right: 16px !important; } .bp-lightbox .bp-arrow.prev { left: 16px !important; } .bp-lightbox .bp-arrow.next { right: 16px !important; } .bp-mention-suggest { max-width: 360px !important; } /* 데스크톱 hover는 터치 화면에 영향 없이 보조 피드백만 추가 */ @media (hover: hover) { .bp-feed-card, .polaroid-card { transition: box-shadow .16s ease, transform .16s ease; } .bp-feed-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.105) !important; } } /* 로그인/가입 페이지는 사이드 메뉴가 없으므로 중앙 카드만 넉넉하게. */ body.bp-page-login, body.bp-page-signup { padding-left: 0 !important; min-width: 1024px; } body.bp-page-login > main, body.bp-page-signup > main { max-width: 760px !important; padding-left: 44px !important; padding-right: 44px !important; } } /* v91: 내 댓글 화면의 ㄱ/ㄴ 형태 뷰파인더 코너 장식 제거 */ body.bp-page-comments .viewfinder-frame::before, body.bp-page-comments .viewfinder-frame::after { display: none !important; content: none !important; } /* v91: 내 게시글 제목/설명이 왼쪽 뷰파인더 코너에 붙지 않도록 살짝 간격 확보 */ body.bp-page-archive .bp-archive-heading-copy { padding-left: 10px; } /* -------------------------------------------------------------------------- Compact desktop 1024 ~ 1199 - 분할 화면/작은 PC 창에서도 좌측 메뉴가 잘리지 않고 본문 폭을 확보한다. -------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1199px) { :root { --bp-desktop-nav: 196px; --bp-desktop-content: 100%; --bp-desktop-reading: 720px; --bp-desktop-feed: 650px; } body.bp-responsive-page > nav.fixed.bottom-0 { padding-left: 12px !important; padding-right: 12px !important; } body.bp-responsive-page > nav.fixed.bottom-0 > button { padding-left: 11px !important; padding-right: 11px !important; gap: 9px !important; } body.bp-responsive-page > main { padding-left: 28px !important; padding-right: 28px !important; } body.bp-responsive-page > header { padding-left: 28px !important; padding-right: 28px !important; } } /* -------------------------------------------------------------------------- Wide desktop 1440+ -------------------------------------------------------------------------- */ @media (min-width: 1440px) { :root { --bp-desktop-nav: 252px; --bp-desktop-content: 1280px; --bp-desktop-feed: 740px; } body.bp-responsive-page > main { padding-left: 56px !important; padding-right: 56px !important; } .bp-feed-card { width: min(100%, 690px) !important; } body.bp-page-qna main > .grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } body.bp-page-resources main > .grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } } /* -------------------------------------------------------------------------- Admin responsive - 사용자 데이터/통계 로직은 그대로 두고 레이아웃만 조정 -------------------------------------------------------------------------- */ body.bp-page-admin { overflow-x: hidden; } body.bp-page-admin #analytics-chart, body.bp-page-admin #analytics-tags, body.bp-page-admin #analytics-members { min-width: 0; } @media (max-width: 767px) { body.bp-page-admin > header > div { padding-left: 14px !important; padding-right: 14px !important; } body.bp-page-admin > header h1 { font-size: 20px !important; } body.bp-page-admin > header nav { display: none !important; } body.bp-page-admin > header a[href="/feed"] { padding: 7px 10px !important; font-size: 11px !important; } body.bp-page-admin > main { padding-left: 14px !important; padding-right: 14px !important; padding-top: 26px !important; } body.bp-page-admin .polaroid-card { padding: 16px !important; } body.bp-page-admin #analytics-section .grid { min-width: 0; } body.bp-page-admin input, body.bp-page-admin select, body.bp-page-admin textarea { max-width: 100%; } body.bp-page-admin .host-crop-dialog { width: calc(100vw - 16px); } } @media (min-width: 768px) and (max-width: 1199px) { body.bp-page-admin > main { max-width: 1080px !important; padding-left: 28px !important; padding-right: 28px !important; } } @media (min-width: 1200px) { body.bp-page-admin > main { max-width: 1320px !important; padding-left: 40px !important; padding-right: 40px !important; } } /* ========================================================================== v83 - PC 반응형 정렬 보정 1) 내 게시글(/archive)의 좌측 메뉴는 , 프로필 화면은