/* ══════════════════════════════════════════════════════ 이벤트 표면 — 공개 페이지 · 만들기 · 관리 2026-09-10 fnny 컬러 시스템 (출처: 피그마 「⑨ 컬러 시스템 (확정)」). 토큰(색·타이포)은 tokengo.css를 그대로 쓴다. 여기 있는 것은 "이벤트라는 물건"을 그리는 규칙이다. 카드는 스트록이 없다 — 면은 --shadow로만 띄운다. 선이 남는 곳은 입력 필드와 상태(선택·오류·강조)뿐이다. 핵심 규칙 하나: **이벤트 페이지는 그 이벤트의 색을 입는다.** `--ev-brand`(주최자 색)에서 바탕 틴트와 강조색을 만든다. 앱 파랑은 Token Go의 색이지 이벤트의 색이 아니다 — 공유되는 화면에서는 주최자가 주인공이어야 한다 (`docs/PRD.md` 6절: 브랜드 색은 상세에서). ══════════════════════════════════════════════════════ */ :root { --ev-brand: var(--accent); /* 면(버튼·배지)에 쓰는 원색 */ --ev-ink: var(--accent); /* 글자에 쓰는 색. paintBrand가 읽히게 낮춘다 */ --ev-on-brand: #fff; /* 강조색 위 글자. JS가 밝기 보고 정한다 */ --ev-tint: color-mix(in srgb, var(--ev-brand) 7%, var(--bg)); --ev-surface: color-mix(in srgb, var(--ev-brand) 3%, var(--surface)); --ev-line: color-mix(in srgb, var(--ev-brand) 14%, transparent); --ev-soft: color-mix(in srgb, var(--ev-brand) 10%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ev-tint: color-mix(in srgb, var(--ev-brand) 12%, var(--bg)); --ev-surface: color-mix(in srgb, var(--ev-brand) 6%, var(--surface)); --ev-line: color-mix(in srgb, var(--ev-brand) 22%, transparent); } } :root[data-theme="dark"] { --ev-tint: color-mix(in srgb, var(--ev-brand) 12%, var(--bg)); --ev-surface: color-mix(in srgb, var(--ev-brand) 6%, var(--surface)); --ev-line: color-mix(in srgb, var(--ev-brand) 22%, transparent); } /* 네이티브 select — 다크(웹뷰 포함)에서 옵션 목록이 흰 바탕에 흰 글자로 사라지던 것. 팝업은 select 의 color-scheme·option 색을 따른다. 배경 none 인 필드 안 select 도 포함. */ select { color-scheme: light; } select option { background: var(--surface); color: var(--ink); } :root[data-theme="dark"] select { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) select { color-scheme: dark; } } /* 카드 안 글자 토큰 — 커스텀 배경에서 카드 밖 글자(--ev-page-*)를 바꿔도 카드는 제 톤을 지킨다 */ :root { --ev-card-ink: #202129; --ev-card-ink-2: #696A75; --ev-card-muted: #93949E; } :root[data-theme="dark"] { --ev-card-ink: #F4F4F6; --ev-card-ink-2: #A5A6AF; --ev-card-muted: #7D7E88; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ev-card-ink: #F4F4F6; --ev-card-ink-2: #A5A6AF; --ev-card-muted: #7D7E88; } } /* 히어로 바퀴가 화면 밖까지 넘친다. 가로 스크롤은 어느 화면에서도 필요 없다. hidden이 아니라 clip을 쓴다 — hidden은 스크롤 컨테이너를 만들어 상단바의 position:sticky를 깨뜨린다. */ html { overflow-x: clip; } body.ev { background: var(--ev-tint); min-height: 100vh; margin: 0; overflow-x: clip; } /* 앱 안(iframe)에서는 상단 로고 줄을 지운다. 바깥 화면에 뒤로가기가 있다. */ :root.embed .nav { display: none; } /* 앱의 유리 상단바가 위에 떠 있다 — 그 높이(--app-top, 셸이 알려줌) + 숨 쉴 틈만큼 내린다 */ :root.embed .grid, :root.embed .page, :root.embed .noti, :root.embed .mypage, :root.embed .points { padding-top: calc(var(--app-top, 52px) + 24px); } /* 유리 상단바가 이미 제목을 보여준다 — 안쪽 페이지의 제목 줄은 숨겨 겹침을 없앤다 */ :root.embed .noti > .head, :root.embed .mypage > .head, :root.embed .points > .head { display: none; } /* 앱 셸이 이미 뒤로가기를 그린다. 페이지가 하나 더 그리면 두 개가 겹친다. */ :root.embed #back { display: none; } /* 앱 상단바가 제목을 단다 — 페이지 제목 줄·뒤로 링크는 앱에서 숨긴다 (2026-09-11) */ :root.embed .page > .head:not(.keep), :root.embed .backlink { display: none; } /* ── 상단바 ───────────────────────────────────────────── */ /* 상단바는 따라다닌다. 모바일 웹에서 이벤트 상세로 들어가면 돌아갈 길이 브라우저 뒤로가기밖에 없었다 — 앱에서 온 사람은 그 버튼이 없다. 반투명 유리로 덮어 아래 내용이 비치되 글자는 읽히게 한다. */ /* 유리는 화면 끝까지 한 장이다. 예전에는 가운데 1040px에만 blur를 걸고 ::before로 바깥을 늘렸는데, blur가 걸린 부모 안쪽의 가짜 배경은 흐려지지 않아 좌우에 선명한 띠가 남았다. 이제 상단바가 전폭이고, 안쪽 여백으로 내용을 가운데 맞춘다. */ .nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 12px max(20px, calc((100% - 1040px) / 2)); border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--ev-tint) 55%, transparent); backdrop-filter: saturate(190%) blur(20px); -webkit-backdrop-filter: saturate(190%) blur(20px); } .nav.scrolled { border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); } @supports not (backdrop-filter: blur(1px)) { .nav { background: var(--ev-tint); } } /* 로고. 그라데이션 SVG라 색을 입히지 않는다 — 높이만 정한다. */ .nav .brand { display: inline-flex; align-items: center; text-decoration: none; } .logo { display: block; width: auto; } .nav .brand .logo { height: 22px; } .nav .sp { flex: 1; } .nav a, .nav button.link { background: none; border: 0; font-weight: 600; font-size: 13.5px; color: var(--muted); text-decoration: none; padding: 8px 10px; border-radius: 10px; cursor: pointer; } .nav a:hover, .nav button.link:hover { background: var(--ev-soft); color: var(--ink); } @media (max-width: 560px) { .nav .wide { display: none; } .nav { padding: 10px 16px; } } /* 알림 종. 배지는 안 읽은 것이 있을 때만 뜬다. */ .nav .bell { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--muted); } .nav .bell i { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; font-style: normal; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--ev-tint); } .nav .bell i[hidden] { display: none; } .nav .who { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--ev-brand); color: var(--ev-on-brand); font-weight: 700; font-size: 13px; text-decoration: none; flex: none; padding: 0; } .nav .who:hover { filter: brightness(1.08); background: var(--ev-brand); } /* ── 2단 골격 ─────────────────────────────────────────── */ /* 데스크톱은 커버가 왼쪽에 붙어 따라오고, 모바일은 커버가 맨 위 한 장이다. */ /* 데스크톱은 왼쪽에 표지·주최자가 붙어 따라오고, 모바일은 표지 → 제목 → 내용 → 주최자 순으로 한 줄이 된다. Luma와 같은 순서다 — 모바일에서 주최자가 제목보다 먼저 나오면 누구의 무슨 행사인지 헷갈린다. */ .grid { max-width: 1040px; margin: 0 auto; padding: 8px 20px 120px; display: grid; gap: 26px 44px; align-content: start; grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "cover main" "host main" ". main"; } .grid > .side { grid-area: cover; position: sticky; top: 20px; } .grid > .who { grid-area: host; position: sticky; top: 400px; } .grid > .main { grid-area: main; display: grid; gap: 26px; min-width: 0; align-content: start; } @media (max-width: 860px) { .grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cover" "main" "host"; gap: 24px; padding-bottom: 140px; } .grid > .side, .grid > .who { position: static; } } /* ── 커버 ─────────────────────────────────────────────── */ .cover { aspect-ratio: 1; width: 100%; border-radius: 18px; overflow: hidden; background: var(--sunken) center/cover no-repeat; box-shadow: 0 1px 2px rgba(32,33,41,.06), 0 24px 48px -20px rgba(32,33,41,.28); } /* 커버가 없으면 이벤트 색으로 만든 무늬를 깐다. 회색 빈 상자보다 낫다. */ .cover.empty { background: radial-gradient(120% 90% at 20% 15%, color-mix(in srgb, var(--ev-brand) 55%, transparent), transparent 60%), radial-gradient(100% 80% at 85% 80%, color-mix(in srgb, var(--ev-brand) 30%, transparent), transparent 55%), var(--surface); display: grid; place-items: center; } .cover.empty span { font-weight: 800; font-size: 30px; line-height: 1.2; letter-spacing: -.03em; color: color-mix(in srgb, var(--ev-brand) 80%, var(--ink)); padding: 0 20px; text-align: center; } /* ── 라벨 + 실선 (섹션 머리) ──────────────────────────── */ .rule { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; color: var(--muted); } .rule::after { content: ""; flex: 1; height: 1px; background: var(--ev-line); } /* ── 주최자 ───────────────────────────────────────────── */ .host { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14.5px; } .host .ava { width: 26px; height: 26px; border-radius: 999px; flex: none; display: grid; place-items: center; background: var(--ev-brand); color: var(--ev-on-brand); font-weight: 700; font-size: 12px; } /* ── 제목 ─────────────────────────────────────────────── */ .ev-title { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; letter-spacing: -.025em; font-weight: 800; margin: 0; text-wrap: balance; } /* ── 정보 행 (날짜·장소) ──────────────────────────────── */ .facts { display: grid; gap: 14px; } .fact { display: flex; gap: 12px; align-items: center; text-align: left; background: none; border: 0; padding: 0; color: inherit; width: 100%; } .fact.tap { cursor: pointer; } .fact .ico { background: var(--sunken); box-shadow: none; } /* 플랫: 옅은 타일, 그림자 없음 */ .fact.tap:hover .ico { background: var(--ev-soft); } .fact > div:not(.ico) b { display: block; font-size: 15.5px; font-weight: 700; } .fact > div:not(.ico) span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; } /* 날짜는 작은 달력 조각으로. 숫자가 먼저 읽힌다. */ /* 아이콘 상자의 기본은 "가운데 하나". 15px 머리 행은 날짜 조각(.m/.d)만 쓴다 — 기본값으로 두면 알림·오류 화면 아이콘이 첫 행에 갇혀 위로 붙는다. */ .ico { width: 46px; height: 46px; border-radius: 12px; flex: none; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; transition: box-shadow var(--t-press) var(--ease); } .ico:has(.m) { grid-template-rows: 15px 1fr; } .ico .m { font-weight: 600; font-size: 9px; line-height: 15px; width: 100%; text-align: center; color: var(--muted); background: var(--ev-soft); } .ico .d { font-weight: 700; font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; } .ico.glyph { color: var(--ink-2); } .ico.glyph svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* 아이콘을 담는 상자 안의 SVG는 전부 블록이어야 한다 (baseline 여백 제거) */ .ico svg, .nav .bell svg, .mi svg, .n-item .ico svg { display: block; } /* ── 참여 카드 (Luma의 등록 카드에 해당) ──────────────── */ .join { border-radius: 14px; overflow: hidden; background: var(--ev-surface); box-shadow: var(--shadow); } .join > h2 { margin: 0; padding: 11px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); background: var(--ev-soft); border-bottom: 1px solid var(--ev-line); } .join .body { padding: 16px; display: grid; gap: 14px; } .join .lead { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; } /* 미션 줄 — QR·AR을 나란히 */ .mission { display: flex; gap: 11px; align-items: center; } .mission .mi { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--ev-soft); color: var(--ev-ink); } .mission .mi svg { width: 19px; height: 19px; fill: currentColor; } .mission b { display: block; font-size: 14.5px; } .mission span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; } .mission .pt { margin-left: auto; font-weight: 700; font-size: 14px; color: var(--ev-ink); font-variant-numeric: tabular-nums; } /* 정원 게이지 */ .gauge { display: grid; gap: 7px; } .gauge .row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 600; } .gauge .track { height: 6px; border-radius: 999px; background: var(--ev-soft); overflow: hidden; } .gauge .track i { display: block; height: 100%; background: var(--ev-brand); border-radius: 999px; transition: width var(--t-enter) var(--ease); } /* 이벤트 색을 입은 큰 버튼 */ .btn-ev { width: 100%; height: 52px; border: 0; border-radius: 12px; cursor: pointer; background: var(--ev-brand); color: var(--ev-on-brand); font-weight: 700; font-size: 15.5px; transition: transform var(--t-press) var(--ease), filter var(--t-press) var(--ease); } .btn-ev:hover { filter: brightness(1.06); } .btn-ev:active { transform: scale(.985); } .btn-ev:disabled { background: var(--sunken); color: var(--disabled); cursor: default; filter: none; } .btn-ev.ghost { background: var(--ev-soft); color: var(--ev-ink); } .btn-ev.action { background: var(--action); color: var(--on-action); } a.btn-ev { display: inline-grid; place-items: center; text-decoration: none; } /* ── 소개 ─────────────────────────────────────────────── */ /* 마크다운 서브셋 렌더 (ev-render.js aboutHtml): p·h3·h4·blockquote·ul·ol·hr·a·strong·em·img 만 나온다 */ .about { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin: 10px 0 0; word-break: keep-all; overflow-wrap: anywhere; } .about p { margin: 0 0 10px; } .about h3, .about h4 { margin: 18px 0 6px; color: var(--ink); font-weight: 800; line-height: 1.35; } .about h3 { font-size: 19px; } .about h4 { font-size: 16px; margin-top: 14px; } .about strong { color: var(--ink); font-weight: 700; } .about blockquote { margin: 8px 0 12px; padding: 8px 14px; border-left: 3px solid var(--line-strong); background: var(--sunken); border-radius: 0 10px 10px 0; } .about ul, .about ol { margin: 4px 0 10px; padding-left: 22px; } .about li { margin: 2px 0; } .about hr { border: 0; border-top: 1px solid var(--line-strong); margin: 16px 0; } .about a { color: var(--ev-ink, var(--ink)); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .about > :first-child { margin-top: 0; } .about > :last-child { margin-bottom: 0; } .about-img { display: block; width: 100%; height: auto; border-radius: var(--radius); margin: 10px 0; cursor: zoom-in; } /* 유튜브 라이트 임베드 — 썸네일 + ▶, 탭하면 같은 자리에 iframe */ .about-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 10px 0; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: #000; cursor: pointer; } .about-yt img, .about-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .about-yt .yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 14px; background: rgba(0, 0, 0, .55); transition: background .15s; } .about-yt .yt-play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; } .about-yt:hover .yt-play, .about-yt:focus-visible .yt-play { background: #f00; } .about-yt.on { cursor: default; } /* 소개 서식 툴바 · 링크 입력 · 미리보기 (create.html) — 칩 톤 */ .md-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; } .md-bar button { border: 0; border-radius: 8px; min-width: 30px; padding: 5px 9px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; background: var(--sunken); color: var(--ink-2); } .md-bar button:hover { color: var(--ink); } .md-bar button:disabled { opacity: .6; cursor: default; } .md-bar button i { font-family: Georgia, 'Times New Roman', serif; font-size: 14px; } .md-bar button.pv { margin-left: auto; } .md-bar button.pv[aria-pressed="true"] { background: var(--action); color: var(--on-action); } .md-link { display: flex; gap: 6px; margin-bottom: 6px; } .md-link input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); } .md-link input:focus { outline: none; border-color: var(--ink-2); } .md-link button { border: 0; border-radius: 8px; padding: 0 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; background: var(--sunken); color: var(--ink-2); } .md-link button:first-of-type { background: var(--action); color: var(--on-action); } .md-pv { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sunken); } .md-pv > small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 4px; } .md-pv .about { margin: 0; font-size: 14px; } .md-pv .about blockquote { background: var(--surface); } /* ── 모바일 하단 고정 CTA ─────────────────────────────── */ .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 20px calc(14px + var(--safe-bottom, 0px)); background: color-mix(in srgb, var(--ev-tint) 35%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); display: none; } .dock .note { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0 0; } @media (max-width: 860px) { .dock { display: block; } .join .btn-ev { display: none; } } /* ══════════════════════════════════════════════════════ 만들기 — 폼이 아니라 초대장이다 라벨 붙은 입력 더미가 아니라, 완성될 페이지 위에 바로 쓴다 (Luma 방식). ══════════════════════════════════════════════════════ */ .compose { display: grid; gap: 16px; } .compose .name { width: 100%; border: 0; background: none; padding: 0; color: var(--ink); font-weight: 800; font-size: clamp(26px, 4.6vw, 38px); line-height: 1.15; letter-spacing: -.025em; outline: none; } .compose .name::placeholder { color: color-mix(in srgb, var(--ink) 20%, transparent); } /* 입력을 감싼 줄. 아이콘 + 내용 + (선택) 우측 값 */ .line { display: flex; gap: 12px; align-items: center; border: 1px solid var(--ev-line); border-radius: 12px; background: var(--ev-surface); padding: 10px 14px; transition: border-color var(--t-press) var(--ease); } .line:focus-within { border-color: color-mix(in srgb, var(--ev-brand) 55%, transparent); } .line > .ico { border: 0; background: var(--ev-soft); width: 38px; height: 38px; border-radius: 10px; color: var(--ev-ink); box-shadow: none; } .line > .ico svg { width: 19px; height: 19px; } .line .grow { flex: 1; min-width: 0; display: grid; gap: 2px; } .line label { font-size: 11.5px; font-weight: 700; color: var(--muted); } .line input, .line select, .line textarea { width: 100%; border: 0; background: none; padding: 0; outline: none; color: var(--ink); font-weight: 600; font-size: 15px; } .line textarea { resize: vertical; min-height: 66px; font-weight: 500; line-height: 1.55; } .line input::placeholder, .line textarea::placeholder { color: var(--disabled); font-weight: 500; } .line.top { align-items: flex-start; } .line.two { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px 12px; align-items: center; } .line.two > .ico { grid-row: span 2; align-self: start; } /* 나란히 놓을 자리가 확실할 때만 2열로. 좁으면 달력 버튼이 잘린다. */ @media (min-width: 780px) { .line.two { grid-template-columns: 38px minmax(170px, 1fr) minmax(170px, 1fr); } .line.two > .ico { grid-row: auto; align-self: center; } } .line input[type="datetime-local"] { min-width: 0; } /* 되돌릴 수 없는 동작. 저장과 같은 색이면 안 된다. */ .danger-zone h2 { color: var(--danger); } .btn-ev.danger { background: var(--danger-wash); color: var(--danger); } .btn-ev.danger:hover { filter: brightness(0.98); } /* 파일 선택 줄 — 기본 file 입력은 브라우저마다 모양이 달라 숨기고 버튼을 만든다 */ .filerow { display: flex; align-items: center; gap: 8px; min-width: 0; } .filerow .pick { flex: none; border: 1px solid var(--ev-line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .filerow .pick:hover { border-color: color-mix(in srgb, var(--ev-brand) 45%, transparent); } .filerow .pick.del { color: var(--danger); border-color: transparent; padding: 6px 8px; } .filerow .fname { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .filerow .fname.on { color: var(--ink); font-weight: 600; } /* 선택형 카드 (참여 유형) */ .opts { display: grid; gap: 9px; } .opt-card { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 12px; background: var(--ev-surface); box-shadow: var(--shadow); cursor: pointer; } .opt-card.on { box-shadow: var(--shadow), 0 0 0 1.5px var(--ev-brand); background: var(--ev-soft); } .opt-card.off { opacity: .45; cursor: not-allowed; } .opt-card input { margin: 3px 0 0; accent-color: var(--ev-brand); } .opt-card b { display: block; font-size: 14.5px; } .opt-card span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; } /* 켜고 끄는 줄 */ .toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ev-surface); box-shadow: var(--shadow); } .toggle-row .grow { flex: 1; min-width: 0; } .toggle-row .grow b { display: block; font-size: 14.5px; } .toggle-row .grow span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; } .sw { position: relative; width: 46px; height: 28px; flex: none; } .sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; } .sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--sunken); transition: background var(--t-press) var(--ease); } .sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 3px rgba(32,33,41,.25); transition: transform var(--t-press) var(--ease); } .sw input:checked + i { background: var(--ev-brand); } .sw input:checked + i::after { transform: translateX(18px); } /* 지도 픽커 */ .picker { height: 240px; border-radius: 12px; overflow: hidden; background: var(--sunken); box-shadow: var(--shadow); } .hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; } .err { background: var(--danger-wash); color: var(--danger); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; } .ok-box { background: var(--success-wash); color: var(--success); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; } .empty { color: var(--muted); font-size: 14px; text-align: center; padding: 56px 0; line-height: 1.7; } .empty a { color: var(--ev-ink); font-weight: 600; } /* 복사 줄 */ .copy { display: flex; gap: 8px; align-items: center; } .copy input { flex: 1; min-width: 0; border: 1px solid var(--ev-line); border-radius: 10px; padding: 11px 13px; background: var(--ev-surface); color: var(--muted); font-weight: 500; font-size: 13px; outline: none; } .copy button { flex: none; height: 41px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer; background: var(--ev-soft); color: var(--ev-ink); font-weight: 700; font-size: 13.5px; } /* ══════════════════════════════════════════════════════ 관리 ══════════════════════════════════════════════════════ */ .page { max-width: 1040px; margin: 0 auto; padding: 8px 20px 100px; } .page.narrow { max-width: 720px; } .head { margin: 12px 0 26px; } .head h1 { font-size: clamp(24px, 4vw, 32px); margin: 0 0 6px; letter-spacing: -.02em; } .head p { color: var(--muted); font-size: 14px; margin: 0; } .cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* 로도