/* ===================================================================== 개발놀이터 — 모바일 화면 (반응형) --------------------------------------------------------------------- · PC 화면은 style.css 등 기존 파일 그대로. 이 파일은 "화면 폭이 좁을 때만" 덮어씀 · 기준 폭: 768px 이하 = 모바일 (태블릿 세로·휴대폰) · 고칠 때는 아래 [구역] 제목으로 찾아서 숫자만 바꾸면 됩니다 · 자주 쓰는 값은 맨 위 :root 변수에 모아 둠 (여기만 바꾸면 전체가 같이 바뀜) ===================================================================== */ /* PC 에서는 휴대폰 메뉴 단추·메뉴 칸을 숨김 */ #mDrawer, .m-menu-btn { display: none; } @media (max-width: 768px) { /* ---------- [공통 값] 여백·글자 크기 ---------- */ :root { --m-side: 16px; /* 화면 좌우 여백 */ --m-section: 56px; /* 큰 구역 사이 위 여백 */ --m-title: 26px; /* 큰 제목 글자 */ --m-subtitle: 16px; /* 큰 제목 아래 설명 글자 */ --m-text: 16px; /* 보통 글자 */ --m-small: 14px; /* 작은 글자 (날짜·조회수 등) */ --m-radius: 20px; /* 카드 모서리 둥글기 */ } /* ---------- [공통] 화면 바깥 틀 ---------- */ #wrap { padding: 0 var(--m-side); overflow-x: clip; } /* clip: 머리말 고정(sticky)이 되도록 hidden 대신 */ img { max-width: 100%; height: auto; } /* ================================================================= [머리말] 로고 · 검색창 · 메뉴 ================================================================= */ /* 머리말 한 줄: [로고 ............ ☰] — 검색창·메뉴는 ☰ 를 누르면 나오는 메뉴 칸 안에 */ #top { position: sticky; top: 0; z-index: 50; padding: 0; margin: 0 calc(var(--m-side) * -1); background: #fff; border-bottom: 1px solid #f1f2f4; } #top .width { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 var(--m-side); } #top h1.logo { position: static; } #top h1.logo a { width: 96px; height: 34px; } /* 로고 크기 */ #top > .width > form { display: none; } /* PC 검색창 숨김 (메뉴 칸에 같은 검색창이 있음) */ #head { display: none; } /* PC 메뉴 숨김 */ /* ☰ 단추 (세 줄) */ .m-menu-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; } .m-menu-btn span { position: relative; display: block; width: 22px; height: 2px; border-radius: 2px; background: #222; } .m-menu-btn span::before, .m-menu-btn span::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: #222; } .m-menu-btn span::before { top: -7px; } .m-menu-btn span::after { top: 7px; } /* ================================================================= [메뉴 칸] ☰ 를 누르면 화면 전체에 바로 나옴 (#mDrawer) ================================================================= */ #mDrawer { display: block; position: fixed; inset: 0; z-index: 1000; visibility: hidden; } #mDrawer.open { visibility: visible; } html.drawer-open { overflow: hidden; } /* 열려 있는 동안 뒤 화면 스크롤 막기 */ /* 뒤 어두운 판 */ #mDrawer .dim { display: none; } /* 화면을 꽉 채우므로 뒤 어두운 판은 안 씀 */ /* 칸 본체 */ #mDrawer .panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; overflow-y: auto; } /* 화면 100% 꽉 채움, 움직임 없이 바로 */ /* 칸 머리: 로고 + X */ #mDrawer .panelHead { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 10px 0 20px; flex: 0 0 auto; } #mDrawer .panelHead .logo { width: 96px; height: 34px; background: url('./img/playdev_logo_vertical.svg') no-repeat left center / contain; } #mDrawer .panelHead .close { width: 44px; height: 44px; border: 0; background: url('./img/close.png') no-repeat center / 20px; opacity: .6; cursor: pointer; } /* 칸 안 검색창 */ #mDrawer .panelSearch { padding: 6px 20px 14px; } #mDrawer .panelSearch .fixedIn { position: relative; border: 1.5px solid #333; border-radius: 14px; overflow: hidden; background: #fff; } #mDrawer .panelSearch .searchIn { position: relative; } #mDrawer .panelSearch .contents { width: 100%; height: 48px; padding: 0 76px 0 16px; border: 0; font-size: 15px; background: #fff; } #mDrawer .panelSearch .contents:focus { outline: none; } #mDrawer .panelSearch .contents::placeholder { color: #bbb; } #mDrawer .panelSearch span { position: absolute; right: 0; top: 0; width: 46px; height: 100%; } #mDrawer .panelSearch span a { display: block; height: 100%; background: url('./img/btnSearch_b.png') no-repeat center / 20px; } #mDrawer .panelSearch span a input { width: 100%; height: 100%; border: 0; background: none; font-size: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } #mDrawer .panelSearch .q-clear { position: absolute; right: 46px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: #f1f2f4; color: #888; font-size: 12px; line-height: 26px; padding: 0; } #mDrawer .panelSearch .autocomplate { display: none; border-top: 1px solid #f1f2f4; } #mDrawer .panelSearch .autocomplate.on { display: block; } #mDrawer .panelSearch .autocomplate ul { max-height: 50vh; overflow-y: auto; } #mDrawer .panelSearch .autocomplate li a { display: block; padding: 10px 16px; border-bottom: 1px solid #f6f6f6; } #mDrawer .panelSearch .autocomplate li p { font-size: 14px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mDrawer .panelSearch .autocomplate li p b { color: var(--color); font-weight: 600; } #mDrawer .panelSearch .autocomplate .close { padding: 10px; text-align: center; font-size: 14px; color: #999; } /* 칸 안 메뉴 */ #mDrawer .panelNavi { padding: 4px 0; border-top: 1px solid #f1f2f4; } #mDrawer .panelNavi a { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; font-size: 17px; font-weight: 600; color: #333; } #mDrawer .panelNavi a.on { color: var(--color); } #mDrawer .panelNavi a span { position: relative; font-size: inherit; font-weight: inherit; color: inherit; } #mDrawer .panelNavi a b { padding: 1px 9px; border-radius: 12px; background: #f5f2ff; color: var(--color); font-size: 13px; font-weight: 600; } #mDrawer .panelNavi .new { position: absolute; right: -10px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color); } /* 칸 아래 문의 단추 */ #mDrawer .panelContact { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 20px; } #mDrawer .panelContact a { display: block; padding: 14px; border-radius: 12px; text-align: center; font-size: 15px; font-weight: 600; } #mDrawer .panelContact .request { background: var(--color); color: #fff; } #mDrawer .panelContact .phone { background: #f4f5f7; color: #333; } /* ================================================================= [첫 화면] #shop ================================================================= */ /* 큰 제목 묶음 */ #shop .titleArea { padding: var(--m-section) 0 28px; } #shop .titleArea.first { padding: 32px 0 32px; } #shop .titleArea h3 { font-size: var(--m-title); letter-spacing: -1px; word-break: keep-all; line-height: 1.35; } #shop .titleArea div { font-size: var(--m-subtitle); margin: 10px 0; word-break: keep-all; letter-spacing: -0.5px; } #shop .titleArea div a { height: 50px; line-height: 50px; padding: 0 46px 0 22px; font-size: 16px; background-size: 18px; background-position: right 18px center; } /* 색 카드 2개씩 → 한 줄에 하나 */ #shop .boxArea { flex-direction: column; gap: 16px; } #shop .boxArea section { border-radius: var(--m-radius); padding: 40px 0 28px; } #shop .boxArea h4, #shop .boxArea section.oneday h4, #shop .boxArea section.sns h4 { padding: 0 20px 28px; } #shop .boxArea h4 div { font-size: 19px; word-break: keep-all; } #shop .boxArea img { max-width: 80%; } #shop .boxArea section.zero img { max-width: 52%; } /* 큰 "0원" 그림 */ #shop .boxArea section.sns img { padding: 0 20px; } /* 서비스 차별화 표: 옆으로 밀어서 봄 */ #compare .compareIn { padding: 0; } #compare .titleArea { padding: var(--m-section) 0 20px; } #compare .table { justify-content: flex-start; gap: 8px; overflow-x: auto; padding: 14px 2px 10px; margin: 0 calc(var(--m-side) * -1); padding-left: var(--m-side); padding-right: var(--m-side); scrollbar-width: none; } #compare .table::-webkit-scrollbar { display: none; } #compare .table section { flex: 0 0 150px; } #compare .table section:first-child { flex: 0 0 64px; } #compare .table section h4 { font-size: 15px; padding: 14px 0; } #compare .table section div, #compare .table section.playdev div { font-size: 14px; padding: 14px 6px; word-break: keep-all; line-height: 1.4; } #compare .table section:first-child div { font-size: 13px; } #compare .table section.playdev { top: -6px; border-radius: 14px; } #compare .table section.playdev h4 { padding: 26px 0; background-size: 90px; background-position: center 14px; } /* 공지사항 최근 글 */ #shop .articleArea h4 { padding: 0 0 16px; } #shop .articleArea h4 div { font-size: 20px; } #shop .articleArea h4 a { font-size: 15px; padding-right: 26px; background-size: 22px; } #shop .articleArea ul li { padding: 0; } #shop .articleArea ul li a { padding: 12px 0; } #shop .articleArea ul li a div.subject { font-size: var(--m-text); padding-right: 12px; } #shop .articleArea ul li a div.regdt { font-size: 13px; } /* ================================================================= [꼬리말] 문의 상자 · 회사 정보 ================================================================= */ /* "친절한 개발자에게" 상자 */ #cs { padding: var(--m-section) 0 0; } #cs .csIn { flex-direction: column-reverse; align-items: flex-start; gap: 10px; padding: 28px 22px; border-radius: var(--m-radius); } #cs .csIn section img { height: 90px; } #cs .csIn .title { padding: 0 0 20px; } #cs .csIn .title p { font-size: 22px; letter-spacing: -1px; } #cs .csIn .btnArea { flex-wrap: wrap; gap: 8px; } #cs .csIn .btnArea a { padding: 13px 18px 13px 14px; font-size: 15px; } #cs .csIn .btnArea a em { transform: scale(.8); margin: -4px 0; } /* 아이콘 조금 작게 */ /* 회사 정보 */ #foot #info { padding: 40px 0 170px; } /* 아래 170px = 맨 아래까지 내려도 간편문의 상자에 가리지 않게 */ #foot #info .infoIn { gap: 10px; } #foot #info .infoIn p { font-size: 14px; padding: 2px 0; } #foot #info .infoIn p, #foot #info .infoIn p a { font-size: 14px; } #foot #info .infoIn .call, #foot #info .infoIn .email, #foot #info .infoIn .download, #foot #info .infoIn .home { padding-left: 34px; background-size: 18px; background-position: 2px center; } #foot #info .logo { width: 110px; height: 40px; margin-bottom: 10px; } /* 패밀리 사이트 고르기: 회사 정보 아래 왼쪽, 목록은 위로 열림 */ #foot #info #selectbox { position: relative; right: auto; bottom: auto; width: 160px; margin-top: 6px; } #foot #info #selectbox .value { height: 44px; line-height: 44px; padding: 0 16px; font-size: 14px; } #foot #info #selectbox .value:after { right: 16px; } #foot #info #selectbox .options { padding: 6px; border-width: 1.5px; } #foot #info #selectbox .options li { height: 40px; line-height: 40px; padding: 0 10px; font-size: 14px; } #foot #info #selectbox .options li img { height: 15px; } /* ================================================================= [떠 있는 것] 간편문의 · 위로 가기 · 팝업 ================================================================= */ /* 간편문의: 화면 아래 가로 꽉 차게 */ #quickFrm { left: 10px; right: 10px; bottom: 10px; min-width: 0; max-width: none; border-radius: 16px; box-shadow: 0 -4px 24px rgba(0,0,0,.08); } #quickFrm.on { bottom: -60px; } /* 접었을 때: 제목 줄만 보임 */ #quickFrm .in .notice { font-size: 15px; height: 50px; line-height: 50px; padding: 0 46px; } #quickFrm .in .arrow { height: 50px; } #quickFrm .in .arrow:after { width: 44px; height: 44px; } #quickFrm .in form .inputArea { padding: 0 12px 12px; gap: 8px; } #quickFrm .in form .inputArea .require { flex: 1 1 auto; } #quickFrm .in form .inputArea .submit { flex: 0 0 116px; } #quickFrm .in form .inputArea .fl input { height: 48px; padding: 16px 0 0; text-indent: 12px; font-size: 15px; } /* 연락처 칸 */ #quickFrm .inputArea .fl label { left: 12px; top: 24px; font-size: 14px; } #quickFrm .inputArea .fl input:focus + label, #quickFrm .inputArea .fl input:not(:placeholder-shown) + label { top: 13px; font-size: 11px; } #quickFrm #submitBtn2 { height: 48px; } #quickFrm #submitBtn2, #quickFrm #submitBtn2 span { font-size: 15px; } #quickFrm #submitBtn2:before { width: 20px; height: 20px; background-size: 124px; margin: 0 4px 0 -6px; } /* 위로 가기 단추: 작게, 간편문의 위로 */ #btnTop { right: 14px; bottom: 150px; width: 44px; height: 44px; line-height: 44px; background-size: 20px; } /* 팝업: 화면 안쪽에 맞춤 */ .popupWrap { left: var(--m-side) !important; right: var(--m-side) !important; top: 80px !important; } .popup .popup-html, .popup .img img { width: 100% !important; max-width: 100% !important; } .popup .popup-html { padding: 26px 18px 60px; } /* ================================================================= [회사소개] #about ================================================================= */ #about .titleArea { padding: var(--m-section) 0 28px; } #about .titleArea.first { padding: 32px 0 32px; } #about .titleArea h3 p { font-size: var(--m-title); letter-spacing: -1px; word-break: keep-all; line-height: 1.35; } #about .titleArea div { font-size: var(--m-subtitle); margin: 10px 0; word-break: keep-all; letter-spacing: -0.5px; } #about .titleArea div a { height: 50px; line-height: 50px; padding: 0 46px 0 22px; font-size: 16px; background-size: 18px; background-position: right 18px center; } #about .titleArea div a.pdf { padding-right: 52px; background-size: 20px; background-position: right 20px center; } /* 내려받기 아이콘이 글자와 겹치지 않게 */ /* 고객 후기 카드: 한 줄에 하나 */ #about .reviewArea { flex-direction: column; gap: 14px; } #about .reviewArea section { border-radius: var(--m-radius); padding: 24px 22px; } #about .reviewArea section .text { font-size: var(--m-text); word-break: keep-all; } #about .reviewArea section .cont { padding: 20px 0 0; } #about .reviewArea section .cont img { max-height: 56px; padding-right: 14px; } #about .reviewArea section .cont p span { font-size: 13px; } #about .reviewArea section .cont p span:first-child { font-size: 15px; } /* 고객사 로고: 2줄, 옆으로 밀어서 봄 */ #about .clients ul { display: grid; grid-template-rows: repeat(2, 72px); grid-auto-flow: column; grid-auto-columns: 30%; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--m-side) * -1); padding: 0 var(--m-side); } #about .clients ul::-webkit-scrollbar { display: none; } #about .clients ul li { height: 72px; border-radius: 14px; padding: 0 8px; } #about .clients ul li img { max-width: 100%; transform: scale(.62); } /* 자주 묻는 질문 */ #faq .titleArea { padding: var(--m-section) 0 24px; } #faq .titleArea h3 p { font-size: var(--m-title); letter-spacing: -1px; } #faq .titleArea div { font-size: var(--m-subtitle); margin: 8px 0; } #faq .faqIn section { margin: 10px 0; padding: 4px 14px; border-radius: 14px; } #faq .faqIn .ques { margin: 10px 0; padding-right: 26px; font-size: 15px; line-height: 1.5; word-break: keep-all; background-size: 18px; } #faq .faqIn .ques b { font-size: 15px; padding-right: 6px; } #faq .faqIn .ask { margin: 4px 0 14px; } #faq .faqIn .ask, #faq .faqIn .ask p, #faq .faqIn .ask b, #faq .faqIn .ask span { font-size: 14px; line-height: 1.7; } /* 펼친 답변 글자 */ /* ================================================================= [문의하기] #request ================================================================= */ #request .titleArea { padding: var(--m-section) 0 28px; } #request .titleArea.first { padding: 32px 0 28px; } #request .titleArea h3 p { font-size: 24px; letter-spacing: -1px; word-break: keep-all; } #request .titleArea div { font-size: 15px; word-break: keep-all; } /* 입력 칸: 높이 50px, 글자 15px */ #request .requestIn { flex-direction: column; gap: 0; padding: 0 0 40px; } #request .requestIn .write { width: 100%; } #request .write div { margin-top: 8px; } #request .write input, #request .write textarea { font-size: 15px; border-radius: 10px; } #request .write .rows.fl input { height: 52px; padding-top: 18px; text-indent: 16px; } #request .write .rows.fl label { left: 16px; top: 27px; font-size: 15px; } #request .write .rows.fl input:focus + label, #request .write .rows.fl input:not(:placeholder-shown) + label, #request .write .rows.fl textarea:focus + label, #request .write .rows.fl textarea:not(:placeholder-shown) + label { top: 15px; font-size: 12px; } #request .write textarea { height: 120px; padding: 26px 16px 10px; } #request .write .costSelect .value { height: 52px; padding: 0 16px; } #request .write .costSelect .value .lb { left: 16px; top: 14px; font-size: 12px; } #request .write .costSelect .value .tx { left: 16px; top: 18px; font-size: 15px; } #request .write .costSelect .value:after { right: 16px; } #request .write .costSelect .options li { height: 42px; line-height: 42px; font-size: 15px; } #request .write .dropZone { min-height: 84px; padding: 12px; } #request .write .dropZone .dzText { font-size: 14px; } #request .write .dropZone .dzText em { font-size: 12px; } #request .write .dropList li { height: 52px; margin-top: 8px; gap: 10px; } #request .write .dropList li .nm { font-size: 14px; } #request .write .rows.submit button { height: 52px; } #request .write .rows.submit button, #request .write .rows.submit button span { font-size: 16px; } #request .write .rows.submit button em { transform: scale(.8); margin-right: 4px; } /* 번개 아이콘 조금 작게 */ /* 아래 소개 (그림 + 글): 그림 위, 글 아래 */ #shop .list { flex-direction: column; gap: 18px; padding: 30px 0; } #shop .list:nth-child(even) { flex-direction: column-reverse; } #shop .list section { flex: 1 1 auto; width: 100%; padding: 0; } #shop .list section.bg { padding: 24px 0 0 14px; border-radius: var(--m-radius); } #shop .list section.bg.tuning3 { padding: 0; } #shop .list section.bg img { max-height: 220px; } #shop .list section .sub { font-size: 13px; padding: 6px 14px; margin-bottom: 12px; } #shop .list section.text h3 { font-size: 22px; margin-bottom: 12px; white-space: normal; } #shop .list section.text .desc p { font-size: 15px; white-space: normal; word-break: keep-all; } /* ================================================================= [게시판 목록] 포트폴리오 · 공지사항 · 언론기사 ================================================================= */ /* 게시판 이름 (Portfolio 등) */ .boardHead .table { padding: 28px 0 24px; } .boardHead .table .left { font-size: 28px; } /* 분류 탭: 한 줄, 옆으로 밀어서 */ #blog-list .blog-category { padding: 0 0 20px; } #blog-list .blog-category-ul { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--m-side) * -1); padding: 0 var(--m-side); } #blog-list .blog-category-ul::-webkit-scrollbar { display: none; } #blog-list .blog-category-ul li a { padding: 9px 13px; font-size: 14px; } #blog-list .blog-category-ul li a small { font-size: 12px; } /* 보기 방식 · 정렬 */ #blog-list .blog-search { padding: 0 0 20px; } #blog-list .list-type button { width: 40px; height: 40px; } #blog-list .blog-selectbox { width: 92px; } #blog-list .blog-selectbox-page-num { width: 116px; } #blog-list .blog-selectbox-title { height: 40px; line-height: 40px; padding: 0 26px 0 10px; font-size: 14px; } #blog-list .blog-selectbox-title:after { right: 10px; } #blog-list .blog-selectbox-option { left: auto; right: 0; width: auto; min-width: 100%; padding: 6px; border-width: 1.5px; } #blog-list .blog-selectbox-option li { height: 36px; line-height: 36px; padding: 0 12px; font-size: 14px; text-align: left; } #blog-list .blog-selectbox-option li a { display: block; font-size: 14px; color: inherit; } /* 목록형: 그림 한 줄 꽉 차게 → 그 아래 제목·내용·조회수 */ #blog-list .list-link { flex-direction: column; gap: 12px; margin: 0 0 32px; } #blog-list .list-image { flex: none; width: 100%; border-radius: 16px; } #blog-list .list-meta { width: 100%; } #blog-list .list-subject { font-size: var(--m-text); } #blog-list .list-contents { font-size: var(--m-small); margin: 4px 0 8px; } #blog-list .list-icon { gap: 6px; } #blog-list .list-icon div { padding: 3px 8px; font-size: 12px; } #blog-list .list-icon div.list-category { display: none; } /* 좁아서 분류 이름은 뺌 (탭에 있음) */ #blog-list .list-icon div.list-comment span, #blog-list .list-icon div.list-like span { width: 14px; height: 14px; } /* 갤러리형: 한 줄에 하나 (그림 + 제목, 조회수·댓글·좋아요는 그림 위 오른쪽) */ #blog-list .list-grid { gap: 28px; } #blog-list .list-grid .list-item { flex: 0 0 100%; min-width: 0; } #blog-list .list-grid .list-link { gap: 0; margin: 0; } #blog-list .list-grid .list-image { border-radius: 16px; } #blog-list .list-grid .list-meta { padding: 12px 2px 0; } #blog-list .list-grid .list-subject { font-size: 16px; min-height: 0; -webkit-line-clamp: 2; } #blog-list .list-grid .list-icon { left: 0; right: 0; top: 10px; justify-content: center; gap: 4px; flex-wrap: nowrap; } #blog-list .list-grid .list-btn-share { display: none; } /* ================================================================= [게시판 글 보기] ================================================================= */ #blog-view .view-subject { display: block; text-align: center; text-indent: 0; font-size: 22px; margin: 20px 0; letter-spacing: -1px; word-break: keep-all; line-height: 1.4; } #blog-view .view-btn-wrap { padding: 16px 0 6px; gap: 10px; } /* 좋아요 · 댓글 · 공유 단추 */ #blog-view .heart-btn, #blog-view .comment-count-btn, #blog-view .view-btn-share { width: 64px !important; height: 64px !important; gap: 4px !important; border-width: 2px !important; border-radius: 16px !important; } #blog-view .heart-icon, #blog-view .comment-count-icon { width: 20px !important; height: 20px !important; background-size: 20px !important; } #blog-view .heart-btn .heart-count, #blog-view .comment-count-num { font-size: 15px !important; min-width: 0 !important; } #blog-view .view-btn-share { background-size: 22px !important; } /* 본문 */ #blog-view .view-contents { padding: 32px 0; font-size: var(--m-text); word-break: break-word; } #blog-view .view-contents * { max-width: 100%; } /* 옮겨 온 옛 글만 글자 크기 통일 (새로 쓴 글은 에디터에서 정한 크기 그대로) */ #blog-view .view-contents.legacy p, #blog-view .view-contents.legacy span, #blog-view .view-contents.legacy div, #blog-view .view-contents.legacy li { font-size: var(--m-text) !important; } #blog-view .view-contents.legacy b { font-size: 17px !important; } #blog-view .view-contents.editor { font-size: 16px; } /* 새로 쓴 글 휴대폰 기본 글자 */ #blog-view .view-contents.legacy img { border-width: 4px; margin: 12px 0; } #blog-view .view-contents pre, #blog-view .view-contents table { display: block; overflow-x: auto; } /* 이전글 · 다음글 */ #blog-view .view-nav { padding: 10px 0; } #blog-view .view-nav-group { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px 0; } #blog-view .view-nav-next, #blog-view .view-nav-prev { width: 100%; text-align: left; } #blog-view .view-nav-next .view-nav-link, #blog-view .view-nav-prev .view-nav-link { display: block; padding: 0 0 0 44px; background-position: left center; background-size: 28px; } #blog-view .view-nav-title { font-size: 13px; margin-bottom: 4px; } #blog-view .view-nav-subject { font-size: 15px; } /* 관련 글 */ #blog-view .view-related { padding: 30px 0; } #blog-view .view-related-title { margin: 0 0 20px; } #blog-view .view-related-title a { font-size: 22px; } #blog-view .view-related-subject { font-size: 15px; } #blog-view .view-related-image { border-radius: 14px; } #blog-view .view-related-image .view-btn-share { display: none; } /* 댓글 */ .comment-write-box { padding: 16px; border-radius: 16px; } #blog-view .view-btn-back { padding: 24px 0; } #blog-view .view-btn-back a { padding: 12px 36px; font-size: 15px; } } /* ===================================================================== 태블릿 (769px ~ 1100px): PC 화면 그대로, 겹치는 곳만 조정 ===================================================================== */ @media (min-width: 769px) and (max-width: 1100px) { /* 검색창이 왼쪽 로고를 덮지 않게 로고 오른쪽부터 시작 */ #top .fixed { left: 200px; right: 40px; margin: 0; } }