/* 메가 카드 높이·푸터 여백 고침은 shell.css 로 합쳤다 (2026-09-16) — 원본이 그쪽에 있다 */ /* ── 모바일 머리줄 — 한 줄로 붙인다 (2026-09-16) ───────────────── 🔴 왜 여기 있나 — 이 규칙이 화면 CSS 일곱 벌(home·list·category·product·trial· legal·cs)에 그대로 복사돼 있었다. 한 벌만 고치면 그 화면만 바뀌고 나머지 여섯은 옛 모양으로 남는다. site.css 는 «모든 화면에, 화면 CSS 뒤에» 실리므로 한 벌이면 족하다. ★ 무엇을 고쳤나 — 머리줄(header.mega)은 고정(sticky)이라 화면 위를 «항상» 먹는다. 링크 줄과 검색 줄이 따로 서서 110px 이었다 — 844px 짜리 휴대폰의 13% 다. 한 줄로 붙여 79px → 검색칸 높이를 낮춰 66px 까지 줄였다. ⚠ 2026-09-12 에 두 줄로 내린 까닭은 「폭이 안 나온다」였는데, 그때는 검색칸에 width:100% 를 줬기 때문이다. 남는 폭만 받게 하면(flex:1 + min-width:0) 들어간다 — 360px 화면에서 링크 셋 171px, 검색칸 117px 이다. 재 보고 넣었다. ⚠ flex-wrap 은 nowrap 으로 못 박는다. wrap 이면 폭이 조금만 모자라도 검색칸이 다시 아래로 떨어져 110px 로 돌아간다 — 그러면 고친 것이 없다. ⚠ 좌우 padding 을 «반드시» 적는다. 예전에 `padding:8px 0 10px` 로 적었더니 좌우가 0 이 되어 .wrap 의 `padding:0 20px` 을 덮었고, 「서비스 가격표」가 화면 왼쪽 끝에 딱 붙어 나갔다. ★ 메뉴(갈래·플랫폼 카드)는 본문이 대신한다 — 홈·목록 본문에 플랫폼 12곳이 전부 링크로 깔려 있다. 머리줄에 되살릴 것은 «검색» 하나다. */ @media(max-width:900px){ .navrow{height:auto;flex-wrap:nowrap;padding:9px 20px;column-gap:12px;row-gap:0} .info{order:1;margin-right:0;font-size:12.5px;gap:14px;flex:none;white-space:nowrap} /* ⚠ width 를 주지 않는다 — 링크가 먼저 제 폭을 가져가고 «남는 만큼»을 받는다. min-width:0 이 없으면 flex 항목이 안쪽 글자 폭 아래로 안 줄어들어 넘친다. */ .hsearch{display:flex;order:2;flex:1 1 auto;min-width:0;width:auto;padding:7px 12px;margin-left:auto} .sp{display:none} } /* 🔴 !important 가 필요한 자리다. 640px 아래에 「입력칸은 16px·최소높이 44px」라는 공통 규칙이 있는데, :not() 을 여덟 번 쓴 선택자라 명시도가 0,7,1 로 아주 높다. 그 44px 이 검색칸을 60px 로 부풀려 머리줄을 79px 로 만든다. ⚠ 글씨 크기 16px 은 «건드리지 않는다» — 그보다 작으면 iOS 가 칸을 누를 때 화면을 확대한다. 손가락이 닿는 넓이는 알약(.hsearch, 50px)이 책임지므로 입력칸을 44px 아래로 내려도 «누르기 어려워지지 않는다». ⚠ 641~900px 에는 걸지 않는다 — 거기엔 44px 규칙 자체가 없어서, 걸면 오히려 32px 짜리 검색칸을 50px 로 «키우게» 된다(태블릿 머리줄이 51 → 69px 이 됐었다). */ @media(max-width:640px){ .navrow .hsearch input{min-height:34px !important} } /* ── SNSMASTERS 에서 더한 것 ─────────────────────────────── */ /* 🔴 입력칸·단추는 글꼴을 «물려받지 않는다» (2026-09-16). CSS 에서 form 요소만은 상속이 안 걸려 브라우저 기본값으로 떨어진다. 실제로 머리줄 검색창이 Pretendard 가 아니라 «Arial» 로 그려지고 있었다(전 화면). 한글은 Arial 에 없어서 시스템 대체 글꼴로 또 한 번 넘어가니, 그 칸만 다른 글씨체가 된다. auth-modal.css 는 칸마다 font-family:inherit 을 적어 두었는데 머리줄 검색창과 아이콘 단추 셋이 빠져 있었다 — 여기서 한 번에 잡는다. */ input,select,textarea,button{font-family:inherit} /* 준비중 표시 — 눈에 띄되 상품명을 가리지 않게 */ .soon{display:inline-block;margin-left:6px;font-size:11px;font-weight:800; padding:2px 7px;border-radius:999px;background:#f3f4f6;color:#8a94a6;vertical-align:middle} /* 이동 경로 — 장식이 아니라 «지금 어디인지»다. 작아도 지우지 말 것 */ .crumb{font-size:13px;color:var(--gray,#757575);margin:0 0 14px} .crumb a{color:var(--gray,#757575);text-decoration:none} .crumb a:hover{color:var(--accent,#2563eb);text-decoration:underline} /* 고정 페이지·안내 글 공통 */ .sec .wrap h1{font-size:26px;font-weight:900;margin:0 0 12px;line-height:1.35} .sec .wrap h2{font-size:19px;font-weight:800;margin:28px 0 10px;padding-bottom:8px;border-bottom:2px solid #eef1f5} .sec .wrap h3{font-size:15.5px;font-weight:800;margin:18px 0 6px} .sec .wrap p,.sec .wrap li{line-height:1.78;color:#39414f;font-size:14.5px} .sec .wrap ul,.sec .wrap ol{padding-left:20px;margin:0 0 14px} .sec .wrap section{margin:0 0 26px} /* 홈 «이용 방법» 3단계 — .sec.blk 안에는 목록 규칙이 없어(홈 CSS 는 카드·게시판만 다룬다) 번호가 상자 밖으로 잘려 나갔다. 여기서만 최소한으로 잡는다. */ .sec.blk ol.steps{padding-left:20px;margin:0;display:flex;flex-direction:column;gap:8px} .sec.blk ol.steps li{font-size:14.5px;line-height:1.75;color:#39414f} .sec.blk ol.steps li b{color:#1b1f24;font-weight:800} /* 펼침(공지·자주묻는질문) — snspang 은 JS 가 .open 을 붙여 열었다. 여기서는
가 열고 닫는다(JS 가 없어도 열린다). 그래서 그 두 규칙만 다시 잡는다. */ summary.brow,summary.faqq{list-style:none} summary.brow::-webkit-details-marker,summary.faqq::-webkit-details-marker{display:none} details.faqitem[open] .faqa{display:block} details.faqitem[open] .faqq{color:var(--accent-d)} details.faqitem[open] .faqq .qi{transform:rotate(90deg);color:var(--accent-d)} /* «준비중» 알약 — 카드 이름 옆에 붙는다. 홈·상품 CSS 에만 있어서 목록 화면에서는 글자만 남아 「늘리기준비중」처럼 붙어 보였다. 모든 화면에 실리는 여기로 옮긴다. */ .glb{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;background:#eef1f5; color:#5b6472;font-size:11px;font-weight:800;vertical-align:middle} /* ── 좁은 화면에서 새는 두 곳 ─────────────────────────────── ① 메가메뉴 판: 900px 아래에서는 여는 단추(.gnb)가 숨는데 판은 남아 있어서 5px 씩 가로로 삐져나왔다. 열 수 없는 판이니 함께 숨긴다. ② 유의사항 카드: .cauitem 안쪽 상자가 flex 항목이라 «가장 긴 문장 폭»으로 벌어졌다(min-width:auto). 390px 화면이 743px 로 늘어난 원인이 이것이다. */ @media(max-width:900px){.mega-panel{display:none}} .cauitem>div{min-width:0} /* ⚠ 이름 충돌 — 머리줄 오른쪽 메뉴가 «.info» 라서 white-space:nowrap 을 갖고 있다. 유의사항 카드의 .cauitem.info 가 그 규칙에 같이 걸려 문장이 한 줄로 늘어났고, 390px 화면이 743px 이 됐다. (상품 카드도 같은 이유로 .prod .info 에 normal 을 다시 준다) */ .cauitem{white-space:normal} /* 로고 글자 — snspang 은 로고가 그림이라 무료체험 화면 CSS 에는 글자 로고 규칙이 없다. 우리 로고는 글자다. 모든 화면에 실리는 여기에 둬야 한 화면만 검게 나오지 않는다. */ .brand .w1{color:#242b22} .brand .w2{color:var(--accent,#2563eb)} .brand .lf{width:13px;height:13px;color:var(--accent,#2563eb);margin:-3px 0 0 1px} /* ── 머리줄 잔액 칩 ───────────────────────────────────────── 로그인한 손님에게 «이름과 지금 쓸 수 있는 금액»을 머리줄에서 보여 준다. 눌러서 바로 충전 화면으로 간다. ⚠ .acct 규칙이 화면별 CSS(category·legal·home…)에 흩어져 있어서 칩은 여기 site.css 한 곳에만 둔다 — 화면마다 다르게 보이면 안 된다. */ .acct .bal{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none; background:#f4f7fc;border:1px solid #e2e8f2;border-radius:999px;padding:6px 14px; font-size:13px;font-weight:700;color:#5b6472;line-height:1.4} .acct .bal b{font-weight:800;color:#1f2430;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acct .bal span{font-weight:900;color:#1d4ed8;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .acct .bal:hover{border-color:#2563eb;background:#eef4ff} @media(max-width:860px){ /* 🔴 예전에는 좁아지면 이름을 접고 금액만 남겼다 (2026-09-11 에 되돌림). 이름이 있어야 «내 계정으로 들어와 있다»는 것이 한눈에 보인다. 자리는 아래 760px 블록이 만든다 — 긴 이름은 … 로 줄어든다. */ .acct .bal{padding:6px 11px;gap:5px} } /* ── 헤더 로고 ──────────────────────────────────────────────── ★ 글자 로고(.w1/.w2/.lf)를 그림으로 바꿨다. site.css 는 «맨 마지막»에 실리므로 화면별 css 에 남아 있는 .brand 글자 크기 규칙을 여기서 덮는다. ⚠ 높이만 정하고 폭은 auto 로 둔다 — 로고 비율이 틀어지면 글자가 눌린다. */ .brand img{display:block;height:36px;width:auto;max-width:100%} /* ⚠ 좁은 화면에서는 부제 없는 판이 내려온다(비율이 달라 높이도 따로 잡는다) */ @media(max-width:900px){ .brand img{height:22px} } /* ⚠ 로그인하면 머리줄에 이름·금액 칩이 붙는다. 로고가 193px 이면 390px 화면의 절반이라 칩이 들어갈 자리가 없다 — 좁은 화면에서 한 단 줄인다 (2026-09-11). */ @media(max-width:760px){ .brand img{height:17px} } @media(max-width:400px){ .brand img{height:16px} } /* ── 한글 줄바꿈 ──────────────────────────────────────────────── ⚠ 브라우저 기본값은 한글을 «글자 단위»로 끊는다. 「카카오톡 채널 게시 / 글 좋아요」 처럼 단어 한가운데가 갈라진다. keep-all 은 띄어쓰기에서만 끊게 한다 — 상품 이름이 길어지면서 드러난 문제다. */ .nm,.pd-title,h1,h2,h3,.card .nm,.cs-q,.cs-a{word-break:keep-all;overflow-wrap:break-word} /* 관리자 바로가기 — 관리자로 통과된 브라우저에만 그려진다 (2026-09-09) */ .admgo{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid #1c273e;border-radius:999px; font-size:11.5px;font-weight:800;color:#1c273e;white-space:nowrap;margin-left:6px} .admgo:hover{background:#1c273e;color:#fff} /* 🔴 hidden 속성이 «항상» 이긴다 (2026-09-09) ⚠ .packs{display:grid} 처럼 클래스에 display 를 주면 브라우저 기본값인 [hidden]{display:none} 을 눌러 버린다. 그래서 카카오맵 리뷰에서 「직접 작성」을 골랐는데도 자동 작성용 묶음 단추(30·60·90건)가 그대로 보였다. ⚠ 한 자리씩 고치면 새 칸을 만들 때마다 같은 사고가 난다 — 규칙 하나로 못 박는다. */ [hidden]{display:none !important} /* ── 손가락 표적 (2026-09-11) ───────────────────────────────────── 찍어 보니 머리줄 링크(마이페이지·로그아웃·가격표·블로그·고객센터)가 높이 20~21px, 꼬리줄 링크가 25px 이었다. 손가락 끝은 그보다 넓어 옆 링크를 누르기 쉽다. ★ 글자 크기·줄 간격은 그대로 두고 «누를 수 있는 넓이»만 키운다 — padding 으로 넓히고 같은 크기의 음수 margin 으로 자리를 되돌린다. ⚠ 데스크톱은 마우스라 필요 없다. 좁은 화면에서만 건다. */ @media (max-width: 860px) { /* ★ 이름을 좁은 화면에서도 «보여 준다» (2026-09-11). 내 계정으로 들어와 있다는 것을 이름만큼 빨리 알려 주는 것이 없다. 긴 이름은 … 로 줄인다 — 자리를 뺏기지 않는다. 🔴 로고는 줄어들면 안 된다. height 만 정해져 있고 폭은 «비율»로 정해지는데, 머리줄이 격자(grid)라 자리가 모자라면 그 칸을 통째로 줄여 버린다 — 193px 짜리 로고가 119px 로 납작해져 글자가 찌그러졌다. min-width:max-content 로 «내용보다 작아지지 않게» 못 박는다. ⚠ flex-shrink 로는 안 잡힌다. 격자 칸이라 그 속성이 일하지 않는다. 🔴 .acct 는 justify-self:end 라 «칸 크기와 상관없이 내용만큼» 넓어진다. 그래서 자리가 모자라면 왼쪽으로 넘쳐 로고를 덮었다 — 로고가 「MAST」까지만 보였다. 칸에 맞춰 늘리고(stretch) 내용은 오른쪽에 붙인다(flex-end). 보이는 자리는 같다. */ .brand { min-width: max-content; } .acct { justify-self: stretch; justify-content: flex-end; min-width: 0; } .acct .bal { gap: 5px; min-width: 0; padding: 6px 9px; } /* ⚠ 이름에 최소 폭을 «주지 않는다». 최소 폭을 박으면 자리가 모자랄 때 .acct 가 칸을 넘쳐 로고 위로 올라간다. 이름이 먼저 줄어드는 것이 맞다. */ .acct .bal b { display: inline-block; flex: 0 1 auto; min-width: 0; max-width: 5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct .bal span { flex: 0 0 auto; white-space: nowrap; } } @media (max-width: 760px) { /* 충전 보너스 띠 — 구간 넷을 다 적으면 석 줄이 된다. 「최대 10%」만 남긴다. */ .coupon .tiers{display:none} /* 손가락 표적 — 머리줄·꼬리줄 링크가 높이 20~25px 이라 옆 링크를 누르기 쉬웠다. ★ 글자 크기·줄 간격은 그대로 두고 «누를 수 있는 넓이»만 키운다 — padding 으로 넓히고 같은 크기의 음수 margin 으로 자리를 되돌린다. */ .acct a, .acct button, .fnav a, .mega .info a { padding: 9px 6px; margin: -9px -6px; } /* 자리는 «마이페이지» 글자 링크에서 가져온다 — 이름·금액 칩을 누르면 어차피 마이페이지로 간다. 좁은 화면에서 같은 곳으로 가는 링크를 둘 둘 이유가 없다. ⚠ 로그아웃은 남긴다. 나가는 길은 눈에 보여야 한다. 만 고른다 — 로그아웃은