/* * 점주 포털 전용 스타일. * * 디자인 토큰(색·라운드·그림자·폰트)과 공통 컴포넌트(.btn .card .badge .input .table .toast ...)는 * 관리자와 같은 /cms/assets/css/ops.css 를 그대로 쓴다. 여기에는 그 위에 얹는 * "점주 화면의 껍데기와 전용 컴포넌트" 만 둔다 — 두 벌로 나뉘면 반드시 어긋난다. * * 기준은 모바일이다. 점주는 대부분 휴대폰으로 들어온다. * --accent 는 레이아웃이 인라인으로 테넌트 포인트 컬러를 덮어쓴다. */ /* ───────────────────────────── 셸 ───────────────────────────── */ body.ads { background: var(--bg); /* 하단 탭바 + 홈 인디케이터 영역만큼 본문을 띄운다. */ padding-bottom: calc(64px + env(safe-area-inset-bottom)); } .ads-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border); } .ads-header__inner { max-width: 980px; margin: 0 auto; height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 12px; } .ads-brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 650; } .ads-brand:hover { text-decoration: none; } .ads-brand__logo { height: 26px; width: auto; max-width: 130px; object-fit: contain; display: block; } .ads-brand__mark { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; } .ads-brand__name { font-size: 15px; letter-spacing: -.02em; } .ads-nav { display: none; flex: 1; gap: 2px; margin-left: 12px; } .ads-nav__link { padding: 7px 13px; border-radius: var(--radius-full); font-size: 13.5px; font-weight: 550; color: var(--text-2); transition: background .18s var(--ease), color .18s var(--ease); } .ads-nav__link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .ads-nav__link.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; } .ads-main { max-width: 980px; margin: 0 auto; padding: 20px 16px 32px; } /* 하단 탭바(모바일) */ .ads-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; padding-bottom: env(safe-area-inset-bottom); background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--border); } .ads-tabbar__link { flex: 1; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 550; color: var(--text-3); } .ads-tabbar__link:hover { text-decoration: none; } .ads-tabbar__link svg { width: 21px; height: 21px; } .ads-tabbar__link.active { color: var(--accent); } @media (min-width: 861px) { body.ads { padding-bottom: 0; } .ads-nav { display: flex; } .ads-tabbar { display: none; } } .hide-sm { display: none; } @media (min-width: 561px) { .hide-sm { display: inline; } } /* ───────────────────────────── 페이지 머리 ───────────────────────────── */ .ads-page-head { margin-bottom: 18px; } .ads-page-head h1 { font-size: 22px; letter-spacing: -.03em; } .ads-page-head p { margin-top: 5px; font-size: 13.5px; color: var(--text-2); } /* ───────────────────────────── 요약 카드 ───────────────────────────── */ .ads-stats { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 861px) { .ads-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } } /* * 카드는 링크가 아니라 상자다. 다음 행동은 안에 있는 버튼 하나가 맡는다 — * 카드 전체를 로 두면 버튼을 넣는 순간 링크 안 링크가 된다. * * 버튼은 **오른쪽 위 한 자리에 고정**한다. 카드마다 내용 길이가 달라 * 흐름대로 두면 버튼 높이가 제각각이 되고, 그때부터 줄이 지저분해 보인다. */ .ads-stat { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 16px; box-shadow: var(--shadow-1); } .ads-stat__label { font-size: 12px; color: var(--text-2); font-weight: 550; } .ads-stat__value { margin-top: 5px; font-size: 22px; font-weight: 680; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .ads-stat__meta { margin-top: 3px; font-size: 11.5px; color: var(--text-3); } .ads-stat__action { position: absolute; top: 12px; right: 12px; } /* 버튼이 값 위에 겹치지 않게 오른쪽을 비워 둔다. */ .ads-stat:has(.ads-stat__action) .ads-stat__label, .ads-stat:has(.ads-stat__action) .ads-stat__value { padding-right: 76px; } .ads-stat--accent .ads-stat__value { color: var(--accent); } .ads-stat--warning .ads-stat__value { color: var(--warning); } /* ───────────────────────────── 상품 선택(P-04) ───────────────────────────── */ .ads-products { display: grid; gap: 10px; } @media (min-width: 761px) { .ads-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ads-product { position: relative; display: block; cursor: pointer; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 16px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } .ads-product input { position: absolute; opacity: 0; pointer-events: none; } .ads-product:hover { border-color: var(--border-strong); } .ads-product__name { font-size: 14.5px; font-weight: 650; letter-spacing: -.02em; } .ads-product__desc { margin-top: 6px; font-size: 12.5px; color: var(--text-2); line-height: 1.55; } .ads-product__price { margin-top: 10px; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; } .ads-product__badge { position: absolute; top: 12px; right: 12px; height: 20px; padding: 0 8px; border-radius: var(--radius-full); display: inline-flex; align-items: center; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 650; } .ads-product.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); } /* ───────────────────────────── 키워드 태그 ───────────────────────────── */ .ads-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 38px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); } .ads-tags:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .ads-tags__input { flex: 1; min-width: 120px; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 13.5px; color: var(--text); } .ads-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 6px 0 10px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 550; } .ads-tag button { width: 16px; height: 16px; border: 0; border-radius: 50%; padding: 0; background: rgba(0, 0, 0, .08); color: inherit; font-size: 12px; line-height: 1; cursor: pointer; } .ads-tag button:hover { background: rgba(0, 0, 0, .16); } /* * 태그 안의 월 검색량. * * 키워드 옆에 붙여야 "이 키워드가 그만큼 검색된다" 로 읽힌다 — 표로 따로 빼면 * 어느 줄이 어느 키워드인지 눈이 한 번 더 왔다 갔다 한다. */ .ads-tag__vol { font-weight: 500; font-size: 11.5px; opacity: .75; font-variant-numeric: tabular-nums; } /* 검색량이 기준 아래인 키워드. 막지는 않고 색으로만 알린다. */ .ads-tag.is-low { background: var(--warning-soft); color: #a76500; } /* ───────────────────── 키워드 추천(네이버 검색광고 키워드도구) ───────────────────── */ .ads-kw { margin-top: 10px; } .ads-kw__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); } .ads-kw__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ads-kw__chip { display: inline-flex; align-items: baseline; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; transition: all .16s var(--ease); } .ads-kw__chip:hover { background: var(--surface-2); color: var(--text); } /* 이미 넣은 키워드. 눌러도 중복으로 들어가지 않으므로 눌릴 것처럼 보이지 않게 한다. */ .ads-kw__chip.is-added { opacity: .45; cursor: default; } .ads-kw__chip.is-added:hover { background: var(--surface); color: var(--text-2); } .ads-kw__vol { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; } /* ───────────────────────────── 수량 슬라이더 ───────────────────────────── */ .ads-range { display: flex; align-items: center; gap: 12px; } .ads-range input[type="range"] { flex: 1; appearance: none; height: 4px; border-radius: 2px; background: var(--border-strong); outline: none; } .ads-range input[type="range"]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); cursor: pointer; } .ads-range input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); cursor: pointer; } .ads-range__value { width: 108px; } .ads-range__value .input { text-align: right; font-variant-numeric: tabular-nums; } .ads-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .ads-chip { height: 30px; padding: 0 12px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; transition: all .16s var(--ease); } .ads-chip:hover { background: var(--surface-2); color: var(--text); } .ads-chip.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } /* ───────────────────────────── 금액 패널 ───────────────────────────── */ .ads-amount { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 20; margin-top: 18px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); } @media (min-width: 861px) { .ads-amount { bottom: 16px; } } .ads-amount__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .ads-amount__label { font-size: 12.5px; color: var(--text-2); } .ads-amount__total { font-size: 24px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .ads-amount__meta { margin-top: 4px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; } .ads-amount__after { color: var(--text-2); } .ads-amount__shortage { color: var(--danger); font-weight: 600; } .ads-amount .btn { margin-top: 14px; height: 46px; font-size: 14.5px; } /* ───────────────────────────── 주문 카드(모바일 목록) ───────────────────────────── */ .ads-list { display: grid; gap: 10px; } .ads-item { display: block; padding: 15px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); transition: transform .14s var(--ease), box-shadow .18s var(--ease); } a.ads-item:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-2); } .ads-item__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ads-item__title { flex: 1; min-width: 140px; font-size: 15.5px; font-weight: 650; letter-spacing: -.02em; } a.ads-item__title { color: var(--text); } a.ads-item__title:hover { color: var(--accent); text-decoration: none; } /* 본문은 보조 정보가 아니라 **읽히는 값**이다. 흐릿한 회색 작은 글씨로 두지 않는다. */ .ads-item__meta { margin-top: 7px; font-size: 13.5px; color: var(--text); line-height: 1.65; } .ads-item__meta svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--text-3); } /* 키워드 배지 — 몇 개를 걸었는지가 세지 않아도 보여야 한다. */ .ads-item__keywords { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0; } .ads-kw { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 12.5px; font-weight: 560; letter-spacing: -.01em; } .ads-item__amount { font-size: 15px; font-weight: 680; font-variant-numeric: tabular-nums; } /* 진행률 — 승인 전에는 그리지 않는다(0% 막대는 "안 되고 있다" 로 읽힌다). */ .ads-item__progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .ads-item__progress .ads-progress { flex: 1; } .ads-item__progress .small { flex-shrink: 0; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; } /* 관리 버튼 — 금액과 같은 줄, 좁으면 아래로 접힌다. */ .ads-item__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .ads-item__foot .spacer { flex: 1; } .ads-item__actions { display: flex; gap: 6px; flex-wrap: wrap; } /* ───────────────────────────── 진행률 ───────────────────────────── */ .ads-progress { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; } .ads-progress__bar { height: 100%; border-radius: 3px; background: var(--accent); transition: width .4s var(--ease); } .ads-metrics { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 641px) { .ads-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ads-metric { text-align: center; padding: 14px 8px; background: var(--surface-2); border-radius: var(--radius); } .ads-metric__value { font-size: 19px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ads-metric__label { margin-top: 3px; font-size: 11.5px; color: var(--text-2); } /* 정의 목록(주문 상세) */ .ads-dl { display: grid; gap: 0; } .ads-dl > div { display: flex; gap: 12px; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .ads-dl > div:last-child { border-bottom: 0; } .ads-dl dt { color: var(--text-2); flex-shrink: 0; } .ads-dl dd { text-align: right; font-weight: 550; word-break: break-all; } .ads-dl dd.num { font-variant-numeric: tabular-nums; } /* ───────────────────────────── 빈 상태 ───────────────────────────── */ .ads-empty { padding: 48px 20px; text-align: center; } .ads-empty__icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); } .ads-empty__icon svg { width: 24px; height: 24px; } .ads-empty p { font-size: 14px; color: var(--text-2); } .ads-empty .btn { margin-top: 16px; } /* ───────────────────────────── 인증 화면(P-01 · P-02) ───────────────────────────── */ .ads-auth { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); } .ads-auth__card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 34px 26px; box-shadow: var(--shadow-3); } .ads-auth__brand { text-align: center; margin-bottom: 22px; } .ads-auth__logo { max-height: 40px; max-width: 180px; object-fit: contain; } .ads-auth__mark { width: 52px; height: 52px; margin: 0 auto; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 22px; font-weight: 700; } .ads-auth__title { margin-top: 14px; font-size: 18px; font-weight: 650; letter-spacing: -.02em; } .ads-auth__sub { margin-top: 5px; font-size: 13px; color: var(--text-2); line-height: 1.6; } .ads-auth .btn { height: 46px; font-size: 14.5px; } .ads-auth__foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; font-size: 12.5px; color: var(--text-3); line-height: 1.7; } /* 체크박스(약관) */ .ads-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; } .ads-check input { width: 17px; height: 17px; accent-color: var(--accent); } /* 계좌 안내 */ .ads-bank { padding: 15px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; line-height: 1.75; color: var(--text-2); white-space: pre-line; } .ads-bank strong { color: var(--text); font-weight: 650; } .num { font-variant-numeric: tabular-nums; } /* 토스트가 하단 탭바에 가리지 않게 띄운다. */ body.ads .toast-stack { left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); } body.ads .toast { min-width: 0; max-width: none; } @media (min-width: 861px) { body.ads .toast-stack { left: auto; right: 20px; bottom: 20px; } body.ads .toast { min-width: 260px; max-width: 400px; } } /* ───────────────────────────── 업로드 서류 ───────────────────────────── */ .ads-doc-list { display: grid; gap: 8px; } .ads-doc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; } .ads-doc a { flex: 1; display: inline-flex; align-items: center; gap: 6px; word-break: break-all; } .ads-doc svg { flex-shrink: 0; } /* ───────────────────────────── 충전 화면 ───────────────────────────── * 데스크톱에서 2열로 나눈다. "요청을 먼저 만들고 그 다음 입금" 이라는 순서와 * 입금 계좌가 **버튼을 누르는 순간에도 눈에 보여야** 하기 때문이다. * 예전에는 계좌 안내가 스크롤 한참 아래에 있어서 실질적으로 안 읽혔다. */ .ads-wallet { display: grid; gap: 14px; align-items: start; } @media (min-width: 861px) { .ads-wallet { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 16px; } /* 오른쪽 안내는 스크롤을 따라온다 — 금액을 입력하는 내내 계좌가 보인다. */ .ads-wallet__side { position: sticky; top: 76px; display: grid; gap: 14px; } } /* 금액 입력 — 이 화면에서 가장 중요한 숫자다. 가장 크게 둔다. */ .ads-money { display: flex; align-items: baseline; gap: 8px; padding: 18px 18px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .ads-money:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .ads-money__input { flex: 1; width: 100%; min-width: 0; border: 0; background: transparent; padding: 0; font: inherit; font-size: 34px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--text); } .ads-money__input:focus { outline: none; } .ads-money__input::placeholder { color: var(--text-3); } /* 숫자 입력이지만 type=text 다 — 콤마를 넣으려면 number 로는 안 된다. */ .ads-money__unit { font-size: 16px; font-weight: 600; color: var(--text-2); flex-shrink: 0; } /* 계산 내역 — 공급가 / 부가세 / 실제 입금액을 항상 셋 다 보여 준다. */ .ads-calc { margin-top: 14px; border-top: 1px dashed var(--border); } .ads-calc__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 2px; font-size: 13px; color: var(--text-2); } .ads-calc__row + .ads-calc__row { border-top: 1px solid var(--border); } .ads-calc__row b { font-weight: 550; color: var(--text); font-variant-numeric: tabular-nums; } .ads-calc__row--total { padding-top: 12px; font-size: 14px; color: var(--text); font-weight: 650; } .ads-calc__row--total b { font-size: 20px; font-weight: 750; letter-spacing: -.03em; color: var(--accent); } /* 충전 후 잔액 — 결과를 미리 보여 주면 금액을 다시 확인하러 올라가지 않는다. */ .ads-after { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 14px; background: var(--accent-soft); border-radius: var(--radius); font-size: 13px; color: var(--accent); font-weight: 600; } .ads-after b { font-variant-numeric: tabular-nums; font-size: 15px; } /* 안내 목록 — 아이콘을 앞에 세워 훑어읽기 쉽게. */ .ads-guide { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .ads-guide li { display: flex; gap: 9px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; } .ads-guide svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--text-3); } .ads-guide strong { color: var(--text); font-weight: 620; } .ads-guide li.is-warn svg { color: var(--warning); } /* 카드 제목 옆 아이콘 */ .card__head .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 9px; flex-shrink: 0; border-radius: 8px; background: var(--accent-soft); color: var(--accent); } .card__head .card__icon svg { width: 15px; height: 15px; } /* 계좌번호 — 복사가 잦아서 한 줄로 크게. */ .ads-account { display: flex; align-items: center; gap: 10px; } .ads-account__value { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; word-break: break-all; } /* ───────────────────────────── 내 플레이스 위젯 ───────────────────────────── * 네이버에서 읽어 온 값이라 "언제 기준인가" 가 항상 붙어야 한다. * 숫자만 크게 띄우면 점주는 그것이 실시간이라고 믿는다. */ .np-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .np-head__name { font-size: 15px; font-weight: 680; letter-spacing: -.02em; } .np-head__cat { font-size: 12px; color: var(--text-3); } .np-metrics { display: grid; gap: 8px; margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 지표가 5칸이 되면서 고정 4열로는 마지막 칸만 혼자 남는다 — 폭에 맞춰 접히게 둔다. */ @media (min-width: 641px) { .np-metrics { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } } .np-metric { padding: 12px 13px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); } .np-metric__label { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); font-weight: 550; } .np-metric__label svg { width: 13px; height: 13px; color: var(--text-3); } .np-metric__value { margin-top: 6px; font-size: 20px; font-weight: 720; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .np-metric__diff { margin-top: 3px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text-3); } .np-metric__diff.is-up { color: var(--success); font-weight: 620; } .np-metric__diff.is-down { color: var(--danger); font-weight: 620; } .np-metric--star .np-metric__value { color: var(--warning); } /* 순위 목록 */ .np-ranks { display: grid; gap: 8px; margin-top: 16px; } .np-rank { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); } .np-rank__keyword { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 580; word-break: break-all; } /* 광고 중인 키워드 표시 — 기본 키워드와 한 줄에 섞이므로 이게 없으면 왜 있는지 알 수 없다. */ .np-rank__tag { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.6; vertical-align: 1px; word-break: keep-all; } .np-rank__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 28px; padding: 0 9px; border-radius: 999px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--text-2); } /* 상위 3위는 눈에 띄게 — 광고가 실제로 먹히고 있다는 신호다. */ .np-rank__badge.is-top { background: var(--accent-soft); color: var(--accent); } .np-rank__badge.is-out { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-3); font-weight: 550; } .np-rank__diff { font-size: 12px; font-weight: 620; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; } .np-rank__diff.is-up { color: var(--success); } .np-rank__diff.is-down { color: var(--danger); } .np-rank__diff.is-same { color: var(--text-3); font-weight: 500; } .np-rank.is-loading .np-rank__badge { opacity: .45; } /* 갱신 시각 · 출처 */ .np-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-3); } .np-foot svg { width: 13px; height: 13px; } .np-foot__spacer { flex: 1; } /* 로딩 점 세 개 */ .np-dots::after { content: '·'; animation: npDots 1.2s steps(3, end) infinite; } @keyframes npDots { 0% { content: '·'; } 33% { content: '··'; } 66% { content: '···'; } } /* ───────────────────────────── 내 플레이스 — 헤더·사진·경쟁사 ───────────────────────────── */ /* 매장 선택 탭. 매장이 둘 이상일 때만 그린다. */ .np-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .np-tab { padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 580; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); } .np-tab:hover { text-decoration: none; border-color: var(--border-strong); color: var(--text); } .np-tab.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 680; } /* 업체 헤더 — 사진 한 장 + 이름·업종·주소·전화 */ .np-profile { display: flex; gap: 14px; align-items: flex-start; } .np-profile__thumb { width: 78px; height: 78px; flex-shrink: 0; border-radius: var(--radius); object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); } .np-profile__body { flex: 1; min-width: 0; } .np-profile__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .np-profile__name { font-size: 16px; font-weight: 700; letter-spacing: -.03em; } .np-profile__meta { margin-top: 6px; font-size: 12.5px; color: var(--text-2); line-height: 1.65; } .np-profile__meta div { display: flex; align-items: flex-start; gap: 6px; } .np-profile__meta svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 3px; color: var(--text-3); } /* 사진 스트립 — 가로 스크롤. 세로로 쌓으면 위젯이 화면을 다 먹는다. */ .np-photos { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .np-photos::-webkit-scrollbar { display: none; } .np-photos img { width: 104px; height: 78px; flex-shrink: 0; border-radius: var(--radius); object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); } .np-photos a { flex-shrink: 0; line-height: 0; } .np-photos a:hover { text-decoration: none; } /* ───────────────── 사진 · 클립 ───────────────── * 탭으로 갈라 두지 않는다 — 둘 다 "내 플레이스에 걸려 있는 그림" 이라 한 줄로 이어 붙인다. */ .np-media { margin-top: 14px; } .np-media .np-photos { margin-top: 10px; } /* * 가로 넘기기. * * 외부 스와이퍼 라이브러리를 붙이지 않는다(CDN 금지). 스크롤 스냅 + 좌우 버튼이면 같은 일을 한다. * 버튼은 넘칠 때만 JS 가 켠다 — 항상 보이면 더 있는 줄 알고 누르게 된다. */ .np-strip { position: relative; } .np-strip .np-photos { scroll-snap-type: x proximity; scroll-behavior: smooth; } .np-strip .np-photos > a { scroll-snap-align: start; } .np-strip__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 28px; height: 28px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-family: inherit; font-size: 17px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-2); } .np-strip__nav:hover { border-color: var(--accent); color: var(--accent); } .np-strip__nav--prev { left: -6px; } .np-strip__nav--next { right: -6px; } .np-strip__nav[hidden] { display: none; } /* 클립은 사진과 같은 스트립을 쓰되 재생 표시를 얹는다. 재생은 네이버에서 한다. */ .np-clip { position: relative; display: block; } .np-clip__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: 10px; line-height: 1; } /* 사진과 같은 줄에 서므로 글자로 한 번 더 말해 준다 — 재생 버튼만으로는 놓친다. */ .np-clip__tag { position: absolute; left: 5px; top: 5px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.5; } .np-clip__count { position: absolute; right: 5px; bottom: 5px; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10px; font-weight: 600; } /* 메뉴 — 이름·설명·가격 한 줄. 가격은 "변동"·"시가" 처럼 글자로 오기도 한다. * 대시보드에서는 메뉴 목록을 빼둔 상태다(수집·저장은 계속 한다). 다시 뿌릴 때를 위해 남겨 둔다. */ .np-menus { display: grid; gap: 8px; margin-top: 10px; max-height: 320px; overflow-y: auto; } .np-menu { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); } .np-menu img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: var(--surface); border: 1px solid var(--border); } .np-menu__body { flex: 1; min-width: 0; } .np-menu__name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } .np-menu__desc { margin-top: 2px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .np-menu__price { flex-shrink: 0; font-size: 12.5px; font-weight: 620; font-variant-numeric: tabular-nums; color: var(--text-2); } /* 업체 소개 한 줄 · 바로가기 링크 */ .np-intro { margin-top: 6px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; } .np-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .np-links a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 550; } .np-links svg { width: 13px; height: 13px; } /* 편의·시설·결제 — 원고를 쓸 때 실제로 쓰이는 재료라 라벨을 붙여 나눈다. */ .np-facts { display: grid; gap: 8px; margin-top: 14px; } .np-fact { display: flex; align-items: flex-start; gap: 10px; } .np-fact__label { width: 62px; flex-shrink: 0; padding-top: 3px; font-size: 11.5px; font-weight: 620; color: var(--text-3); } .np-fact__chips { display: flex; flex-wrap: wrap; gap: 5px; } .np-chip { padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; color: var(--text-2); } /* 블로그 리뷰 — 제목과 링크만. 본문은 남의 글이라 뿌리지 않는다. */ .np-blog { display: block; padding: 8px 2px; border-bottom: 1px solid var(--border); } .np-blog:last-child { border-bottom: 0; } .np-blog:hover { text-decoration: none; } .np-blog__title { display: block; font-size: 12.5px; color: var(--text); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .np-blog:hover .np-blog__title { color: var(--accent); } .np-blog__meta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-3); } /* 경쟁사 비교 막대 */ .np-versus { display: grid; gap: 16px; margin-top: 12px; } .np-versus__title { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 620; } .np-versus__title .dim { font-weight: 400; } .np-bar { display: flex; align-items: center; gap: 10px; margin-top: 7px; font-size: 12.5px; } .np-bar__label { width: 76px; flex-shrink: 0; color: var(--text-2); } .np-bar__track { flex: 1; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .np-bar__fill { height: 100%; border-radius: 999px; background: var(--border-strong); transition: width .5s var(--ease); } .np-bar--mine .np-bar__fill { background: var(--accent); } .np-bar--mine .np-bar__label { color: var(--text); font-weight: 620; } .np-bar__value { width: 74px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .np-verdict { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.6; } .np-verdict svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; } .np-verdict.is-good { background: var(--success-soft, rgba(22,163,74,.08)); color: var(--success); } .np-verdict.is-bad { background: var(--danger-soft); color: #c9241a; } .np-verdict b { font-weight: 700; } /* 두 칸 배치 — 순위 / 경쟁사 */ .np-split { display: grid; gap: 16px; margin-top: 18px; } @media (min-width: 861px) { .np-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .np-split__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .np-split__head span:first-child { font-size: 13.5px; font-weight: 650; } /* ───────────────────────────── 사진첩 ───────────────────────────── * 본사 관리 화면과 접수 선택 화면이 같은 마크업을 쓴다(page/partial/photo_album.php). */ /* 드롭존 — 폰에는 드래그가 없으므로 눌러도 파일 선택이 열린다. */ .ph-drop { display: flex; align-items: center; gap: 12px; padding: 16px 18px; margin-bottom: 12px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); cursor: pointer; transition: border-color .16s var(--ease), background .16s var(--ease); } .ph-drop:hover, .ph-drop.is-over { border-color: var(--accent); background: var(--accent-soft); } .ph-drop__icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); } .ph-drop__icon svg { width: 18px; height: 18px; } .ph-drop__text { display: grid; gap: 2px; font-size: 13px; } .ph-drop__text .dim { font-size: 11.5px; } /* 업로드 전 확인 패널 — 413 대신 사람이 읽을 수 있는 말을 보여 주는 유일한 장치다. */ .ph-plan { padding: 14px 16px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .ph-plan__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; } .ph-plan__head .spacer { flex: 1; } .ph-plan__note { margin-top: 6px; } /* 선택바 */ .ph-selbar { position: sticky; top: 64px; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 10px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; } .ph-selbar .spacer { flex: 1; } .ph-selbar__main { font-weight: 500; } /* * 대표 이미지. * * 고른 사진에만 뜬다 — 안 고른 사진에 대표 버튼이 있으면 무엇이 나가는지 헷갈린다. * 지정된 한 장은 배지가 채워져 한눈에 구분된다. */ .ph-item__main { position: absolute; left: 6px; bottom: 34px; z-index: 2; display: none; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .55); color: #fff; font-family: inherit; font-size: 10.5px; font-weight: 650; line-height: 1.5; cursor: pointer; } .ph-item.is-on .ph-item__main { display: inline-block; } .ph-item.is-main .ph-item__main { display: inline-block; background: var(--accent); border-color: var(--accent); } .ph-item.is-main { box-shadow: 0 0 0 2px var(--accent); } .ph-album__empty { margin-bottom: 12px; } /* * `[hidden]` 을 실제로 숨긴다. * * UA 기본 `[hidden]{display:none}` 은 **요소 선택자 규칙에 진다.** `.notice{display:flex}` 나 * `.ph-selbar{display:flex}` 가 있으면 hidden 을 붙여도 그대로 보인다 — * 서버가 숨겨 보낸 것이 화면에 뜨는, 눈치채기 어려운 종류의 버그다. */ .ph-album [hidden] { display: none !important; } /* ── 칸(소분류) ────────────────────────────────────────── * "원고에 쓸 사진" 한 덩어리만 보면 점주는 무엇을 몇 장 올려야 하는지 모른다. * 칸마다 이름·설명·최소 장수를 적어 두면 그 질문이 화면에서 끝난다. */ .ph-group + .ph-group { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .ph-group__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .ph-group__title { flex: 1; min-width: 0; display: grid; gap: 2px; } .ph-group__title strong { font-size: 14px; font-weight: 650; letter-spacing: -.02em; } .ph-group__hint { font-size: 12px; color: var(--text-2); line-height: 1.55; } /* 개수는 **고른 장수** 다 — 100장 올려 두고 3장만 골랐는데 "채움" 이라고 하면 거짓말이 된다. */ .ph-group__count { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 650; color: var(--text-2); white-space: nowrap; } /* 색은 뱃지(.badge--success/--warning)와 같은 조합을 쓴다 — 화면마다 다른 초록을 만들지 않는다. */ .ph-group__count.is-ok { background: var(--success-soft); border-color: transparent; color: #1d8a3a; } .ph-group__count.is-short { background: var(--warning-soft); border-color: transparent; color: #a76500; } .ph-group__note { display: flex; align-items: flex-start; gap: 7px; padding: 8px 11px; margin-bottom: 10px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-size: 12px; line-height: 1.55; } .ph-group__note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; } /* 카드 안의 분류 드롭다운 — 잘못 넣은 사진을 지웠다 다시 올리지 않아도 되게 한다. */ .ph-item__move { flex: 1; min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text-2); font-family: inherit; font-size: 11px; line-height: 1.4; padding: 2px 4px; cursor: pointer; } .ph-item__move:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; } .ph-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .ph-item { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); } .ph-item img { display: block; width: 100%; height: 110px; object-fit: cover; } .ph-item__bar { display: flex; align-items: center; gap: 6px; padding: 7px 9px; font-size: 11.5px; color: var(--text-2); background: var(--surface); border-top: 1px solid var(--border); } .ph-item__caption { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph-item__del { border: 0; background: transparent; color: var(--text-3); cursor: pointer; /* 아이콘이 아니라 × 글자다 — line-height:0 이면 글자가 잘린다. */ width: 18px; height: 18px; flex-shrink: 0; padding: 0; border-radius: 4px; font-size: 15px; line-height: 1; font-family: inherit; } .ph-item__del:hover { color: var(--danger); background: var(--danger-soft); } .ph-item__badge { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 650; background: rgba(0,0,0,.6); color: #fff; } /* 접수 화면의 사진 선택 */ .ph-pick { position: relative; cursor: pointer; } .ph-pick input { position: absolute; opacity: 0; pointer-events: none; } .ph-pick.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .ph-pick__check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.85); border: 1px solid var(--border); color: transparent; } .ph-pick.is-on .ph-pick__check { background: var(--accent); border-color: var(--accent); color: #fff; } .ph-pick__check svg { width: 13px; height: 13px; } /* 본사 가이드 — 점주 화면에서는 읽기 전용 */ /* * 줄바꿈은 살리되 **템플릿 들여쓰기는 살리지 않는다.** * * 상자 자체에 `pre-wrap` 을 걸면 PHP 를 예쁘게 들여쓴 공백까지 화면에 나온다 * (첫 줄 앞이 크게 비어 보였다). 본문만 `__body` 로 감싸 거기에만 건다. */ .guide-box { padding: 13px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; line-height: 1.7; color: var(--text-2); word-break: break-word; } .guide-box__body { white-space: pre-wrap; } .guide-box + .guide-box { margin-top: 10px; } .guide-box__head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 12px; font-weight: 650; color: var(--text); } .guide-box__head svg { width: 14px; height: 14px; color: var(--text-3); } /* ───────────────────────────── 경쟁사 목록 ───────────────────────────── * "경쟁사 평균"만 보여 주면 그 숫자가 어디서 왔는지 알 수 없다. * 평균에 실제로 들어간 업체를 **펼쳐서** 함께 둔다 — * 접어 두면 대부분 열어 보지 않고, 근거가 없는 숫자로 남는다. */ /* * 접히는 묶음 — 지금은 블로그 리뷰(감춰 둔 상태)만 쓴다. * 경쟁사 목록은 여기서 빠졌다. 근거가 되는 목록은 접지 않는다. */ .np-fold > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); } .np-fold > summary::-webkit-details-marker { display: none; } .np-fold > summary:hover { color: var(--text); } .np-fold > summary svg { width: 13px; height: 13px; transition: transform .18s var(--ease); } .np-fold[open] > summary svg { transform: rotate(180deg); } .np-rivals { margin-top: 12px; } .np-rivals__head { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-2); } .np-rivals__head svg { width: 13px; height: 13px; flex-shrink: 0; } .np-rivals__list { margin-top: 4px; } .np-rival { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 12.5px; border-bottom: 1px solid var(--border); } .np-rival:last-child { border-bottom: 0; } .np-rival__rank { width: 24px; flex-shrink: 0; text-align: center; font-size: 11.5px; font-weight: 650; color: var(--text-3); font-variant-numeric: tabular-nums; } .np-rival__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .np-rival__num { flex-shrink: 0; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; } /* 기본 키워드 안내 배지 */ .np-fallback { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11px; color: var(--text-2); font-weight: 550; } /* 순위 항목을 누르면 그 키워드의 경쟁사 비교로 바뀐다. */ .np-rank { cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); } .np-rank:hover { border-color: var(--border-strong); } .np-rank.is-picked { border-color: var(--accent); background: var(--accent-soft); } .np-rank.is-picked .np-rank__keyword { font-weight: 680; color: var(--accent); } /* 비교할 자료가 없는 항목은 눌러도 바뀌지 않는다 — 눌리는 것처럼 보이지 않게. */ .np-rank.is-flat { cursor: default; } .np-rank.is-flat:hover { border-color: var(--border); }