/* * 점주 포털 전용 스타일. * * 디자인 토큰(색·라운드·그림자·폰트)과 공통 컴포넌트(.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 { flex-shrink: 0; display: flex; align-items: center; color: var(--text); font-weight: 650; } .ads-brand:hover { text-decoration: none; } /* * 워드마크(가로로 긴 로고)가 대부분이라 폭을 고정하지 않는다. * 좁은 화면에서는 인사말과 자리를 다투므로 상한을 더 줄인다. */ .ads-brand__logo { height: 26px; width: auto; max-width: 112px; 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; } /* * 인사말 — `안녕하세요, 센트럴시티점 점주님`. * * DOM 에는 메뉴와 로그아웃 사이 **한 자리**뿐이고, 폭에 따라 서는 곳이 달라진다. * 좁은 화면 메뉴가 없으므로 브랜드 바로 옆(예전 브랜드명 자리) * 넓은 화면 메뉴가 남는 폭을 먹으므로 자연히 로그아웃 왼쪽 * * 길면 말줄임한다 — 매장명이 긴 지점에서 로그아웃 버튼을 밀어내면 안 된다. */ .ads-greet { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--text); } .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; } /* 넓은 화면에서는 메뉴가 주인공이다. 인사말은 로그아웃 옆에 **작게** 붙는다. */ .ads-greet { flex: 0 1 auto; max-width: 280px; font-size: 13px; font-weight: 500; color: var(--text-2); } } /* 좁은 화면 — 로고·인사말·로그아웃이 자리를 다툰다. 여백과 로고 상한부터 줄인다. */ @media (max-width: 400px) { .ads-header__inner { gap: 8px; padding: 0 12px; } .ads-brand__logo { max-width: 84px; } .ads-greet { font-size: 14px; } } /* * 그래도 안 들어가는 화면(320px 급 구형 기기)에서만 `안녕하세요,` 를 접는다. * * 실측: 인사말 전체가 188px, 340px 화면에서 쓸 수 있는 폭이 200px — * 그 아래에서만 말줄임이 시작된다. 잘려야 한다면 **잘릴 것은 인사지 매장명이 아니다.** * (매장명이 아주 긴 지점은 넓은 화면에서도 말줄임이 걸린다. 그때도 앞쪽 = 이름이 남는다) */ @media (max-width: 340px) { .ads-greet__hi { 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-tag__vol.is-pending { display: inline-block; width: 42px; height: 9px; border-radius: 4px; background: currentColor; opacity: .22; animation: ads-pulse 1.3s var(--ease) infinite; } @keyframes ads-pulse { 0%, 100% { opacity: .16; } 50% { opacity: .36; } } @media (prefers-reduced-motion: reduce) { .ads-tag__vol.is-pending { animation: none; } } /* ───────────────────────────── 수량 슬라이더 ───────────────────────────── */ .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__kw` 인 이유: 예전엔 `.ads-kw` 였는데 접수 화면의 **추천 목록 컨테이너**가 * 같은 이름을 쓰고 있었다. 이 규칙이 파일 뒤쪽이라 컨테이너를 덮어써 목록이 겹쳤다. * 배지는 `.ads-item` 카드 안의 것이므로 그 이름 아래로 넣어 전역 이름을 비운다. */ .ads-item__keywords { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0; } .ads-item__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); } /* ═════════════════════ 점주 홈 (/ads/main) ═════════════════════ * * 2026-09 개편분. 피그마 시안(node 135:335, 폭 616 = 584 + 좌우 16)의 수치를 그대로 옮겼다. * * 이름을 `hm-`(home) 으로 완전히 갈라 둔 이유가 있다 — * 옛 홈이 쓰던 `.ads-stat*` · `.np-*` 는 `/ads/main/legacy` 가 아직 쓰고 있어 손대면 안 되고, * 예전에 `.ads-kw` 를 두 컴포넌트가 나눠 쓰다 뒤 규칙이 앞을 덮어써 레이아웃이 겹쳐 깨진 적이 있다. * * 색은 되도록 ops.css 토큰을 쓴다(다크 모드가 저절로 따라온다). * 토큰과 정확히 맞아떨어진 것: `--text`(#1d1d1f) · `--text-2`(#6e6e73) · * `--accent-soft`(#e8f2fe) · `--danger-soft`(#ffecea) · `--success-soft`(#e7f8ec). * 나머지 시안 고유색만 아래 스코프 변수로 둔다. */ /* * `.hm` 은 새 시안 화면들의 **공통 껍데기**다(홈 `/ads/main` · 이용안내 `/ads/guide`). * 폭·그림자·선 색·자간이 같은 시안에서 나온 값이라, 화면마다 따로 두면 조금씩 어긋난다. * 화면 고유의 것은 각자 접두어로 둔다 — 홈은 `.hm-*`, 이용안내는 `.gd-*`. */ .hm { /* 시안 본문 폭. `.ads-main` 은 980 이라 이 화면만 좁혀 가운데 세운다(2열은 만들지 않는다). */ max-width: 584px; margin: 0 auto; /* 시안의 tracking 은 크기와 무관하게 전부 -3% 였다 — 요소마다 적지 않고 한 줄로 상속시킨다. */ letter-spacing: -.03em; --hm-ink: #5f626b; /* 표·목록 본문 회색(시안 고유) */ --hm-dim: #92959d; /* 더 흐린 보조 글자 */ --hm-line: #ededf1; /* 표 선 */ --hm-bad: #c9241a; /* 부족 */ --hm-good: #16a34a; /* 충분 */ --hm-good-text: #3fcb63; /* 초록 배지 안 글자(시안이 본문보다 밝게 썼다) */ --hm-track: rgba(217, 217, 217, .7); /* * 순위 펼침의 **연출 시간표**. 목록 → 그래프 → 판정 → 조언이 이 값들로 이어진다. * JS(`playVerdict`)가 이 변수를 그대로 읽어 타이핑 속도를 맞추므로 **여기가 유일한 정답**이다. */ --hm-step: 100ms; /* 줄 하나가 다음 줄에 밀리는 간격(`--i` 에 곱한다) */ --hm-bar-start: 520ms; /* 목록이 다 나타난 뒤 막대가 자라기 시작할 때까지 */ --hm-bar-run: 1500ms; /* 막대가 다 자라는 데 걸리는 시간 = 판정 타이핑 시간 */ --hm-advice-lead: 400ms; /* 조언이 그래프보다 얼마나 먼저 올라오는가 */ /* 시안 카드 그림자 — 사방으로 퍼지는 옅은 파란 기. */ --hm-shadow: 0 4px 12px rgba(22, 119, 255, .05), 0 -4px 12px rgba(22, 119, 255, .05), 4px 0 12px rgba(22, 119, 255, .05), -4px 0 12px rgba(22, 119, 255, .05); } @media (prefers-color-scheme: dark) { .hm { --hm-ink: #a8abb3; --hm-dim: #8e8e93; --hm-line: #38383a; --hm-bad: #ff6b60; --hm-good: #4ade80; --hm-good-text: #4ade80; --hm-track: rgba(120, 120, 128, .4); --hm-shadow: var(--shadow-2); } } /* * `[hidden]` 을 실제로 숨긴다. * UA 기본 `[hidden]{display:none}` 은 **클래스 규칙에 진다.** 사진 넘김 버튼이 `display:flex` 라 * 이 줄이 없으면 서버가 `hidden` 으로 내려도 그대로 보인다. 사진첩(`.ph-album`)이 한 번 걸렸던 자리다. */ .hm [hidden] { display: none !important; } /* 인사 — 시안 28px Bold. 좁은 화면에서는 두 줄이 되지 않게 줄인다. */ .hm-greet { margin-bottom: 20px; font-size: clamp(22px, 5.6vw, 28px); font-weight: 700; line-height: 1.3; color: var(--text); } .hm-card { /* `relative` 는 설명 말풍선(`.hm-tip`)이 이 카드 안에서 떠 있기 위한 기준이다. */ position: relative; margin-bottom: 16px; padding: 32px 24px; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--hm-shadow); } /* 매장이 없거나 플레이스가 안 붙은 경우 — 이 화면은 전부 플레이스 자료라 보여 줄 것이 없다. */ .hm-empty { padding: 40px 24px; text-align: center; color: var(--text-2); font-size: 14px; line-height: 1.7; } .hm-empty svg { width: 28px; height: 28px; margin-bottom: 10px; color: var(--text-3); } /* ── 매장 ─────────────────────────────────────────── */ .hm-store__name { display: inline-block; font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--text); } a.hm-store__name:hover { color: var(--accent); text-decoration: none; } .hm-store__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 15px; color: #424242; } .hm-store__meta span + span::before { content: "·"; margin-right: 6px; color: #c9c9c9; } .hm-store__rating { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; color: #424242; } .hm-store__ratingLabel { font-weight: 600; } /* * 별점 — 회색 별 위에 노란 별을 겹치고 **위층을 점수 비율(`--score`)만큼만** 보여 준다. * 반 칸짜리 아이콘을 따로 만들 필요가 없고, 4.4 와 4.6 이 다르게 보인다. * 시안 크기: 별 17px 다섯 개(약 106px). */ .hm-stars { position: relative; display: inline-block; line-height: 0; } .hm-stars__row { display: flex; gap: 1.5px; } /* 시안 실측: 별 5개가 106px 안에 거의 붙어 선다(20px + 1.5px). 색은 노랑이 아니라 빨강 계열. */ .hm-stars__row svg { width: 20px; height: 20px; color: #ef4444; } /* 못 채운 별은 **회색 채움이 아니라 외곽선만**이다 — 여기가 시안과 가장 달랐던 곳. */ .hm-stars__row:not(.hm-stars__row--on) svg { fill: none; stroke: currentColor; stroke-width: 1.6; } .hm-stars__row--on { position: absolute; inset: 0; width: var(--score, 0%); overflow: hidden; } .hm-stars__row--on svg { flex-shrink: 0; fill: currentColor; stroke: none; } @media (prefers-color-scheme: dark) { .hm-store__meta, .hm-store__rating { color: var(--text-2); } } /* ── 사진 ─────────────────────────────────────────── */ .hm-photos { position: relative; margin-top: 16px; } .hm-photos__track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .hm-photos__track::-webkit-scrollbar { display: none; } /* 시안 210×210, radius 12, 어두운 바탕(사진이 뜨기 전에도 자리가 비어 보이지 않게). */ .hm-photo { flex: 0 0 auto; width: 210px; height: 210px; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; background: #020202; } .hm-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 넘칠 때만 켠다(JS 가 폭을 잰다). 눌러도 안 움직이는 버튼을 두지 않는다. */ .hm-photos__nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-2); color: var(--text-2); cursor: pointer; } .hm-photos__nav:hover { color: var(--text); } .hm-photos__nav--prev { left: 4px; } .hm-photos__nav--next { right: 4px; } .hm-photos__nav svg { width: 20px; height: 20px; } /* 아래를 가리키는 chevron 하나로 좌·우를 만든다(아이콘을 늘리지 않는다). */ .hm-photos__nav--prev svg { transform: rotate(90deg); } .hm-photos__nav--next svg { transform: rotate(-90deg); } /* ── 리뷰 현황 ────────────────────────────────────── */ .hm-panel { margin-top: 24px; padding: 16px; background: #f7f7f7; border-radius: var(--radius-sm); } .hm-panel__title { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--text); } @media (prefers-color-scheme: dark) { .hm-panel { background: var(--surface-2); } } .hm-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .hm-review { display: flex; flex-direction: column; align-items: center; min-height: 128px; padding: 19px 8px 8px; text-align: center; background: var(--surface); border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(0, 0, 0, .03), 0 -4px 12px rgba(0, 0, 0, .03), 4px 0 12px rgba(0, 0, 0, .03), -4px 0 12px rgba(0, 0, 0, .03); } .hm-review__label { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--text-2); } .hm-review__label svg { width: 18px; height: 18px; } .hm-review__value { margin-top: 4px; font-size: 32px; font-weight: 700; line-height: 32px; color: var(--text); font-variant-numeric: tabular-nums; } /* 숫자 색이 곧 판단이다. 비교 자료가 없으면 색을 주지 않는다(중립). */ .hm-review.is-good .hm-review__value { color: var(--hm-good); } .hm-review.is-bad .hm-review__value { color: var(--hm-bad); } /* 판정 배지는 카드 바닥에 붙는다. */ .hm-review .hm-verdict { margin-top: auto; width: 100%; } .hm-verdict { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 28px; padding: 5px 8px; border-radius: 4px; font-size: 14px; font-weight: 500; line-height: 1.3; } .hm-verdict svg { width: 20px; height: 20px; flex-shrink: 0; } .hm-verdict.is-good { background: var(--success-soft); color: var(--hm-good-text); } .hm-verdict.is-bad { background: var(--danger-soft); color: var(--hm-bad); } /* * 한 자씩 찍히는 문구. * * 글자가 늘어나는 동안 아이콘이 좌우로 밀리지 않게 **최종 길이만큼 자리를 미리 잡아 둔다** * (`--len` 은 JS 가 글자 수를 넣는다). 배지 자체는 폭이 고정이라 높이는 흔들리지 않는다. */ /* * `min()` 으로 상한을 둔다 — 자리를 잡아 두는 건 좋지만, 좁은 화면에서는 이 최소 너비가 * 배지 → 비교 블록 → 순위 줄로 전파되어 **카드를 통째로 밀어낸다**(375px 에서 71px 넘쳤다). * 부모보다 넓어지지 않게 잘라 두면 자리 잡기와 폭 안전을 같이 얻는다. */ .hm-verdict__text { display: inline-block; text-align: left; min-width: min(calc(var(--len, 0) * 1ch), 100%); } /* * 재는 중 → 판정, 두 단계. * * 재는 동안에는 색을 주지 않는다(중립 회색) — 판정이 나오기 전에 초록/빨강이 보이면 * 결과를 미리 알려 주는 셈이라 재는 시늉이 거짓말이 된다. * 스크립트가 없으면 `is-thinking` 이 아예 안 붙어 결론이 처음부터 보인다. */ .hm-verdict__think { display: none; align-items: center; gap: 2px; } .hm-verdict.is-thinking { background: var(--surface-2); color: var(--hm-dim); } .hm-verdict.is-thinking .hm-verdict__think { display: inline-flex; } .hm-verdict.is-thinking > svg, .hm-verdict.is-thinking .hm-verdict__text { display: none; } /* 생각하는 점 셋. 순서대로 밝아진다. */ .hm-verdict__think i { width: 3px; height: 3px; margin-top: 6px; border-radius: 50%; background: currentColor; animation: hm-dots 1.1s var(--ease) infinite; } .hm-verdict__think i:nth-child(1) { margin-left: 4px; } .hm-verdict__think i:nth-child(2) { animation-delay: .15s; } .hm-verdict__think i:nth-child(3) { animation-delay: .3s; } @keyframes hm-dots { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } } /* 판정이 나오는 순간 아이콘이 먼저 톡 뜨고, 글자가 이어서 찍힌다. */ .hm-verdict:not(.is-thinking) > svg { animation: hm-pop .32s var(--ease) both; } @keyframes hm-pop { from { opacity: 0; transform: scale(.4); } 60% { transform: scale(1.12); } to { opacity: 1; transform: none; } } /* ── 검색 순위 ────────────────────────────────────── */ .hm-ranks__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .hm-ranks__title { display: flex; align-items: center; gap: 8px; } .hm-ranks__tools { display: flex; align-items: center; gap: 12px; } .hm-help { display: flex; width: 16px; height: 16px; padding: 0; border: 0; background: transparent; color: var(--hm-ink); cursor: pointer; } .hm-help svg { width: 16px; height: 16px; } .hm-refresh { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 0; border: 0; background: transparent; color: var(--hm-ink); font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: inherit; cursor: pointer; } .hm-refresh:hover { color: var(--text); } .hm-refresh svg { width: 18px; height: 18px; } /* * 처리 중 — 아이콘이 돈다. `ADS.withBusy()` 는 글자를 갈아 끼우느라 이 SVG 를 지워 버려서 안 쓴다. * 끝나면 클래스만 빠지고 아이콘은 그대로 남는다. */ .hm-refresh.is-busy { color: var(--accent); cursor: default; } .hm-refresh.is-busy svg { animation: hm-spin .9s linear infinite; } @keyframes hm-spin { to { transform: rotate(360deg); } } .hm-when { font-size: 14px; color: var(--hm-dim); font-variant-numeric: tabular-nums; } .hm-note { margin-bottom: 16px; font-size: 14px; color: var(--hm-dim); line-height: 1.6; } .hm-rank-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } /* `더보기` 전까지 감춰 두는 줄. 홈이 순위 목록만으로 길어지지 않게. */ .hm-rank.is-folded { display: none; } /* * `min-width: 0` 사슬. * * grid·flex 자식은 기본이 `min-width: auto` 라 **안쪽에서 제일 긴 것만큼 늘어난다.** * 판정 배지 하나가 넓으면 그것이 비교 블록 → 패널 → 줄 → 목록으로 전파되어 * 좁은 화면에서 카드 밖으로 밀려 나간다(375px 에서 71px 넘쳤다). 각 단계에서 끊는다. */ .hm-rank, .hm-rank__box, .hm-rank__row, .hm-rank__panel, .hm-versus, .hm-verdict, .hm-rivals, .hm-rival, .hm-advice, .hm-advice__steps, .hm-advice__step, .hm-advice__body { min-width: 0; } /* 줄 하나가 곧 테두리 상자다. 펼치면 그 상자가 그대로 커지며 내용을 감싼다. */ .hm-rank__box { border: 1px solid var(--hm-line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); transition: border-color .18s var(--ease); } .hm-rank.is-open .hm-rank__box { border-color: rgba(0, 113, 227, .4); } /* * 접힌 줄은 **표의 한 행**이다 — 키워드 / 순위 / 변동 / 펼침. * 칸 폭을 고정해야 줄마다 순위 숫자가 같은 세로선에 선다(시안 280 / 128 / 96 / 32). */ .hm-rank__row { display: grid; grid-template-columns: minmax(0, 1fr) 128px 96px 32px; align-items: center; width: 100%; min-height: 48px; padding: 0; border: 0; background: transparent; text-align: left; font-family: inherit; color: inherit; cursor: pointer; } /* 비교 자료가 없는 줄은 펼칠 것이 없다 — 눌리는 것처럼 보이지 않게 한다. */ .hm-rank__row[disabled] { cursor: default; } .hm-rank.is-open .hm-rank__row { background: var(--accent-soft); } .hm-rank__cell { display: flex; align-items: center; min-width: 0; } .hm-rank__cell--kw { gap: 8px; padding: 0 8px 0 19px; } .hm-rank__cell--rank { justify-content: center; } .hm-rank__cell--diff { justify-content: center; gap: 4px; } .hm-rank__cell--chev { justify-content: center; color: var(--hm-ink); } .hm-rank__cell--chev svg { width: 20px; height: 20px; transition: transform .18s var(--ease); } .hm-rank.is-open .hm-rank__cell--chev svg { transform: rotate(180deg); } .hm-rank__kw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; color: var(--hm-ink); } /* 광고 배지는 시안대로 **채운 알약**이다. 테넌트 포인트 컬러를 따른다. */ .hm-rank__ad { flex-shrink: 0; padding: 4px 12px; border-radius: var(--radius-full); background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.3; } .hm-rank__badge { font-size: 16px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } /* 순위를 못 잡았거나 재는 중 — 숫자가 아니므로 강조하지 않는다. */ .hm-rank__badge.is-dim { font-size: 14px; font-weight: 600; color: var(--hm-dim); } /* * 다시 재는 중. 줄 하나가 몇 초씩 걸리므로 **어디까지 왔는지가 보여야** 기다릴 수 있다. * 배지는 깜박이고 줄 전체에 옅은 빛이 지나간다. */ .hm-rank.is-loading .hm-rank__badge { animation: hm-blink 1.1s var(--ease) infinite; } .hm-rank.is-loading .hm-rank__box { position: relative; overflow: hidden; } .hm-rank.is-loading .hm-rank__box::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent-soft), transparent); opacity: .7; animation: hm-sweep 1.3s var(--ease) infinite; } @keyframes hm-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes hm-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .hm-rank__diff { font-size: 14px; font-weight: 600; color: var(--hm-dim); font-variant-numeric: tabular-nums; } .hm-rank__diff.is-up { color: var(--hm-good); } .hm-rank__diff.is-down { color: #ef4444; } /* ── 펼친 패널 ────────────────────────────────────── */ .hm-rank__panel { padding: 11px 20px 20px 19px; } /* * 설명 말풍선 — 시안대로 **꼬리 없는 흰 카드가 위에 떠 있다**(328×90, 카드 가로 가운데, 위에서 66px). * * `absolute` 라 아래 목록을 밀어내지 않는다 — 열고 닫을 때 순위 줄들이 위아래로 출렁이지 않는다. * 흰 배경 위 흰 카드라 경계는 옅은 사방 그림자가 만든다(시안 값 그대로). */ /* * 가운데 정렬을 `transform` 이 아니라 `left/right/margin` 으로 한다 — * 등장 애니메이션이 `transform` 을 쓰기 때문에, 그걸로 가운데를 잡으면 애니메이션이 끝나는 순간 * `transform: none` 이 덮어써서 말풍선이 오른쪽으로 밀린다. */ .hm-tip { position: absolute; top: 66px; left: 0; right: 0; margin: 0 auto; z-index: 5; width: 328px; max-width: calc(100% - 24px); min-height: 90px; display: flex; align-items: center; padding: 12px 44px 12px 12px; background: var(--surface); border-radius: var(--radius-sm); box-shadow: -4px 0 12px rgba(0, 0, 0, .03), 4px 0 12px rgba(0, 0, 0, .03), 0 -4px 12px rgba(0, 0, 0, .03), 0 4px 12px rgba(0, 0, 0, .03); font-size: 14px; line-height: 22px; color: var(--hm-ink); /* * 페이드만 준다 — `transform` 을 쓰는 애니메이션이면 그 값이 위치 계산에 섞여, * 애니메이션이 늦게 도는 상황(백그라운드 탭 등)에서 말풍선이 어긋난 자리에 멈춘다. */ animation: hm-fade .18s var(--ease) both; } @keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } } /* 어두운 배경에서는 그림자만으로 카드가 안 떠 보인다 — 그때만 선을 준다. */ @media (prefers-color-scheme: dark) { .hm-tip { border: 1px solid var(--hm-line); } } .hm-tip p { margin: 0; } .hm-tip__close { position: absolute; top: 12px; right: 12px; display: flex; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: var(--hm-ink); cursor: pointer; } .hm-tip__close svg { width: 20px; height: 20px; } .hm-rivals { margin: 0 0 12px; padding: 0; list-style: none; } .hm-rival { display: flex; align-items: center; gap: 20px; min-height: 42px; padding: 10px 12px; border-bottom: 1px solid var(--hm-line); font-size: 14px; color: var(--hm-ink); /* * **1위부터 차례로 나타난다.** `--i` 는 뷰가 심은 등장 순서다. * 열 때마다 다시 재생되어야 하는데, `hidden` 이 풀리면(display 가 돌아오면) * CSS 애니메이션은 저절로 처음부터 다시 돈다 — JS 로 클래스를 붙였다 뗄 필요가 없다. */ animation: hm-rise .8s var(--ease) both; animation-delay: calc(var(--i, 0) * var(--hm-step)); } @keyframes hm-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .hm-rival:last-child { border-bottom: 0; } .hm-rival__rank { flex-shrink: 0; min-width: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .hm-rival__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm-rival__num { flex-shrink: 0; margin-left: auto; font-size: 12px; color: rgba(95, 98, 107, .7); font-variant-numeric: tabular-nums; white-space: nowrap; } /* * 내 매장 줄. * * 시안은 굵기만 바꾸는데, 열 곳이 비슷한 이름으로 늘어선 목록에서 굵기 하나로는 잘 안 잡힌다. * 몇 위인지 보러 온 화면이라 **이 줄이 먼저 눈에 들어와야** 해서 옅은 배경을 얹었다 * (테넌트 포인트 컬러를 따라간다). */ .hm-rival.is-mine { border-bottom: 0; font-weight: 700; background: var(--accent-soft); border-radius: var(--radius-sm); } .hm-rival.is-mine .hm-rival__num { color: var(--hm-ink); font-weight: 500; } @media (prefers-color-scheme: dark) { .hm-rival__num { color: var(--text-3); } } /* * 비교 블록 — 판정 색을 아주 옅게(3%) 깐 카드. * 라벨 / 막대 / 숫자를 **격자로 고정**해야 두 줄의 막대가 같은 지점에서 시작한다. */ .hm-versus { padding: 11px 21px 21px 19px; border-radius: var(--radius-sm); /* 목록이 다 나타난 뒤 이어서 올라온다. */ animation: hm-rise .8s var(--ease) both; animation-delay: calc(var(--i, 0) * var(--hm-step)); } .hm-versus + .hm-versus { margin-top: 8px; } .hm-versus.is-good { background: rgba(22, 163, 74, .03); border: 1px solid rgba(22, 163, 74, .03); } .hm-versus.is-bad { background: rgba(201, 36, 26, .03); border: 1px solid rgba(201, 36, 26, .03); } .hm-versus__title { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text); } .hm-bar { display: grid; grid-template-columns: 78px minmax(0, 1fr) 78px; align-items: center; margin-top: 10px; } .hm-bar__label { font-size: 12px; font-weight: 500; color: var(--text); } .hm-bar__track { height: 8px; border-radius: var(--radius-full); background: transparent; } /* * 막대는 **왼쪽에서 자란다.** * * 폭(`width`)은 서버가 인라인으로 박아 둔 실제 비율이고, 애니메이션은 `scaleX` 로만 준다 — * 폭 자체를 0에서 키우면 두 막대의 최종 길이가 애니메이션 값에 얽혀 비교가 흔들린다. * 목록이 다 나타난 뒤(`--i`)에 이어서 자라 "순위 → 그래프" 순으로 읽히게 한다. */ .hm-bar__fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--hm-track); transform-origin: left center; animation: hm-grow var(--hm-bar-run) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--hm-step) + var(--hm-bar-start)); } @keyframes hm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* 내 막대 색이 판단을 따른다 — 앞서면 초록, 부족하면 빨강. */ .hm-versus.is-good .hm-bar--mine .hm-bar__fill { background: var(--hm-good); } .hm-versus.is-bad .hm-bar--mine .hm-bar__fill { background: var(--hm-bad); } .hm-bar__value { text-align: right; font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } /* 판정 배지는 리뷰 현황 카드의 것과 **같은 모양**이다 — 같은 말을 하는 자리라 모양이 달라질 이유가 없다. */ .hm-versus .hm-verdict { margin-top: 12px; } /* ── 조언 ───────────────────────────────────────── * 펼침의 마지막 자리. 위가 "지금 어떤 상태인가" 라면 여기는 "그래서 무엇을 하는가" 다. * * 비교 블록(3% 배경)보다 **한 단계 진하게** 깐다 — 같은 톤으로 두면 그래프의 연장으로 읽혀 * 결론이라는 것이 드러나지 않는다. 대신 카드처럼 테두리를 두르지는 않는다(펼침 안이라 선이 겹친다). */ .hm-advice { margin-top: 12px; padding: 14px 16px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); /* * 결론이라 그래프·판정이 끝날 즈음 올라온다. * `--hm-advice-lead` 만큼 겹치게 둔 것은, 완전히 끝난 뒤에 시작하면 * 그 사이 화면이 한 번 멈춘 것처럼 보이기 때문이다. */ animation: hm-rise .8s var(--ease) both; animation-delay: calc( var(--i, 0) * var(--hm-step) + var(--hm-bar-start) + var(--hm-bar-run) - var(--hm-advice-lead) ); } /* 1위 칭찬은 판정 배지와 같은 초록을 쓴다 — 같은 뜻의 말이 색까지 같아야 한 몸으로 읽힌다. */ .hm-advice.is-praise { background: var(--success-soft); } .hm-advice__head { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text); } .hm-advice__head svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); } .hm-advice.is-praise .hm-advice__head svg { color: var(--hm-good); } .hm-advice__steps { margin: 0; padding: 0; list-style: none; } .hm-advice__step { display: flex; gap: 10px; margin-top: 12px; } /* 아이콘은 첫 줄 글자 높이(13.5px x 1.6 ≈ 21px)에 맞춰 살짝 내려 붙인다. */ .hm-advice__icon { flex-shrink: 0; padding-top: 1px; color: var(--accent); } .hm-advice__icon svg { width: 18px; height: 18px; display: block; } /* 조언은 두 줄 넘어가는 문장이라 본문 회색이 아니라 **본문색**으로 둔다 — 읽으라고 쓴 글이다. */ .hm-advice__body { min-width: 0; } .hm-advice__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); } /* * 접수로 넘어가는 버튼. * * 화면 맨 아래 `.hm-cta` 처럼 꽉 찬 버튼으로 만들지 않는다 — 홈에서 제일 큰 버튼은 하나여야 하고, * 여기 것은 "이 키워드 때문에" 누르는 좁은 문이라 문장 바로 아래 인라인으로 붙는 편이 맞다. */ .hm-advice__cta { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; padding: 8px 10px 8px 12px; border: 0; border-radius: var(--radius-full); background: var(--accent); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: inherit; text-decoration: none; cursor: pointer; transition: opacity .18s var(--ease); } .hm-advice__cta:hover { opacity: .88; text-decoration: none; color: #fff; } /* 오른쪽을 가리키는 화살표가 없어 `chevron`(아래 방향)을 90도 돌려 쓴다. */ .hm-advice__cta svg { width: 15px; height: 15px; transform: rotate(-90deg); } /* * 아직 못 파는 상품. * * **모양은 같고 색만 죽인다** — 자리가 달라지면 "이건 다른 종류의 버튼" 으로 읽히고, * 열리는 날 눈이 다시 적응해야 한다. 회색 = 지금은 안 되는 것. * * 눌리기는 눌린다(눌러야 이유를 말해 준다). 그래서 `cursor` 는 `pointer` 그대로다 — * `not-allowed` 로 두면 "눌러도 아무 일 없다" 는 뜻이 되어 안내 팝업을 안 열어 보게 된다. */ .hm-advice__cta.is-soon { background: var(--hm-track); color: var(--hm-dim); } .hm-advice__cta.is-soon:hover { opacity: 1; background: var(--hm-line); color: var(--hm-ink); } /* 안내 팝업의 동그란 아이콘 자리. 충전 화면의 세금 안내와 같은 모양이다. */ .hm-soon__icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--hm-dim); } .hm-soon__icon svg { width: 26px; height: 26px; } .hm-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 14px; margin-top: 8px; border: 0; background: transparent; color: var(--hm-ink); font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: inherit; cursor: pointer; } .hm-more:hover { color: var(--text); } .hm-more svg { width: 16px; height: 16px; } /* ── 다음 행동 ────────────────────────────────────── */ .hm-cta { height: 56px; margin-top: 8px; font-size: 16px; font-weight: 600; } /* 움직임을 줄여 달라고 한 사용자에게는 결과만 보여 준다(자리는 그대로, 등장만 즉시). */ @media (prefers-reduced-motion: reduce) { .hm-rival, .hm-versus, .hm-advice, .hm-bar__fill, .hm-tip, .hm-refresh.is-busy svg, .hm-verdict__think i, .hm-verdict:not(.is-thinking) > svg, .hm-rank.is-loading .hm-rank__badge, .hm-rank.is-loading .hm-rank__box::after { animation: none; } .hm-rank.is-loading .hm-rank__box::after { display: none; } } /* * 좁은 화면 — 시안은 616px 한 장뿐이라 그 아래는 여기서 정한다. * 순위 표의 고정 칸(128/96)이 그대로면 키워드가 몇 글자 못 보이므로 줄인다. */ /* * 좁은 화면 — 시안은 616px 한 장뿐이라 그 아래는 여기서 정한다. * * 두 단으로 줄인다. 641px 부터는 **여백과 큰 글자만** 줄이고, * 481px 부터는 **표의 고정 칸까지** 줄여 키워드에 폭을 몰아 준다. */ @media (max-width: 640px) { .hm-card { padding: 22px 16px; } .hm-greet { margin-bottom: 14px; } .hm-panel { padding: 14px 12px; } .hm-photo { width: 176px; height: 176px; } /* 말풍선은 화면을 넘지 않게 폭을 화면에 맞춘다(시안 328px 은 여기서 의미가 없다). */ .hm-tip { top: 60px; width: auto; left: 12px; right: 12px; max-width: none; } } /* * 휴대폰. * * **글자는 줄이지 않는다.** 점주는 대부분 휴대폰으로 보는데 여기서 12px 로 깎으면 * 정작 읽어야 할 사람이 못 읽는다. 대신 **자리를 만든다** — * 리뷰 카드를 세로로 떨어뜨리고, 순위 표의 고정 칸을 줄이고, 사진을 작게 한다. */ @media (max-width: 560px) { /* 두 칸으로는 32px 숫자와 판정 문구가 같이 안 들어간다. 과감히 한 칸씩. */ .hm-reviews { grid-template-columns: minmax(0, 1fr); gap: 10px; } .hm-review { min-height: 0; padding: 16px 14px; } .hm-review__value { font-size: 34px; line-height: 38px; } .hm-review__label { font-size: 15px; } .hm-review__label svg { width: 19px; height: 19px; } .hm-panel__title { font-size: 18px; line-height: 1.45; } .hm-store__name { font-size: 22px; } .hm-store__meta, .hm-store__rating { font-size: 15px; } /* 순위 표 — 글자는 그대로 두고 고정 칸만 좁힌다. */ .hm-rank__row { grid-template-columns: minmax(0, 1fr) 62px 48px 26px; min-height: 52px; } .hm-rank__cell--kw { gap: 6px; padding-left: 14px; } .hm-rank__kw { font-size: 15px; } .hm-rank__badge { font-size: 15px; } .hm-rank__ad { padding: 3px 8px; font-size: 13px; } .hm-rank__diff { font-size: 13px; } .hm-rank__cell--chev svg { width: 18px; height: 18px; } .hm-rank__panel { padding: 10px 12px 14px; } .hm-rival { gap: 12px; padding: 11px 8px; font-size: 14px; } .hm-rival__num { font-size: 12px; } .hm-versus { padding: 12px 12px 16px; } .hm-bar { grid-template-columns: 66px minmax(0, 1fr) 60px; } .hm-bar__label, .hm-bar__value { font-size: 13px; } /* 조언도 글자는 그대로 두고 여백만 줄인다 — 여기가 제일 많이 읽히는 문장이다. */ .hm-advice { padding: 13px 13px 15px; } .hm-advice__step { gap: 8px; } .hm-advice__text { font-size: 14px; } .hm-photo { width: 156px; height: 156px; } .hm-photos__nav { width: 36px; height: 36px; } .hm-verdict { font-size: 13.5px; min-height: 34px; } .hm-tip { font-size: 14px; line-height: 21px; min-height: 0; padding: 14px 42px 14px 14px; } .hm-ranks__head { gap: 8px; } .hm-refresh, .hm-when { font-size: 13.5px; } .hm-cta { height: 54px; font-size: 16px; } } /* * 아주 좁은 화면(구형 기기). 여기서만 어쩔 수 없이 몇 가지를 줄인다 — * 그래도 본문(순위·리뷰 수)은 14px 아래로 내리지 않는다. */ @media (max-width: 380px) { .hm-card { padding: 20px 14px; } .hm-greet { font-size: 22px; } .hm-store__name { font-size: 20px; } .hm-rank__row { grid-template-columns: minmax(0, 1fr) 56px 42px 24px; } .hm-rank__cell--kw { padding-left: 12px; } .hm-rank__ad { padding: 2px 7px; font-size: 12px; } .hm-bar { grid-template-columns: 58px minmax(0, 1fr) 54px; } .hm-rival { gap: 10px; padding: 11px 4px; } /* 버튼 글자가 두 줄로 접히면 알약 모양이 무너진다 — 좌우 여백부터 줄인다. */ .hm-advice__cta { padding: 8px 8px 8px 10px; font-size: 12.5px; } .hm-photo { width: 140px; height: 140px; } .hm-tip { left: 8px; right: 8px; } } /* ═══════════════════════════════════════════════════════════════════════ * 이용안내 (/ads/guide) — `.gd-*` * * 껍데기(584px 카드·그림자·토큰)는 새 홈의 `.hm` 을 그대로 쓴다. * 같은 시안에서 나온 같은 폭·같은 선 색이라 따로 만들면 둘이 조금씩 어긋난다. * 여기에는 이 화면에만 있는 것(소개 영상 · 아코디언 · 미디어 칸)만 둔다. * ═══════════════════════════════════════════════════════════════════════ */ /* 카드 안이 전부 미디어라 좌우 여백을 홈보다 좁게 잡는다(시안 24px). */ .gd-card { padding: 24px; } /* ── 맨 위 소개 영상 ──────────────────────────────── * 높이를 240px 로 **고정**한다. 포스터마다 비율이 달라도 이 자리 높이가 같아야 * 아래 아코디언이 매번 다른 위치에서 시작하지 않는다. */ .gd-hero { height: 240px; margin-bottom: 32px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); } .gd-hero > * { display: block; width: 100%; height: 100%; object-fit: cover; } /* ── 아코디언 ───────────────────────────────────── */ .gd-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } /* * 항목 한 칸. 닫혀 있으면 흰 상자, 펼치면 테두리가 포인트 컬러로 바뀐다 — * 시안이 열린 항목에만 `rgba(0,113,227,.4)` 를 줬다. 테넌트 색을 따라가게 * 고정 파랑 대신 `--accent` 를 흐리게 쓴다(`color-mix` 없이 되도록 opacity 대신 겹칩). */ .gd-item { min-width: 0; overflow: hidden; border: 1px solid var(--hm-line); border-radius: var(--radius-sm); background: var(--surface); } .gd-item.is-open { border-color: var(--accent); } .gd-item__head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 12px 12px 20px; border: 0; background: transparent; cursor: pointer; font-family: inherit; letter-spacing: inherit; text-align: left; } /* 펼친 항목의 머리는 옅은 포인트색 — 지금 무엇을 보고 있는지가 한눈에 잡힌다. */ .gd-item.is-open .gd-item__head { background: var(--accent-soft); } .gd-item__title { flex: 1; min-width: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--hm-ink); } .gd-item.is-open .gd-item__title { color: var(--text); } /* 펼치면 위를 가리킨다. 아이콘 하나를 돌려 쓴다(닫힘/열림 두 벌을 두지 않는다). */ .gd-item__chev { flex-shrink: 0; display: flex; color: var(--hm-ink); transition: transform .22s var(--ease); } .gd-item__chev svg { width: 20px; height: 20px; } .gd-item.is-open .gd-item__chev { transform: rotate(180deg); color: var(--text); } /* 내용이 아직 없는 항목 — 눌리기는 하되 제목을 흐리게 해 미리 알려 준다. */ .gd-item.is-empty .gd-item__title { color: var(--hm-dim); } .gd-item__panel { padding: 16px; } .gd-empty { margin: 0; padding: 24px 8px; text-align: center; font-size: 14px; line-height: 1.7; color: var(--text-3); } /* 블록 사이 가로선(시안 135:638). 색은 표 선과 같다. */ .gd-rule { height: 0; margin: 24px 0; border: 0; border-top: 1px solid var(--hm-line); } /* ── 미디어 칸 ─────────────────────────────────── */ .gd-media { overflow: hidden; border-radius: var(--radius-sm); } .gd-media__img { display: block; width: 100%; height: auto; } /* * 세로 영상. * * 어두운 바탕 가운데에 세워 둔다 — 가로로 늘리면 사람 얼굴이 잘린다. * 시안은 320px 고정인데, 그보다 좁은 화면에서는 폭에 맞춰 줄어야 하므로 `min()` 을 쓴다. * 높이는 원본 비율(521:776)이 알아서 잡게 두고 고정하지 않는다. */ .gd-media--video { display: flex; justify-content: center; background: #1d1d1f; } .gd-media--video .gd-media__frame { width: min(320px, 100%); } .gd-media--video .gd-media__img { width: 100%; } /* 가로 그림은 바탕 위에 얹는다(시안 #f7f7f7). 여백 없이 꽉 찬 그림이라 배경은 로딩 중에만 보인다. */ .gd-media--image { background: #f7f7f7; } @media (prefers-color-scheme: dark) { .gd-media--image { background: var(--surface-2); } } /* ── 좁은 화면 ─────────────────────────────────── */ @media (max-width: 640px) { .gd-card { padding: 16px; } .gd-hero { height: 200px; margin-bottom: 20px; } .gd-item__head { padding: 12px 10px 12px 14px; gap: 8px; } .gd-item__title { font-size: 16px; } .gd-item__panel { padding: 12px; } .gd-rule { margin: 16px 0; } } @media (max-width: 380px) { .gd-hero { height: 176px; } .gd-item__title { font-size: 15px; } }