/* ============================================================================= naver.mangoedu.co.kr — 네이버페이 커넥트 가맹 신청 디자인 토큰 · 공용 컴포넌트 두 브랜드가 한 화면에 선다. 규칙은 비대칭이다: · 네이버페이 로고·색은 «협력사 사용 규정»이 있는 남의 자산이다 — 원본 그대로, 여백 확보, 변형 금지. (developers.pay.naver.com/design/brand/logo — 협력사 한정 사용, 임의 변경 불가, 배지형 최소 높이 Mobile 24px / PC 12px, 로고 요소 간격만큼 clear space) · 망고에듀 로고·색은 우리 자산이라 배경·강조에 자유롭게 쓴다. 그래서 «초록은 네이버 쪽 신호, 망고 옐로는 우리 쪽 신호»로 역할을 갈라 둔다. 버튼 같은 주요 과업은 망고 옐로가 아니라 «잉크»로 두고, 초록은 네이버 관련 표식에만 쓴다 — 초록 버튼을 남발하면 네이버가 운영하는 사이트처럼 읽힌다. ============================================================================= */ :root { /* 네이버(공식) — 값 출처: 공식 로고팩 SVG 의 fill */ --npay-green: #00DE5A; /* 네이버페이 그린 */ --naver-green: #03C75A; /* 네이버 그린 — 화이트 배경 명시도 확보용 제한 사용 */ --npay-black: #000000; /* 망고에듀(자사) — mango_edu.svg 의 그라디언트 */ --mango-1: #FFD900; --mango-2: #FFB300; --mango-ink: #7A5200; /* 중립 — 순회색 대신 망고 쪽으로 아주 살짝 기울인 웜 뉴트럴 */ --ink: #16181D; --ink-2: #3D434E; --muted: #6B7280; --line: #E6E4DF; --line-2: #F0EEE9; --surface: #FFFFFF; --ground: #F8F7F4; --ok: #0F9D58; --warn: #B45309; --danger: #C02B2B; --danger-bg: #FDF2F2; --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(22, 24, 29, .05), 0 8px 24px rgba(22, 24, 29, .06); --shadow-sm: 0 1px 2px rgba(22, 24, 29, .06); --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace; --w-page: 720px; --w-wide: 1180px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.65; letter-spacing: -.01em; word-break: keep-all; /* 한국어 줄바꿈 — 단어 중간에서 끊기지 않게 */ overflow-wrap: anywhere; } a { color: inherit; } /* ── 헤더 ───────────────────────────────────────────────────────────────────── */ .site-header { background: var(--surface); border-bottom: 1px solid var(--line); } .site-header__in { max-width: var(--w-page); margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; gap: 14px; } .site-header--wide .site-header__in { max-width: var(--w-wide); } /* 두 로고를 잇는 자리. 네이버페이 로고 «바깥»으로 최소 여백을 확보하기 위해 lockup 의 gap 을 로고 높이의 절반 이상으로 잡는다(가이드의 clear space 규정). */ .lockup { display: flex; align-items: center; gap: 16px; /* 🔑 밑줄은 «여기서» 꺼야 한다 — text-decoration 은 조상이 그리면 자식이 지울 수 없다. .lockup__x 에 text-decoration:none 을 줘도 이 가 그린 밑줄은 그대로 남아, 두 로고 사이의 × 가 「링크 텍스트」처럼 읽혔다(실측: anchor 의 computed text-decoration-line=underline, color rgb(22,24,29)). */ text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; } /* 24px — 네이버페이 가이드의 «최소 높이 Mobile 24px / PC 12px» 경계값이라 규정은 충족한다. ⚠ 여기서 더 줄이면 모바일 규정을 깬다. 망고에듀 로고(28px)와 균형을 맞춘 값이다. */ .lockup__npay { height: 24px; width: auto; display: block; } .lockup__x { color: #C9C6BF; font-size: 16px; /* 두 로고가 굵은 워드마크라 400 짜리 × 는 사이에서 사라진다. 700 으로 존재감을 맞춘다. */ font-weight: 700; line-height: 1; user-select: none; text-decoration: none; } /* 네이버페이 로고와 «같은 28px». 26px 이었을 때는 옆에 두면 눈에 띄게 작아 보였는데, 망고 마크가 viewBox 안에서 여백을 더 갖고 있어 같은 높이여도 실제 도형이 작게 읽히기 때문이다. */ .lockup__mango { height: 28px; width: auto; display: block; } .site-header__spacer { flex: 1; } .site-header__meta { font-size: 13px; color: var(--muted); white-space: nowrap; } /* ── 히어로 ─────────────────────────────────────────────────────────────────── */ .hero { max-width: var(--w-page); margin: 0 auto; padding: 34px 20px 6px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #E9FBF0; color: #06713A; border: 1px solid #BFEDD3; border-radius: 999px; padding: 5px 12px 5px 8px; font-size: 13px; font-weight: 700; letter-spacing: 0; } .hero__eyebrow img { height: 14px; width: auto; display: block; } .hero h1 { margin: 14px 0 8px; font-size: clamp(24px, 5.2vw, 32px); line-height: 1.3; letter-spacing: -.03em; text-wrap: balance; } .hero p { margin: 0; color: var(--ink-2); font-size: 15px; } /* 부제 + 소개·사용법 링크(2026-09-11 사용자 지시) — 부제 왼쪽, 링크 카드 오른쪽. 좁아지면 링크가 부제 아래로 접힌다. */ .hero__intro { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; } .hero__intro > p { flex: 1 1 300px; } .guide-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 14px; padding: 9px 12px 9px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; line-height: 1.4; -webkit-tap-highlight-color: transparent; transition: border-color .12s, box-shadow .12s; } .guide-link:hover { border-color: #CFCBC2; box-shadow: var(--shadow); } .guide-link:focus-visible { outline: 2px solid var(--naver-green); outline-offset: 2px; } .guide-link__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .guide-link__title { font-size: 14px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; } .guide-link__sub { font-size: 12.5px; font-weight: 600; color: var(--muted); } .guide-link__chev { flex: 0 0 auto; display: block; color: var(--ink-2); } /* «망고 N 커넥트» 제품 표기 — 검은 바탕에 흰 글자, N 만 네이버페이 그린(사용자 제공 표기 그대로). 이 초록은 «네이버 쪽 신호» 규칙(파일 머리 주석) 안이다: N 은 네이버를 가리키는 글자다. */ .mnc { display: inline-block; margin-right: 3px; padding: 0 7px; border-radius: 5px; background: #111; color: #fff; font-weight: 800; letter-spacing: .03em; } .mnc__n { color: var(--npay-green); } /* 제품 안내 이미지 — 원본 1529×932. 폭 720px 페이지에 2배 해상도로 들어간다. width/height 를 명시해 로드 전에도 자리를 잡아 둔다(문구가 아래로 튀는 것 방지). */ .hero__promo { display: block; width: 100%; height: auto; margin: 18px 0 0; border-radius: var(--radius); border: 1px solid var(--line); } /* 접수 안내 — CTA 와 붙지 않게 띄운다(.hero p 는 margin:0 이라 형제끼리 붙는다). 두 덩이(프로모션·신청 안내)가 연달아 오면 둘째는 덜 띄우고, 제목 줄(strong)은 본문보다 진하게. */ .hero__lead { margin-top: 26px; line-height: 1.6; } .hero__lead + .hero__lead { margin-top: 14px; } .hero__lead strong { color: var(--ink); font-weight: 700; } .hero__rule { height: 3px; width: 56px; margin: 18px 0 0; border-radius: 3px; background: linear-gradient(90deg, var(--mango-1), var(--mango-2)); } /* ── 카드 · 폼 ──────────────────────────────────────────────────────────────── */ .page { max-width: var(--w-page); margin: 0 auto; padding: 22px 20px 64px; } .page--wide { max-width: var(--w-wide); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px; margin: 18px 0; } .card__title { margin: 0 0 4px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; } .card__desc { margin: 0 0 16px; color: var(--muted); font-size: 14px; } .section-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 7px; background: linear-gradient(140deg, var(--mango-1), var(--mango-2)); color: #4A3200; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; } .field { display: block; margin: 0 0 16px; } .field:last-child { margin-bottom: 0; } /* 라디오 묶음(사업자 구분, 2026-09-14) — fieldset 기본 테두리·여백을 걷고 .field 와 같은 리듬으로 */ .field--radios { border: 0; padding: 0; min-width: 0; } .field--radios legend { padding: 0; } .radios { display: flex; gap: 8px 18px; flex-wrap: wrap; } .radio { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer; } .radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--naver-green); } .field__label { display: flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 700; margin-bottom: 6px; } .field__req { color: var(--danger); font-size: 12px; font-weight: 700; } .field__hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); } .field__hint--strong { background: #FFFBEB; border: 1px solid #FDE9A9; color: #6B4E00; border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px; font-size: 13px; } /* ── §3 «서류첨부 이유» 강조 카드 (2026-09-09 사용자 지시) ── field__hint--strong 과 같은 망고 계열 바탕에 두 덩이(이유 · 결제수단). 이모지는 글꼴마다 폭이 달라 고정 폭 칸에 넣어 글줄의 정렬 축을 만든다. 결제수단 덩이는 제목만 네이버 그린 계열로 구분. */ .why-card { margin: 10px 0 16px; padding: 14px 16px; border: 1px solid #FDE9A9; border-left: 4px solid var(--mango-2); border-radius: var(--radius-sm); background: linear-gradient(180deg, #FFFBEB, #FFF6D6); color: #5A4300; font-size: 13.5px; line-height: 1.55; } .why-card__group + .why-card__group { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #F1DC98; } .why-card__title { margin: 0 0 6px; font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; } .why-card__group--pay .why-card__title { color: #0B6B3A; } .why-card__list { list-style: none; margin: 0; padding: 0; } .why-card__list li { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; } .why-card__list b { color: #4A3200; font-weight: 700; } .why-card__emoji { flex: 0 0 22px; text-align: center; } .why-card__note { margin: 8px 0 0; font-size: 12.5px; color: #7A5200; } .why-card__list--inline { display: flex; flex-wrap: wrap; gap: 4px 18px; } .why-card__list--inline li { margin: 0; } input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select, textarea { width: 100%; padding: 12px 13px; border: 1px solid #D8D5CE; border-radius: var(--radius-sm); background: #fff; color: var(--ink); font-family: inherit; font-size: 16px; /* iOS 자동 확대 방지 — 16px 미만이면 포커스 시 화면이 튄다 */ line-height: 1.4; transition: border-color .12s, box-shadow .12s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--naver-green); box-shadow: 0 0 0 3px rgba(3, 199, 90, .16); } input[type="file"] { width: 100%; padding: 10px; border: 1px dashed #CFCBC2; border-radius: var(--radius-sm); background: #FCFBF8; font-size: 14px; } input[type="file"]::file-selector-button { margin-right: 10px; padding: 8px 12px; border: 1px solid #D8D5CE; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .file-state { margin-top: 6px; font-size: 13px; color: var(--muted); } .file-state--ok { color: var(--ok); font-weight: 700; } .file-state--bad { color: var(--danger); font-weight: 700; } /* ── 동의 ───────────────────────────────────────────────────────────────────── */ .consent { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 12px; } .consent__head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: #FCFBF8; border-bottom: 1px solid var(--line-2); } .consent__head label { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; cursor: pointer; flex: 1; } .consent__req { color: var(--danger); font-size: 12px; } .consent__toggle { border: 1px solid #D8D5CE; background: #fff; border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-2); cursor: pointer; } .consent__body { max-height: 260px; overflow: auto; padding: 14px 16px; font-size: 13px; line-height: 1.7; color: var(--ink-2); background: #fff; } .consent__body[hidden] { display: none; } .consent__body h3 { font-size: 14px; margin: 14px 0 6px; } .consent__body h3:first-child { margin-top: 0; } .consent__body table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12.5px; } .consent__body th, .consent__body td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; } .consent__body th { background: #F7F6F3; font-weight: 700; } .consent__body ul { padding-left: 18px; margin: 6px 0; } input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--naver-green); flex: none; } /* ── 버튼 ───────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; transition: filter .12s, background .12s; } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn--primary { background: var(--ink); color: #fff; } .btn--primary:hover:not(:disabled) { filter: brightness(1.18); } .btn--ghost { border-color: #D8D5CE; } .btn--ghost:hover { background: #F7F6F3; } .btn--danger { background: var(--danger); color: #fff; } .btn--sm { padding: 7px 11px; font-size: 13px; border-radius: 8px; } .btn--block { width: 100%; } .actions { margin-top: 22px; display: flex; gap: 10px; } /* ── 알림 ───────────────────────────────────────────────────────────────────── */ .alert { border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; border: 1px solid; margin: 0 0 16px; } .alert--error { background: var(--danger-bg); border-color: #F3C9C9; color: #8E1F1F; } .alert--ok { background: #F0FBF4; border-color: #BFEDD3; color: #06713A; } .alert ul { margin: 6px 0 0; padding-left: 18px; } /* ── 완료 화면 ──────────────────────────────────────────────────────────────── */ .done { text-align: center; padding: 30px 22px; } .done__mark { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: #E9FBF0; color: #06713A; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; } .done h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.02em; } .done p { margin: 0 auto; max-width: 32em; color: var(--ink-2); font-size: 15px; } .receipt { margin: 22px auto 0; max-width: 420px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #FCFBF8; } .receipt dl { display: grid; grid-template-columns: 7.5em 1fr; margin: 0; } .receipt dt, .receipt dd { padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--line-2); font-size: 14px; } .receipt dt { color: var(--muted); font-weight: 700; } .receipt dd { font-variant-numeric: tabular-nums; } .receipt dl > :nth-last-child(-n+2) { border-bottom: 0; } /* ── 표(관리) ───────────────────────────────────────────────────────────────── 표는 «옆으로 흐르지 않는다» — 긴 값은 칸 «안에서» 접는다(2026-09-10 사용자 지시). 종전 `white-space: nowrap` 은 학원명 한 줄을 지키는 대신 표 전체를 옆으로 밀어서, 긴 이름 한 건 때문에 나머지 열까지 가로로 스크롤해야 했다. 이제 «접히면 안 되는 것»만 잠근다. 🔑 `overflow-wrap: anywhere` 여야 한다 — `break-word` 는 칸의 **min-content 폭을 줄이지 않아서** 이메일·해시처럼 띄어쓰기 없는 라틴 토큰이 하나만 있어도 표가 계속 넘친다(둘의 차이가 이 수정의 요점). 한글 학원명은 기본 줄바꿈 규칙으로 음절 사이에서 접힌다 — 그게 지시한 «두 줄»이다. `.table-wrap` 의 overflow-x 는 지운 게 아니라 «아주 좁은 화면»용 안전망으로 남긴다. */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; } table.grid { border-collapse: collapse; width: 100%; font-size: 14px; } table.grid th, table.grid td { border-bottom: 1px solid var(--line-2); padding: 10px 12px; text-align: left; overflow-wrap: anywhere; } /* 머리글은 짧다 — 접히면 「첨 / 부」처럼 세로로 쪼개져 오히려 읽기 나빠진다 */ table.grid th { background: #FAF9F6; font-size: 13px; font-weight: 700; color: var(--ink-2); position: sticky; top: 0; white-space: nowrap; } table.grid tbody tr:hover { background: #FCFBF8; } table.grid td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } /* 수치 칸이면서도 «덩이 사이»는 접혀야 하는 칸(대표 / 학원 연락처) — 번호 자체는 .nowrap 이 지킨다 */ table.grid td.num--wrap { white-space: normal; } table.grid .nowrap { white-space: nowrap; } /* 배지·버튼은 통째로 하나다 — 가운데서 접히면 모양이 깨진다 */ table.grid .pill, table.grid .btn { white-space: nowrap; } .pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid; } /* 상태 코드별 색(코드 = ApplyStatus 한 글자). 2026-09-14 개명 뒤 이름: R 신청 · P 심사중 · A 심사완료 · H 보류 · X 취소 · S 발송 · C 설치완료 · D 파기됨 */ .pill--R { background: #EEF4FF; border-color: #CBDCFB; color: #1D4ED8; } .pill--P { background: #FFF7E6; border-color: #FBE0A2; color: #92600A; } /* 심사완료 — 심사중(노랑)에서 한 걸음 나아간 «통과» 느낌의 청록. 설치완료(초록)와는 밝기로 갈린다 */ .pill--A { background: #E7F8F9; border-color: #A9E3E8; color: #0B6B75; } /* 세팅완료 — 심사완료(청록)와 발송(보라) 사이에 끼므로 둘 다와 갈리는 분홍 계열 */ .pill--T { background: #FDF0F6; border-color: #F5C2DC; color: #9D174D; } /* 발송 — 물건이 움직이는 단계라 파랑·초록 어느 쪽도 아닌 보라 */ .pill--S { background: #F3EEFF; border-color: #D6C7F7; color: #5B21B6; } .pill--C { background: #F0FBF4; border-color: #BFEDD3; color: #06713A; } .pill--X { background: #FDF2F2; border-color: #F3C9C9; color: #8E1F1F; } .pill--D { background: #F4F4F5; border-color: #E2E2E5; color: #6B7280; } /* 보류 — 취소(붉은 축)와 헷갈리지 않게 «멈춤» 느낌의 호박색. 신청(파랑)·심사중(노랑)과도 갈린다 */ .pill--H { background: #FFF4E6; border-color: #FBD5A5; color: #9A4B06; } /* ── 기존 이용 여부 뱃지(2026-09-11) — 상태 배지(.pill)보다 작고 옅게: 상태가 주, 이건 곁들임 ── */ /* 뱃지 묶음은 학원명 «아랫줄» 에 둔다. 이름 옆(inline)에 두면 줄이 넘어갈 때 margin-left 만큼 들여쓰기가 남고, «이름 + 가장 긴 뱃지» 가 한 덩이로 표 최소폭을 늘려 좁은 폭에서 가로 스크롤을 부른다(적대 검증 실측 +59px). */ .who-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .who { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.6; border: 1px solid; white-space: nowrap; } .who--edu { background: #FFF8DB; border-color: #F5DC7A; color: #7A5200; } /* 망고 계열 */ /* 옅은 축(이력·없음·확인 불가)도 11px 굵은 글씨라 명도 대비 4.5:1 을 넘기게 --muted(#6B7280, 바탕 #F4F4F5 에서 4.3:1)보다 진하게 */ .who--past { background: #F4F4F5; border-color: #E2E2E5; color: #52525B; } /* 가입·가맹 이력(탈퇴·삭제·미사용·해지) */ .who--pay { background: #E9FBF1; border-color: #A9E8C6; color: #0B6B3A; } /* 네이버 그린 계열 */ .who--new { background: #EEF4FF; border-color: #CBDCFB; color: #1D4ED8; } .who--none { background: #fff; border-color: #E2E2E5; color: #52525B; } /* 확인했고 없음 — 사실이라 실선 */ .who--unknown { background: #fff; border-color: #C9C5BC; color: #52525B; border-style: dashed; } /* 모름 — 점선 */ /* 상세의 판정 줄 — 날짜 뒤 상대 표기는 옅게 */ .match-sub { color: var(--muted); font-size: 12.5px; } .match-muted { color: var(--muted); } .match-at { white-space: nowrap; } /* 「2026-09-11 14:05 (오늘)」 한 덩이 — 날짜와 시각 사이에서 줄이 갈리지 않게 */ .match-note { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; } /* 목록 위 한 줄(망고페이 미연동 안내) */ /* ── 신청 통계 카드(관리 목록 위, 2026-09-11) ───────────────────────────────── 숫자 칸(.stat)은 «큰 수 + 이름 + 곁말» 세 줄. 상태 칸은 링크(누르면 그 상태로 거름)라 a.stat 에만 hover 를 준다. 색은 새로 만들지 않고 표의 배지(.pill · .who)에서 옮긴다 — 카드와 표를 눈으로 잇기 위해서다. */ .stats { padding: 18px 20px 16px; } .stats__head { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; } .stats__note { color: var(--muted); font-size: 12.5px; } .stats__label { margin: 14px 0 8px; font-size: 13px; font-weight: 800; color: var(--ink-2); letter-spacing: -.01em; } .stats__hint { margin-left: 4px; font-weight: 600; color: var(--muted); font-size: 12px; } /* auto-fit — 칸이 줄을 «채우도록» 늘린다. auto-fill 이면 넓은 화면에서 빈 칸 자리가 남아 칸이 좁아지고 곁말이 구절 중간에서 접혔다(캡처 실측). */ .stats__row { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); } .stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 9px 12px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #FCFBF8; color: var(--ink); text-decoration: none; } a.stat:hover { border-color: #CFCBC2; background: #fff; } a.stat:focus-visible { outline: 2px solid var(--naver-green); outline-offset: 1px; } /* 지금 거르고 있는 상태 — 테두리를 굵게(색만 바꾸지 않는다) */ .stat.is-on { border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--ink); } .stat__n { font-size: 22px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .stat__k { font-size: 13px; font-weight: 700; color: var(--ink-2); } .stat__sub { font-size: 11.5px; color: var(--muted); line-height: 1.45; } .stat--R .stat__n { color: #1D4ED8; } .stat--P .stat__n { color: #92600A; } .stat--A .stat__n { color: #0B6B75; } .stat--H .stat__n { color: #9A4B06; } .stat--X .stat__n { color: #8E1F1F; } .stat--T .stat__n { color: #9D174D; } .stat--S .stat__n { color: #5B21B6; } .stat--C .stat__n { color: #06713A; } .stat--D .stat__n { color: #6B7280; } .stat--existing { background: #FFFBEA; border-color: #F5E3A0; } .stat--existing .stat__n { color: #7A5200; } .stat--new .stat__n { color: #1D4ED8; } .stat--past .stat__n { color: #52525B; } .stat--pending { background: #fff; border-style: dashed; border-color: #C9C5BC; } /* 모름 — 뱃지(.who--unknown)처럼 점선 */ .stat--muted { background: #fff; } .stat--muted .stat__n { color: #52525B; } /* 0 은 옅게 — 뒤에 둬야 위의 색 규칙을 이긴다(명시도가 같으면 나중 규칙). 그래도 0 은 «정보» 다(「대기 없음」) — 큰 글자 기준 3:1 을 넘긴다: #85858E 는 세 바탕(#FCFBF8·#FFFBEA·#fff)에서 3.5:1 이상(적대 검증 실측) */ .stat.is-zero .stat__n { color: #85858E; } /* ── 기존 이용 여부 줄(2026-09-17 개편 · 사용자 지시) — «기존 고객» 묶음이 첫 줄을 «통째로» 쓰고, 나머지 넷이 다음 줄을 남은 공간에 맞춰 나눠 갖는다. 그래서 서브카드 다섯이 숫자 «아래» 가 아니라 «오른쪽» 에 한 줄로 선다(2026-09-14 판은 아래였다). 묶음이 한 줄을 다 쓰지 않으면 다섯이 접혀 두 줄이 되고, 카드 높이가 그만큼 다시 늘어난다. */ .stats__row--who { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats__row--who .stat--group { grid-column: 1 / -1; } @media (max-width: 900px) { .stats__row--who { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 묶음 카드는 안쪽 여백을 머리 링크·서브카드 영역이 각자 갖는다(카드 전체가 링크가 아니라서). */ /* 2026-09-17: 세로(머리 → 서브) 에서 가로(머리 | 서브) 로. 머리는 내용 폭만, 서브가 남은 폭을 갖는다. */ .stat--group { padding: 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); align-items: center; } .stat--group.is-within { border-color: #C9B45A; } /* 서브카드 중 하나가 켜짐 — 묶음은 옅게, 서브카드가 진하게 */ .stat__main { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px 8px; color: inherit; text-decoration: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } a.stat__main:hover { background: rgba(255, 255, 255, .6); } a.stat__main:focus-visible { outline: 2px solid var(--naver-green); outline-offset: -2px; } /* 2026-09-17: 서브카드를 «한 줄» 로 고정한다 — auto-fit 이면 폭이 조금만 모자라도 접혀서 카드가 다시 높아진다. 🔑 개수를 못 박지 않는다(repeat(5,…) 금지) — 「한쪽 확인 못 함」 은 조건부라 다섯일 때도 여섯일 때도 있다 (Index.cshtml 의 subs: Half > 0 이거나 그 필터가 켜지면 하나 더 붙는다). 실측으로 여섯일 때 두 줄로 접혔다. grid-auto-flow:column + grid-auto-columns 는 «몇 개든» 한 줄에 같은 폭으로 세운다. 한 줄이 좁아지는 쪽을 택하고(라벨은 두 줄까지 접힌다), 접는 것은 900px 아래에서만 한다. */ .stat__subs { display: grid; gap: 6px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 8px 10px; align-content: center; } .substat { display: flex; flex-direction: column; min-width: 0; padding: 6px 7px 7px; border: 1px solid #F0E4B8; border-radius: 8px; background: #fff; color: var(--ink); text-decoration: none; } a.substat:hover { border-color: #DCC77A; } a.substat:focus-visible { outline: 2px solid var(--naver-green); outline-offset: 1px; } .substat.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .substat__n { font-size: 17px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; color: #7A5200; } .substat__k { font-size: 11px; font-weight: 700; color: var(--ink-2); line-height: 1.35; } .substat.is-zero .substat__n { color: #85858E; } /* 세지 못한 칸(연동 전·확인 불가) — 뱃지·판정 대기 칸과 같은 점선. 숫자 자리에 말이 들어간다 */ .substat.is-na { border-style: dashed; border-color: #C9C5BC; } .substat.is-na .substat__n { font-size: 12px; font-weight: 700; color: #52525B; line-height: 1.75; } /* 좁은 화면에서는 2026-09-14 판(머리 위 · 서브 아래)으로 돌아간다 — 가로로 세우면 다섯이 한 칸 60px 이 된다. */ @media (max-width: 900px) { .stat--group { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .stat__main { border-radius: var(--radius-sm) var(--radius-sm) 0 0; } /* 여기서는 접히는 게 맞다 — grid-auto-flow 를 row 로 되돌려야 auto-fit 이 산다(column 이면 계속 한 줄로 민다). */ .stat__subs { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); padding: 2px 10px 10px; } } /* 목록의 학원명 링크(2026-09-14) — 굵기는 그대로, 밑줄은 hover 에만(표 안의 밑줄은 시끄럽다) */ .grid-name { font-weight: 700; color: inherit; text-decoration: none; } .grid-name:hover { text-decoration: underline; text-underline-offset: 2px; } .grid-name:focus-visible { outline: 2px solid var(--naver-green); outline-offset: 2px; border-radius: 3px; } /* ── 통계 아래 두 칸(2026-09-17 사용자 지시) — 왼쪽 원천별 표, 오른쪽 일별 신청 그래프. 표가 «내용 폭만» 쓰는 성질(아래) 때문에 그 오른쪽이 늘 비어 있었다. 그 자리를 그래프가 갖는다. 좁아지면 flex-wrap 으로 그래프가 표 아래로 내려간다(그래프 기준 폭 320px). */ .stats__bottom { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 24px; margin-top: 12px; } .stats__srcwrap { flex: 0 1 auto; min-width: 0; } .stats__daily { flex: 1 1 320px; min-width: 0; } .stats__src { overflow-x: auto; } /* 위쪽 여백은 .stats__bottom 이 갖는다 */ /* 표는 내용 폭만 — 카드 폭까지 늘리면 숫자 넷이 화면 양 끝으로 흩어져 한 줄로 안 읽힌다(캡처 실측) */ .stats__table { border-collapse: collapse; font-size: 13px; width: auto; } .stats__foot { margin: 6px 0 0; color: var(--muted); font-size: 12px; } /* 상태 칸은 이름이 짧다 — 좁은 화면에서도 한 줄에 셋은 들어가게 최소 폭을 줄인다(두 칸씩이면 일곱 칸이 네 줄이 된다) */ .stats__row--status { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); } /* 390px 폭 카드 안쪽 303px 에 셋(3×88+2×8=280) */ /* 파기됨 앞 경계선(2026-10-07 사용자 지시 «한 줄 유지 + 세로 분리선»). 좁은 폭: 줄 전체를 가로지르는 가로 점선 — 파기됨이 다음 줄 첫 칸으로 간다(세로선이면 줄 첫 칸일 때 카드 바깥 끝에 붙는다). 넓은 폭: 칸 10개(전체 + 상태 8 + 파기됨) + 선 한 줄 — 9칸 · 1px 선 · 1칸. 칸 하한 88px 에서 안쪽 폭 약 961px 이 필요해 (10×88 + 10×8 + 1) 관리 화면 폭으로 환산한 1060px 부터 켠다. 상태 수가 바뀌면 9 를 같이 고친다. */ .stats__sep { grid-column: 1 / -1; height: 0; border-top: 1px dashed var(--line); margin: 2px 0; } @media (min-width: 1060px) { .stats__row--status { grid-template-columns: repeat(9, minmax(0, 1fr)) 1px minmax(0, 1fr); } .stats__sep { grid-column: auto; height: auto; border-top: 0; border-left: 1px dashed var(--line); margin: 6px 0; } } .stats__row--status .stat__sub { white-space: nowrap; } .stats__table th, .stats__table td { padding: 6px 16px; border-bottom: 1px solid var(--line-2); white-space: nowrap; } .stats__table thead th { font-size: 12px; font-weight: 700; color: var(--ink-2); background: #FAF9F6; text-align: center; } .stats__table tbody th { text-align: left; font-weight: 700; } .stats__table td { text-align: center; font-variant-numeric: tabular-nums; } .stats__table td.stats__na { color: var(--muted); font-size: 12.5px; } /* ── 신청 폼 아래 «자주 묻는 질문»(2026-09-17) — 검색·생성형 답변이 인용할 본문. 제목·본문을 아코디언으로 감싸지 않는다: 접혀 있어도 DOM 에는 있지만, 사람이 펼치지 않으면 안 읽히는 문장을 «페이지의 주장» 으로 두고 싶지 않다(조건 문장이 특히 그렇다). */ .geo { margin-top: 18px; } .geo__body h3 { margin: 18px 0 6px; font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; } .geo__body h3:first-child { margin-top: 0; } .geo__body p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); word-break: keep-all; } .geo__note { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #FBFAF7; font-size: 13.5px; line-height: 1.7; color: var(--muted); } .geo__note strong { color: var(--ink-2); } /* ── 일별 신청 그래프(2026-09-17 사용자 지시) ──────────────────────────────── 자바스크립트 0줄 — 막대 높이는 서버가 계산한 %가 인라인 style 로 온다(CSP style-src 에 'unsafe-inline'). 막대는 «누르는 것이 아니다»: 목록 필터에 날짜 축이 없어서, 눌리게 보이면 아무 일도 안 하는 칸이 된다. */ .daily__head { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; } .daily__title { margin: 14px 0 8px; } .daily__nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .daily__navbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 7px; background: #FCFBF8; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1; } a.daily__navbtn:hover { border-color: #CFCBC2; background: #fff; } a.daily__navbtn:focus-visible { outline: 2px solid var(--naver-green); outline-offset: 1px; } /* 못 가는 쪽 — 링크를 빼면 가운데 «이번 주» 글자가 좌우로 흔들린다. 자리를 남기고 색만 죽인다. */ .daily__navbtn.is-off { color: #CFCBC2; background: transparent; border-color: transparent; } .daily__wk { min-width: 54px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2); } /* 🔑 칸 사이 gap 을 0 으로 둔다 — 아래 .daily__track 의 밑줄이 칸마다 끊기면 «기준선» 이 아니라 토막 일곱 개로 보인다. 막대는 칸 폭의 62%(최대 22px)라 gap 없이도 서로 붙지 않는다. */ .daily__chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; align-items: end; margin: 0; padding: 0; list-style: none; } .daily__day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; } .daily__n { font-size: 12px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #7A5200; } .daily__track { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 64px; border-bottom: 1px solid var(--line-2); } .daily__bar { width: 62%; max-width: 22px; min-height: 3px; border-radius: 4px 4px 0 0; background: #F0D48A; } .daily__d { font-size: 11.5px; font-weight: 700; line-height: 1.2; color: var(--ink-2); font-variant-numeric: tabular-nums; } .daily__w { font-size: 10.5px; line-height: 1.2; color: var(--muted); } .daily__day:first-child .daily__w { color: #B3261E; } /* 일 */ .daily__day:last-child .daily__w { color: #1D4ED8; } /* 토 */ .daily__day.is-today .daily__bar { background: var(--naver-green); } .daily__day.is-today .daily__n, .daily__day.is-today .daily__d { color: var(--naver-green); } /* 0건 — 바닥에 옅은 토막을 남긴다(막대가 «없는» 것과 «0» 은 다르다) */ .daily__day.is-zero .daily__bar { background: #E7E3D8; } .daily__day.is-zero .daily__n { color: #85858E; } /* 아직 오지 않은 날 — 막대를 그리지 «않는다». 0건과 같은 모양이면 「오늘 0건」 과 「내일」 이 구별되지 않는다. */ .daily__day.is-future .daily__bar { background: transparent; min-height: 0; } .daily__day.is-future .daily__d, .daily__day.is-future .daily__w { color: #C9C5BC; } /* ── 카드 머리 — 제목 왼쪽, 동작 버튼 오른쪽(2026-09-10 기본 정보 정정) ── */ /* 🪤 [hidden] 은 UA 스타일(display:none)이라 «display 를 가진 클래스»(.btn 의 inline-flex 등)에 진다 — 실제로 수정/취소/저장 세 버튼이 한꺼번에 보이는 걸로 드러났다. 여기서 못을 박는다. */ [hidden] { display: none !important; } .card__head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .card__head-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } /* 값 표시(span)와 입력란(input)을 «한 자리에» 겹쳐 둔다 — 편집 여부는 카드가 data-editing 으로 정하고, 스크립트는 그 속성만 토글한다. 자리를 두 벌 만들지 않아 값이 어긋날 여지가 없다. */ .dd-editable .dd-input { display: none; } /* 🪤 «속성이 있나» 가 아니라 «값이 1 인가» 로 본다 — Razor 는 data-* 속성을 «조건부 속성» 으로 다루지 않아서 값이 null 이어도 속성이 사라지지 않고 data-editing="" 로 남는다(요소가 태그 헬퍼든 아니든 같다 — hidden·required 같은 비-data 속성만 null/false 일 때 빠진다). 2026-09-11 캡처로 발견: [data-editing] 이면 모든 상세가 편집 상태로 떴다. */ [data-editing="1"] .dd-editable .dd-view { display: none; } [data-editing="1"] .dd-editable .dd-input { display: block; width: 100%; max-width: 24em; padding: 7px 9px; font-size: 14px; border-radius: 8px; } .secret { font-family: var(--mono); font-size: 14px; background: #F4F4F5; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; user-select: all; } /* ── 푸터 ───────────────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 40px; } .site-footer__in { max-width: var(--w-page); margin: 0 auto; padding: 22px 20px 34px; color: var(--muted); font-size: 13px; line-height: 1.7; } .site-footer a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; } .site-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .site-footer__brand img { height: 20px; width: auto; } /* ── 반응형 ─────────────────────────────────────────────────────────────────── */ @media (max-width: 560px) { .card { padding: 18px 15px; border-radius: 12px; } .hero { padding-top: 26px; } /* 부제 아래로 접힌 소개 링크는 폭을 다 쓴다 — 꺾쇠가 오른쪽 끝에 붙어야 «누르는 줄» 로 읽힌다 */ .guide-link { flex: 1 1 100%; justify-content: space-between; } .actions { flex-direction: column; } .receipt dl { grid-template-columns: 6.5em 1fr; } } /* ── 비밀번호 보기 토글 ───────────────────────────────────────────────────── 입력칸 «안쪽 오른쪽» 에 버튼을 얹는다. 옆에 두면 모바일에서 입력칸이 좁아진다. */ .input-affix { position: relative; display: block; } .input-affix > input { padding-right: 68px; } .input-affix__btn { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); height: 32px; padding: 0 10px; border: 1px solid #D8D5CE; border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; line-height: 1; } .input-affix__btn:hover { background: #F7F6F3; } .input-affix__btn:focus-visible { outline: 2px solid var(--naver-green); outline-offset: 1px; } /* ── 드롭존(첨부) ─────────────────────────────────────────────────────────── 기본은 지금의 점선 파일칸을 감싸는 «영역» 이고, 상태가 셋이다: idle → dragover(강조) → ready(파일이 들어옴). 상태를 색 하나로만 구분하지 않고 테두리·배경·아이콘 문구를 함께 바꾼다(색만 쓰면 색각 이상에서 구분이 사라진다). */ .dropzone { position: relative; border: 1.5px dashed #CFCBC2; border-radius: var(--radius-sm); background: #FCFBF8; padding: 12px; transition: border-color .12s, background .12s, box-shadow .12s; } .dropzone input[type="file"] { border: 0; background: transparent; padding: 0; } .dropzone__hint { margin-top: 8px; font-size: 12.5px; color: var(--muted); } .dropzone__state { display: none; margin-top: 8px; font-size: 13px; font-weight: 700; } .dropzone.is-dragover { border-color: var(--naver-green); border-style: solid; background: #F2FCF6; box-shadow: 0 0 0 3px rgba(3, 199, 90, .14); } .dropzone.is-dragover .dropzone__state { display: block; color: #06713A; } .dropzone.is-dragover .dropzone__hint { visibility: hidden; } .dropzone.is-ready { border-style: solid; border-color: #BFEDD3; background: #F6FDF9; } .dropzone.is-ready .dropzone__state { display: block; color: var(--ok); } .dropzone.is-bad { border-style: solid; border-color: #F3C9C9; background: var(--danger-bg); } .dropzone.is-bad .dropzone__state { display: block; color: var(--danger); } /* 폼 전체가 드래그를 받는 동안 「어디에 놓아야 하는지」를 알려 주는 옅은 표시. ⚠ `.is-ready`·`.is-bad` 는 «제외» 한다 — 명시도가 같은데 이 규칙이 뒤에 있어서, 빼지 않으면 드래그하는 동안 이미 채운 칸과 오류 칸의 색까지 덮어 상태가 사라진다(실측 지적). */ .form-dragging .dropzone:not(.is-dragover):not(.is-ready):not(.is-bad) { border-color: #9FD9B6; background: #FAFDFB; } /* ── 제출 버튼 진행 상태 ────────────────────────────────────────────────── */ .btn.is-busy { position: relative; color: transparent !important; pointer-events: none; } .btn.is-busy::after { content: attr(data-busy-text); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; } .btn--ghost.is-busy::after { color: var(--ink); } /* ── 첨부 카드(관리) ─────────────────────────────────────────────────────── 표에서 카드로 바꾼 이유는 «썸네일» 이다 — 서류가 맞는지 여는 것보다 보는 게 빠르다. */ .attach-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .attach-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; display: flex; flex-direction: column; } .attach-card__thumb { position: relative; aspect-ratio: 4 / 3; width: 100%; background: #F4F3EF; border: 0; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; cursor: zoom-in; overflow: hidden; } .attach-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .attach-card__thumb:focus-visible { outline: 2px solid var(--naver-green); outline-offset: -2px; } .attach-card__thumb--none { cursor: default; } /* 미리보기가 안 되는 형식 — 아이콘 자리 + 확장자 뱃지 */ .attach-card__glyph { font-size: 30px; color: #B8B4AB; line-height: 1; } .attach-card__ext { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(22, 24, 29, .78); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; } .attach-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .attach-card__kind { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; } .attach-card__name { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-card__meta { font-size: 12px; color: #9AA0AA; font-variant-numeric: tabular-nums; } .attach-card__foot { margin-top: auto; padding-top: 8px; display: flex; gap: 6px; align-items: center; } .attach-card.is-purged { opacity: .6; } .chip { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; border: 1px solid var(--line); color: var(--muted); background: #FAF9F6; } .chip--added { border-color: #FDE9A9; background: #FFFBEB; color: #6B4E00; } .chip--corp { border-color: #CBDCFB; background: #EEF4FF; color: #1D4ED8; margin-left: 6px; vertical-align: 1px; } /* 목록의 «법인» 표시(2026-09-14) */ /* ── 전체화면 미리보기 ─────────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(16, 17, 20, .88); display: flex; flex-direction: column; } .lightbox[hidden] { display: none; } /* 상단 바(2026-09-14): [제목 · n/N] [사진 바로가기 — 가운데] [내려받기 · 닫기]. 가운데 열은 minmax(0, auto) — auto 트랙이 먼저 내용 폭을 차지하므로 제목 열에 최소 160px 을 두어야 탭이 많을 때(6장+) 제목·n/N 이 0px 로 눌리지 않는다(적대 검증 실측 740px). 그 뒤에 남는 폭에서 탭 줄이 안에서 가로 스크롤한다. 720px 아래서는 둘째 줄로. */ .lightbox__bar { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, auto) minmax(max-content, 1fr); align-items: center; gap: 8px 12px; padding: 10px 16px; color: #EDEDEF; font-size: 13.5px; } .lightbox__head { display: flex; align-items: center; gap: 10px; min-width: 0; } .lightbox__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lightbox__count { flex: 0 0 auto; color: #B9B9C0; font-variant-numeric: tabular-nums; } .lightbox__spacer { flex: 1; } /* 🪤 «center + overflow» 는 넘친 앞쪽이 음수 좌표로 가서 스크롤로도 못 닿는다(적대 검증 실측) — safe center 는 넘치면 시작 쪽에 붙인다. safe 를 모르는 옛 엔진용으로 flex-start + 양끝 auto 마진을 먼저 두고(다 들어가면 가운데, 넘치면 시작 쪽), 아는 엔진은 safe center 가 덮는다. */ .lightbox__nav { display: flex; gap: 6px; justify-content: flex-start; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; /* focus 테두리가 잘리지 않게 */ } .lightbox__tab:first-child { margin-inline-start: auto; } .lightbox__tab:last-child { margin-inline-end: auto; } @supports (justify-content: safe center) { .lightbox__nav { justify-content: safe center; } .lightbox__tab:first-child { margin-inline-start: 0; } .lightbox__tab:last-child { margin-inline-end: 0; } } .lightbox__nav::-webkit-scrollbar { display: none; } .lightbox__tab { flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #EDEDEF; border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; } .lightbox__tab:hover { background: rgba(255, 255, 255, .16); } .lightbox__tab:focus-visible { outline: 2px solid var(--npay-green); outline-offset: 1px; } .lightbox__tab.is-on { background: #fff; color: #111; border-color: #fff; } .lightbox__tab:disabled { opacity: .4; cursor: default; } .lightbox__actions { display: flex; gap: 8px; justify-content: flex-end; } @media (max-width: 720px) { .lightbox__bar { grid-template-columns: minmax(0, 1fr) minmax(max-content, auto); } .lightbox__nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; } } /* 화면 양옆의 이전/다음 화살표 — 무대(stage) 위에 겹친다. 이미지가 작아도 «항상 가장자리» 라 손이 가는 자리가 일정하다 */ .lightbox__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(16, 17, 20, .6); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox__arrow--prev { left: 14px; } .lightbox__arrow--next { right: 14px; } .lightbox__arrow:hover { background: rgba(255, 255, 255, .24); } .lightbox__arrow:focus-visible { outline: 2px solid var(--npay-green); outline-offset: 2px; } @media (max-width: 560px) { .lightbox__arrow { width: 40px; height: 40px; font-size: 26px; } .lightbox__arrow--prev { left: 8px; } .lightbox__arrow--next { right: 8px; } } .lightbox__btn { border: 1px solid rgba(255,255,255,.32); background: transparent; color: #fff; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; } .lightbox__btn:hover { background: rgba(255,255,255,.12); } .lightbox__stage { position: relative; /* 양옆 화살표(.lightbox__arrow)의 기준 */ flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 72px 20px; /* 화살표 자리(14+48+10)만큼 비운다 — 이미지 위에 화살표가 겹치지 않게 */ } @media (max-width: 560px) { .lightbox__stage { padding: 0 52px 16px; } } .lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; } /* ── 나란한 카드 두 장 ───────────────────────────────────────────────────── 세로로 쌓으면 아래 카드가 스크롤 밖으로 밀려 «있는 줄도 모르는» 기능이 된다. 두 카드의 «높이를 맞춰» 한 덩어리로 읽히게 하고(기본 stretch), 좁아지면 한 줄로 접는다. .card 의 세로 margin 은 여기서 지운다 — grid gap 과 겹쳐 간격이 두 배가 된다. */ .card-duo { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0; } .card-duo > .card { margin: 0; } @media (max-width: 900px) { .card-duo { grid-template-columns: 1fr; } } /* ── 관리자 추가 업로드 ─────────────────────────────────────────────────── */ .attach-add { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); } .attach-add__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .attach-add__row > * { flex: 1 1 180px; } .attach-add__row .btn { flex: 0 0 auto; } /* ── 상태 배지의 처리 메모 레이어(2026-09-18 사용자 지시) ──────────────────── 올리면 툴팁, 누르면 끌어서 옮기는 독립 팝업. 브라우저 기본 title 툴팁을 안 쓰는 이유는 admin-memo.js 머리에 적어 뒀다(여러 줄 메모의 줄바꿈이 죽는 게 결정적이다). 🔑 «메모가 있는 배지만