/* [2026-09-07] 축제 보기 우측에 있던 작은 지도를 없앴다(너무 좁아 쓸모없다는 지적). 지도를 그리던 Leaflet 라이브러리와 스타일도 같이 걷어냈다 — 파일이 그만큼 가벼워진다. */ /* ============================================================ 주말지도 — 디자인 시스템 v0.5 방향: myrealtrip.com 실측 토큰 그대로 적용. 그라데이션 없음, 이모지 없음, 색상 신규 발명 없음 — 전부 실측값(ink/브랜드퍼플/스타 골드/틴트칩). Pretendard 단일 서체. 카드는 테두리/그림자 없이 사진+타이포로만 구성. ============================================================ */ :root{ --bg:#FFFFFF; --surface:#F5F6F7; --surface-2:#EDEEF0; --ink:#101418; --ink-2:#495057; --ink-3:#666D75; --ink-4:#848C94; --ink-5:#ADB5BD; --line:#E9ECEF; --line-2:#DEE2E6; --border:#CED4DA; --brand:#8238FA; --brand-w:#E6D7FE; --brand-d:#7130E0; --star:#FFAD01; --blue:#1B87E9; --blue-w:#E7F4FD; --amber:#96690B; --amber-w:#FFF2C6; --red:#DE4B3F; --red-w:#FCEAE9; --green:#1E874B; --green-w:#E3F5EA; --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:16px; --r-full:9999px; --shadow-sm:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.1); --shadow-pill:0 1px 2px rgba(0,0,0,.15); --nav:60px; --tab:58px; --max:1240px; --hdr:60px; /* 헤더 전체 높이 — 넓은 화면에선 카테고리 줄만큼 더 커진다 */ --f-ui:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif; --f-hd:var(--f-ui); } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} body{ font-family:var(--f-ui); background:var(--bg); color:var(--ink); font-size:15px; line-height:1.6; letter-spacing:-.01em; word-break:keep-all; -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 0; } button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;letter-spacing:inherit} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.32} .num{font-variant-numeric:tabular-nums} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px} ::-webkit-scrollbar-track{background:transparent} ::selection{background:var(--brand);color:#fff} /* ── 아이콘 ───────────────────────────────────────── */ .i{width:1em;height:1em;stroke:currentColor;stroke-width:1.7;fill:none; stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-.13em} .i.fill{fill:currentColor;stroke:none} /* ── 라벨 · 규칙선 ──────────────────────────────────── */ .kicker{font-size:12.5px;font-weight:500;color:var(--ink-4);letter-spacing:0} /* [2026-09-11] 히어로 윗줄은 '날짜'와 '건수' 두 덩이다. 넓은 화면에선 가운뎃점으로 이어 붙이고, 좁은 화면에선 건수 덩이가 통째로 아래 줄로 내려간다 — 낱말 중간에서 끊기지 않게. */ .kicker b{font-weight:500;white-space:nowrap} /* [2026-09-21] 가운뎃점을 뒤 덩이 앞에 붙이고, 덩이 사이를 딱 붙여 놨었다. 그래서 줄을 바꿀 자리가 한 군데도 없어 360px에서 마지막 덩이가 화면 밖으로 나갔다 (오른쪽 끝 386.95px — 화면은 360px). 붙는 자리를 앞 덩이 끝으로 옮기고 덩이 사이에 빈칸을 둬서, 좁으면 가운뎃점 다음에서 줄이 바뀌게 한다. */ .kicker b:not(:last-child)::after{content:' ·'} .rule{height:1px;background:var(--line);border:0} .rule-ink{height:1px;background:var(--line-2);border:0} /* ── 헤더 ───────────────────────────────────────────── */ header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94); backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)} .hd{max-width:var(--max);margin:0 auto;height:var(--nav);display:flex;align-items:center;gap:16px;padding:0 18px} .brand{display:flex;align-items:baseline;gap:6px;flex-shrink:0} .brand .bm{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .brand .bs{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--ink-4)} /* 카테고리 줄 — 헤더 아래쪽 한 줄. 좁은 화면에서는 가로로 밀어서 본다. */ nav.gnb{display:none;border-top:1px solid var(--line);background:#fff} nav.gnb .gnbi{max-width:var(--max);margin:0 auto;padding:0 18px;display:flex;gap:2px; overflow-x:auto;scrollbar-width:none} nav.gnb .gnbi::-webkit-scrollbar{display:none} nav.gnb button{display:flex;align-items:center;gap:7px;white-space:nowrap; font-size:14px;font-weight:600;color:var(--ink-3);padding:11px 14px;border-bottom:2px solid transparent} nav.gnb button:hover{color:var(--ink)} nav.gnb button.on{color:var(--ink);border-bottom-color:var(--ink)} /* 이모지는 글자보다 살짝 크게 — 작으면 뭉개져서 무슨 그림인지 안 보인다 */ nav.gnb .ge{font-size:16px;line-height:1} .hd-r{margin-left:auto;display:flex;align-items:center;gap:2px} /* [2026-09-09] 좁은 화면에서는 로고·아이콘 옆에 검색창까지 넣으면 셋 다 눌리게 좁아진다. 검색창을 아랫줄로 내려 폭을 다 쓴다(모바일 앱들이 쓰는 방식). 검색은 이 서비스의 주 입구라, 좁다고 숨기면 이름으로 찾아온 사람이 갈 데가 없어진다. */ @media (max-width:1023px){ .hd{height:auto;flex-wrap:wrap;padding:9px 14px 11px;row-gap:9px} .hsrch{order:3;width:100%;max-width:none;margin:0;padding:10px 14px} .hd-r{order:2} } .ib{width:34px;height:34px;display:grid;place-items:center;font-size:17px;color:var(--ink-3);position:relative;border-radius:var(--r-full)} .ib:hover{color:var(--ink);background:var(--surface)} .ib .cnt{position:absolute;top:2px;right:0;background:var(--brand);color:#fff;font-size:9px; font-weight:700;min-width:14px;height:14px;border-radius:99px;display:grid;place-items:center;padding:0 3px; font-variant-numeric:tabular-nums} .btn-in{margin-left:6px;padding:8px 15px;border:1px solid var(--border);border-radius:var(--r-sm); font-size:13px;font-weight:600;color:var(--ink-2)} .btn-in:hover{background:var(--surface);color:var(--ink)} .back{display:none;width:34px;height:34px;place-items:center;font-size:18px;border-radius:var(--r-full)} .back:hover{background:var(--surface)} main{padding-bottom:calc(var(--tab) + 24px)} .wrap{max-width:var(--max);margin:0 auto;padding:0 18px} .view{display:none}.view.on{display:block} /* ── 하단 탭 (모바일) ───────────────────────────────── */ .tabs{position:fixed;bottom:0;left:0;right:0;z-index:70;height:var(--tab); background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line); display:flex;padding-bottom:env(safe-area-inset-bottom)} /* [2026-09-18] 아래 바가 잘 안 보인다는 말을 들어 재 봤더니, 문제는 바가 아니라 꺼진 탭 글자였다. 10px 글자에 #ADB5BD(--ink-5)라 흰 바탕과 대비가 2.07:1이었다 — 보통 글자에 필요한 4.5:1(WCAG AA)의 절반도 안 된다. 켜진 탭은 18.5:1로 멀쩡했으니, 안 보인 것은 '지금 있지 않은 탭' 넷이다. 바를 보라색으로 칠하는 안도 나왔지만 그렇게 하지 않았다. · 바를 칠해도 그 위 글자 대비는 따로 맞춰야 한다 — 같은 일을 두 번 하게 된다 · 이 화면은 색을 거의 쓰지 않는 설계다. 바가 통째로 보라면 어느 화면에서나 가장 눈에 띄는 것이 내용(카드)이 아니라 네비게이션이 된다 · 보라는 지금 '누를 수 있는 것'을 뜻한다(로그인 버튼·링크). 바에 칠하면 묽어진다 · 켜짐/꺼짐을 색으로만 가르고 있어서, 바가 보라가 되면 '지금 여기'를 나타낼 방법을 새로 만들어야 한다 꺼진 탭을 --ink-3(5.24:1)으로 올리고, 켜진 탭은 굵기와 2px 줄로 따로 세운다. 2px 줄은 넓은 화면 상단탭(nav.gnb button.on)이 이미 쓰는 방식이라 새 규칙이 아니다. */ .tabs button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; font-size:10px;font-weight:600;color:var(--ink-3);letter-spacing:0} .tabs button .i{width:19px;height:19px} .tabs button.on{color:var(--ink);font-weight:700} .tabs button.on .i{stroke-width:2.1} .tabs button.on::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ink)} /* ── 사진 자리 (플레이트) — 그라데이션 없는 단색 플레이트 ─── */ .plate{position:relative;overflow:hidden;background:var(--pa,var(--surface))} .plate .vg{display:none} .plate .noimg{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:var(--surface)} .plate .noimg span{font-size:12px;font-weight:500;color:var(--ink-4)} .plate.pending{background:var(--surface)} /* [2026-10-16] 자료가 오기 전(약 1~2초)에는 홈 아래쪽 칸과 바닥글을 그리지 않는다. 예전엔 빈 칸 제목과 바닥글이 먼저 그려졌다가 자료가 오면 한꺼번에 아래로 밀려났다 — Cloudflare 실측 CLS 0.67~0.87(기준 0.1), 홈 방문의 16%가 '나쁨'. 첫 화면을 다 그린 뒤 booting을 뗀다. */ body.booting #home > .wrap, body.booting #home > .ft{display:none} /* 화면이 길어지며 세로 스크롤 막대가 생길 때 전체가 옆으로 몇 px 움직이던 것도 밀림으로 잡혔다(0.43) — 막대 자리를 처음부터 잡아 둔다 */ html{scrollbar-gutter:stable} /* [2026-10-13] 사진 본체. 틀 크기까지 늘린다 — 예전엔 width/height:auto라 틀보다 작은 사진이 제 크기로 가운데 떠 있었다. 기본은 비율 지킴(흐린 배경이 남는 곳을 메움). 불러온 뒤 사진맞춤()이 .fill을 붙이면 틀을 꽉 채운다: 틀과 비율이 ±12% 안인 사진(A4 포스터 1:1.41을 3:4에 — 위아래 3%쯤, 2:3 포스터는 5%쯤 잘림), 카드의 세로 틀에 든 가로 풍경 사진(가운데를 자름). 정사각 포스터처럼 비율이 크게 다르면 글씨가 잘리므로 그대로 둔다. */ .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block} .pimg.fill{object-fit:cover} /* ── 상태 배지 (틴트 칩) ─────────────────────────────── */ .bg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600; border-radius:var(--r-sm);padding:4px 8px;color:var(--ink-3);background:var(--surface);white-space:nowrap} .bg .dt{width:5px;height:5px;border-radius:99px;background:currentColor;animation:bl 1.8s infinite} @keyframes bl{0%,100%{opacity:1}50%{opacity:.3}} .bg.live{background:var(--blue-w);color:var(--blue)} .bg.soon{background:var(--amber-w);color:var(--amber)} .bg.plan{background:var(--surface);color:var(--ink-3)} .bg.stop{background:var(--red-w);color:var(--red)} .bg.done{background:var(--surface-2);color:var(--ink-4)} /* ── 축제 카드 — 테두리 · 그림자 없음, 이미지+타이포만 ──── */ /* [2026-09-16] display:block이었다. 그런데 바로 아래 .tx는 flex:1을, .ph는 flex-shrink:0을 달고 있다 — 세로 flex를 전제로 쓴 값들인데 부모가 block이라 둘 다 아무 일도 하지 않았다. 그 탓에 .tx가 카드 바닥까지 늘어나지 않아, 맨 아래 묶음(.cbot)의 margin-top:auto가 닿는 바닥이 카드마다 1.6px씩 달랐다(실측). 한 행에서 날씨 줄이 2640.34·2640.36·2640.36·2638.75·2638.73으로 어긋난 원인이다. */ .card{cursor:pointer;position:relative;display:flex;flex-direction:column} /* [2026-10-13] 사진 틀을 세로 3:4 하나로 맞춘다(대표님, 목업 확인). 공연 99%·전시 87%·축제 절반이 세로 포스터다. 예전엔 휴대폰 홈 줄 5:4·목록 4:3·에디터 픽 가로 띠라 포스터가 가운데 작게 떠 있었다. 채우는 방식은 아래 .pimg. */ .card .ph{aspect-ratio:3/4;border-radius:var(--r);position:relative;overflow:hidden;flex-shrink:0} .card .ph .plate{position:absolute;inset:0} .card .plate{transition:transform .4s cubic-bezier(.22,.61,.36,1)} .card:hover .plate{transform:scale(1.03)} /* [2026-09-10] 글상자를 세로로 펴고 요금 줄을 맨 아래로 민다. 제목이 한 줄인 카드와 두 줄인 카드의 요금 높이가 달라 들쭉날쭉했다. 격자가 한 줄의 카드들을 같은 높이로 늘려주므로, 바닥에 붙이면 자연히 나란해진다. */ .card .tx{padding:10px 0 0;flex:1;display:flex;flex-direction:column} .card .tagrow{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px;min-height:22px} .card h3{font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.4;color:var(--ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:calc(15px * 1.4 * 2)} /* [2026-09-10] 지역·주차장 줄은 필요한 만큼만 차지한다(한 줄이면 한 줄). 두 줄 자리를 늘 비워뒀더니, 한 줄짜리 카드에서 아래 요금이 뚝 떨어져 보였다(사용자 지적). 줄 맞추기는 제목 쪽(항상 두 줄)이 맡고, 여기서는 붙는 걸 우선한다. */ .card .meta{margin-top:3px;font-size:12.5px;color:var(--ink-3);line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; word-break:keep-all} /* [2026-09-10] margin-top:auto로 요금을 카드 바닥까지 밀었더니 지역·주차장 줄과 너무 멀어졌다(사용자 지적). 위쪽 칸들(배지·제목·지역)이 이미 높이가 같으니 바닥까지 밀 필요가 없다 — 바로 아래에 붙여도 카드끼리 저절로 나란해진다. */ /* [2026-09-16] 카드마다 날씨·요금이 있기도 없기도 해서 아래쪽 줄이 어긋났다(사용자 지적). 두 가지를 같이 해야 맞는다. · 묶음을 카드 바닥에 붙인다(margin-top:auto) — 제목이 두 줄인 카드가 섞여도 아래쪽이 같은 높이에서 시작한다. · 날씨도 요금도 없을 때 빈 줄을 남긴다 — 그래야 두 번째 줄이 늘 두 번째 줄이다. · 줄 높이를 정수 픽셀로 못 박는다. 1.5em은 12.5px에서 18.75px이 되는데, 소수점이 카드마다 다르게 반올림되어 1px씩 어긋났다(실측). 바닥에만 붙이고 빈 줄을 안 남기면, 끝나는 높이는 맞아도 날씨 자리에 요금이 앉는다. 실제로 그렇게 나갔다가 '아직 안 맞는다'는 지적을 받았다. 둘 다 없는 카드에는 빈 자리가 남지만, 카드 바닥의 여백이라 눈에 띄지 않는다. */ .card .cbot{margin-top:auto} .card .priceline{margin-top:6px;min-height:21px;display:flex;align-items:center;gap:8px; font-size:14px;line-height:21px;font-weight:700;color:var(--ink)} .card .priceline .free{color:var(--green)} .card .priceline .tk{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--brand)} /* 리스트형 (모바일 탐색) */ /* [2026-09-21] flex-direction:row가 빠져 있었다. 바로 위 .card에 flex-direction:column이 있어서(카드 아래쪽 줄을 맞추려고 넣은 것), 가로 목록 카드가 그걸 물려받아 세로로 섰다 — 112px짜리 사진 밑에 글자가 붙고 오른쪽 242px이 통째로 비었다. 좁은 화면 목록이 전부 이랬다. 아래 넓은 화면 규칙(.card.row{flex-direction:column})은 일부러 세로로 되돌리는 것이라, 여기 기본이 가로여야 그 규칙이 뜻을 가진다. */ .card.row{display:flex;flex-direction:row;gap:13px;align-items:flex-start} .card.row .ph{width:96px;flex-shrink:0;aspect-ratio:3/4;border-radius:var(--r-sm)} .card.row .tx{flex:1;min-width:0;padding:0} .card.row h3{font-size:14.5px} /* [2026-11-04] 휴대폰 목록에서 '무료'가 포스터 아래로 처졌다(대표님, 실측 축제 20장 중 16장·전시 20/20·달력 14/20). 넓은 화면 격자용 규칙을 그대로 써서 제목이 한 줄이어도 두 줄 자리를 비우고, 날씨와 요금을 두 줄에 따로 놓았다. 배지·제목·지역·날씨·요금이 128px(96px 포스터 3:4)를 넘어 147px까지 내려갔다. 좁은 화면 가로 목록에서는 카드 하나가 한 줄이라 옆 카드와 줄을 맞출 일이 없다. 그래서 · 제목은 필요한 만큼만(두 줄 자리 비우지 않음) · 날씨는 왼쪽, 요금은 오른쪽 한 줄로 · 글 묶음을 포스터 높이만큼 펴서 그 줄을 포스터 바닥에 맞춘다. */ @media (max-width:767px){ .card.row .tx{min-height:128px} .card.row .tagrow{margin-bottom:4px} .card.row h3{min-height:0} .card.row .cbot{display:flex;align-items:center;gap:8px;min-width:0;padding-top:4px} .card.row .cbot .wx{flex:1;min-width:0;margin-top:0} .card.row .cbot .priceline{margin-top:0;margin-left:auto;flex-shrink:0} } /* ── 히어로 ─────────────────────────────────────────── */ .hero{padding:30px 0 0} .hero .kicker{margin-bottom:12px} .hero h1{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.3;margin-bottom:10px;color:var(--ink)} .hero .lead{font-size:14px;color:var(--ink-3);max-width:38em;margin-bottom:22px} .hero .kicker,.hero h1,.hero .lead,.hero .sf{max-width:780px} /* 검색 바 */ .sf{border:1px solid var(--line-2);border-radius:var(--r);background:#fff;box-shadow:var(--shadow-sm); display:flex;align-items:stretch;overflow:hidden} .sf .fd{flex:1;padding:12px 4px 12px 16px;min-width:0;text-align:left;position:relative} .sf .fd + .fd::before{content:'';position:absolute;left:0;top:22%;height:56%;width:1px;background:var(--line)} .sf .fd .k{font-size:11px;font-weight:600;color:var(--ink-4);display:block;margin-bottom:3px} .sf .fd .v{font-size:14px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:5px;color:var(--ink)} .sf .fd .v .i{width:12px;height:12px;color:var(--ink-4)} .sf .go{flex:0 0 auto;margin:6px;padding:0 20px;background:var(--ink);color:#fff;border-radius:var(--r-sm); font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px} .sf .go:hover{background:#000} /* 빠른 선택 — 5축 */ .qs{padding:20px 0 24px} .qrow{display:flex;align-items:baseline;gap:12px;padding:6px 0} .qrow .qk{flex:0 0 52px;font-size:12px;font-weight:600;color:var(--ink-4);padding-top:6px} .qrow .qv{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} .qrow .qv::-webkit-scrollbar{display:none} .chip{border:none;background:var(--surface);padding:7px 13px;font-size:13px;border-radius:var(--r-sm); font-weight:500;color:var(--ink-2);white-space:nowrap;letter-spacing:-.005em;display:inline-flex; align-items:center;gap:5px} .chip:hover{background:var(--surface-2);color:var(--ink)} .chip.on{background:var(--ink);color:#fff;font-weight:700} /* [2026-09-18] 연보라 바탕에 --brand(#8238FA) 글씨는 대비가 3.98:1이었다 — 13px 글자에 필요한 4.5:1(WCAG AA)에 못 미친다. 같은 날 아래 바에서 대비 때문에 안 보인다는 말을 듣고 고쳤는데, 새로 만드는 자리에 같은 문제를 낼 수는 없다. 글씨만 한 단계 진한 보라(--brand-d)로 낮춘다 — 바탕색과 느낌은 그대로다. */ .chip.hl{background:var(--brand-w);color:var(--brand-d)} .chip.hl.on{background:var(--brand);color:#fff} .chip .i{width:12px;height:12px} .qnote{font-size:12px;color:var(--ink-3);padding-top:14px;line-height:1.65;border-top:1px solid var(--line);margin-top:14px} .qnote b{color:var(--ink-2);font-weight:600} /* ── 섹션 ───────────────────────────────────────────── */ section.sc{padding:36px 0 0} .sh{display:flex;align-items:flex-end;gap:12px;padding-bottom:0;margin-bottom:16px} .sh h2{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .sh .n{font-size:12.5px;color:var(--ink-4);font-weight:500;font-variant-numeric:tabular-nums} .sh .mo{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:4px} .sh .mo:hover{color:var(--brand)} /* [2026-09-18] 좁은 화면에서 제목·건수·'전체 →' 셋이 한 줄을 나눠 쓰느라 서로를 밀었다. 건수가 긴 두 칸에서 제목도 두 줄, 건수도 두 줄로 쪼개져 글자가 깨져 보였다(사용자 지적). 이번 주말 갈 수 있는 축제 → 제목 50px(2줄) · 건수 '193건 · 09.18~09.20' 40px(2줄) 이번 주말 열리는 전통시장 → 제목 50px(2줄) · 건수 '오일장 85곳 · 상설장 1,292곳' 40px 건수를 제목 아래 제 줄로 내린다. 첫 줄은 제목과 '전체 →'가 쓰고, 둘째 줄을 건수가 통째로 쓴다 — 그러면 건수가 끊길 일이 없고, 제목도 한 줄로 들어갈 자리가 생긴다. 건수가 짧은 칸(139건)은 둘째 줄이 한 줄 더 생기지만, 칸마다 제목 아래 같은 자리에 숫자가 오므로 오히려 읽기가 고르다. 넓은 화면은 지금처럼 한 줄에 둔다. */ @media (max-width:767px){ .sh{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:12px;row-gap:2px} .sh h2{grid-column:1;grid-row:1} .sh .n{grid-column:1;grid-row:2;white-space:nowrap} .sh .mo{grid-column:2;grid-row:1;margin-left:0} } .sdesc{font-size:13px;color:var(--ink-3);margin:-8px 0 18px;max-width:46em} .hsc{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding:0 18px 6px;margin:0 -18px} /* 좌우 화살표 — 넓은 화면에서만 쓴다. 좁은 화면은 손가락으로 밀면 되니 화살표가 필요 없다. */ /* [2026-09-11] 화살표는 '카드 전체'가 아니라 '포스터'의 한가운데에 둔다. 카드는 포스터 아래에 제목·지역·가격이 붙어 세로로 길다. 카드 한가운데(50%)에 놓으면 포스터 기준으로는 한참 아래로 보인다(사용자 지적). 포스터 높이는 칸 너비에 따라 달라져서 CSS만으로는 계산이 안 되므로, 그릴 때 재서 --cnav-top에 넣어준다. 변수가 없을 때(재기 전 한순간)는 예전처럼 카드 한가운데에 둔다 — 화살표가 사라지진 않게. */ .carou{position:relative} .cnav{display:none;position:absolute;top:var(--cnav-top, calc(50% - 20px));z-index:6;width:40px;height:40px;border-radius:50%; background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-sm); place-items:center;color:var(--ink-3)} .cnav:hover{color:var(--ink);border-color:var(--border)} .cnav.prev{left:-19px} .cnav.next{right:-19px} .cnav.prev .i{transform:rotate(180deg)} .cnav[disabled]{opacity:.3;cursor:default} .cnav[disabled]:hover{color:var(--ink-3);border-color:var(--line-2)} /* [2026-09-11] 공연의 '막공 임박' 배지. 축제의 live/soon/plan에 없는 상태라 색을 따로 준다. 빨강 계열로 둔 이유: 이 칸에서 유일하게 '지금 아니면 끝'인 정보라 눈에 띄어야 한다. */ .bg.last{background:#fdecec;color:#c0392b} .bg.last .dt{background:#c0392b} /* [2026-09-11] 출발지를 안 고르면 '가까운 순'은 계산할 수가 없다. 그래도 눌리게 두면 엉뚱한 순서가 나오고 사용자는 정렬이 고장났다고 느낀다. 흐리게 두되 누를 수는 있게 한다 — 누르면 출발지 고르기로 넘어간다. */ .chip.dim{opacity:.5} /* 저장했지만 지금 목록엔 없는 것 — 있다는 건 보여주되 눈에 덜 띄게 */ .mcard.gone{opacity:.72} .mcard.gone .bg{background:var(--surface);color:var(--ink-4)} /* 헤더 검색 미리보기 맨 아래 줄 — 눌러서 전체 결과로 넘어간다 */ .hs-more{display:flex !important;align-items:center;justify-content:space-between;gap:10px; background:var(--surface);border-top:1px solid var(--line)} .hs-more b{font-size:13px;color:var(--brand);font-weight:700} .hs-more span{font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums} .hsc::-webkit-scrollbar{display:none} .hsc > *{flex:0 0 auto;width:150px} .grid{display:grid;grid-template-columns:1fr;gap:22px} /* 컬렉션 — 개별 라운드 카드 */ .colls{display:grid;grid-template-columns:1fr;gap:10px} .coll{background:var(--surface);border-radius:var(--r);padding:18px 18px;cursor:pointer;display:flex; flex-direction:column;min-height:126px} .coll:hover{background:var(--surface-2)} .coll .kicker{margin-bottom:8px} .coll h3{font-size:16px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;color:var(--ink)} .coll p{font-size:12.5px;color:var(--ink-3);margin-bottom:auto} .coll .cf{font-size:12px;font-weight:600;color:var(--ink-3);padding-top:14px;display:flex;align-items:center;gap:5px} .coll:hover .cf{color:var(--brand)} /* 지역 표 — 칩 그리드 */ /* D-day 리스트 */ .cds{display:flex;flex-direction:column} a.cd,a.b1,a.cg,a.nav{text-decoration:none;color:inherit} /* 전통시장 카드 — 사진이 없으므로 글자와 여백으로만 구성한다 */ .mcard{border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;background:var(--bg); display:flex;flex-direction:column;gap:5px} .dmore{padding-top:4px}.dmore a{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--brand-d,#5b3fd1);text-decoration:none} #mmore{padding:0 0 24px;text-align:center} .mcard h3,.mcard h1{font-size:16px;margin:2px 0 2px} /* h1 — 시장 쪽(/m/)에 미리 채운 카드(lib/app-page.js) */ .mcard .meta{font-size:12.5px;color:var(--ink-4);line-height:1.6} /* [2026-10-02] 화장실·주차·전화 줄. 전화는 누르면 걸리지만 버튼처럼 크게 두지 않는다 — PC 다섯 칸 배치에서 카드 안쪽이 143px뿐이라, 버튼 하나를 더 넣으면 아래 버튼 줄이 또 넘친다. */ .mcard .mfac{color:var(--ink-3)} .mcard .mtel{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px;white-space:nowrap} .mcard .mtel:hover{text-decoration-color:currentColor} /* 취급품목은 한 줄일 때도 두 줄 자리를 차지한다. 안 그러면 품목이 많은 카드와 적은 카드에서 아래 버튼까지의 간격이 달라져, 줄이 맞지 않는 것처럼 보인다. */ .mcard .meta.items{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:calc(12.5px * 1.6 * 2)} /* [2026-09-14] 배지가 둘인 카드('정기장' + '상설장+5일장')에서 하트가 다음 줄로 밀려 줄 높이가 57px까지 늘고 배지가 잘려 보였다. 배지는 감싸서 접히게 하고, 하트는 오른쪽 맨 위에 고정한다 — 접히든 말든 자리가 흔들리지 않는다. */ /* 접히게 두었더니 '정기장 + 상설장+5일장'처럼 배지가 긴 카드만 줄이 두 개가 되어 제목이 32px 아래에서 시작했다(다른 카드는 50, 이 카드만 82). 격자가 어긋나 보인다. 한 줄로 고정하고, 자리가 모자라면 뒤 배지를 말줄임한다 — 전체 값은 마우스를 올리면 보인다. 시장 종류(정기장/상시)는 절대 줄이지 않는다. 그게 이 카드에서 제일 중요한 한마디다. */ .mcard .tagrow{display:flex;gap:5px;align-items:center;min-height:26px} .mcard .tagrow .bgs{display:flex;gap:5px;flex:1;min-width:0;overflow:hidden} .mcard .tagrow .bgs .bg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .mcard .tagrow .bgs .bg:first-child{flex-shrink:0} /* [2026-09-10] 취급 품목 줄이 한 줄이냐 세 줄이냐에 따라 길찾기 버튼 높이가 제각각이었다. 버튼은 카드 맨 아래가 제자리다 — 바닥에 붙이면 카드끼리 저절로 나란해진다. */ .mcard .mnav{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px} /* [2026-09-29] 공유 버튼을 넣자 PC에서 카드 밖으로 삐져나왔다 (대표님 지적). 카드 다섯 줄 배치에서 안쪽 너비가 143px인데 버튼 셋이 170px을 썼다. 접히게 하지 않으면 '공유' 두 글자가 아이콘 아래로 쪼개져 버튼 높이가 35→54가 되고 그대로 카드 테두리를 넘는다. 줄바꿈은 접고(wrap), 버튼 안에서는 안 접는다(nowrap). */ .mcard .mnav>*{white-space:nowrap} .mcard .mnav .i{vertical-align:-2px;margin-right:3px} /* [2026-09-10] 지난 회차 사진을 빌려 쓴 경우, 언제 사진인지 숨기지 않고 적는다. 올해 모습과 다를 수 있는데 올해 사진인 척하면 안 된다. */ .imgy{position:absolute;left:8px;bottom:8px;z-index:2;padding:3px 8px;border-radius:999px; background:rgba(16,20,24,.72);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:-.01em} /* 지난 회차 목록 */ .edis{display:flex;flex-direction:column;gap:2px} .edi{display:flex;align-items:baseline;gap:10px;padding:9px 12px;border-radius:var(--r-sm);font-size:13.5px} .edi b{min-width:52px;font-weight:700} .edi span{color:var(--ink-4);font-size:12.5px;font-variant-numeric:tabular-nums} .edi em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:var(--brand)} .edi.now{background:var(--surface)} /* ── 사진 없는 카드의 대표 이미지 ───────────────────── [2026-09-21] 그동안은 테마 색 판에 흰 글자를 얹고, 그 위에 옅은 선그림을 깔았다. 목록을 훑으면 사진 있는 카드와 없는 카드가 여전히 다른 물건처럼 보였다(사용자 지적). 이제 진짜 그림 파일 석 장을 쓴다 — 축제·전통시장·공연 각각 하나씩. [왜 잘라 채우지 않고 여백을 두나] 받은 그림은 3:4 세로형인데 카드 사진칸은 5:4 가로다. 잘라 채우면(cover) 둘 중 하나를 잃는다 — 아래를 자르면 천막·좌판·무대가 중간에서 끊기고, 위를 자르면 이름을 얹을 하늘이 없어진다. 실제로 재보니 아래를 기준으로 자를 때 글자 자리의 명암비가 1.0:1까지 떨어졌다(같은 색 위에 같은 색). 그래서 공연 포스터에 이미 쓰고 있는 방식을 그대로 쓴다: 원본 비율을 지켜 가운데 놓고(contain), 남는 여백은 같은 그림을 흐리게 깔아 메운다. 그림 배경이 단색 파스텔이라 흐린 여백과 경계가 거의 안 보인다. [글자색] 그림이 밝은 파스텔이라 흰 글자는 안 보인다. 먹색으로 바꾸고, 위쪽에 흰 가림막을 아주 옅게 깐다. 실측 명암비(글자가 앉는 위쪽 32%, 가장 불리한 점 기준): 축제 14.0:1 · 전통시장 13.9:1 · 공연 9.5:1 — 셋 다 기준(4.5:1)을 넉넉히 넘는다. 공연 그림만 바탕이 짙어 가림막을 조금 더 준다(.k-perf). */ .plate.phx{position:relative;overflow:hidden;background:var(--phx-bg,#EDE7F4)} .plate.phx.k-market{--phx-bg:#F2E7D9} .plate.phx.k-perf{--phx-bg:#A99CB4} /* 여백을 메우는 흐린 바탕. inset을 음수로 줘서 흐림 가장자리가 안 비치게 한다. */ .phx-bg{position:absolute;inset:-24px;background-size:cover;background-position:center; filter:blur(26px) brightness(1.06) saturate(.9);transform:scale(1.08)} /* 그림 본체 — 비율을 지켜 가운데. */ .phx-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block} /* 글자 뒤에 까는 흰 가림막. 아래로 갈수록 사라져 그림을 가리지 않는다. */ .plate.phx::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.28) 34%,rgba(255,255,255,0) 66%)} .plate.phx.k-perf::before{ background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.50) 34%,rgba(255,255,255,0) 70%)} /* 글자는 전부 위쪽에 모은다 — 받은 그림이 위를 비워 두고 그린 것이라서. */ /* 오른쪽을 44px 비워 둔다 — 저장(하트) 버튼이 top:8 right:8에 32px로 앉아 있어서, 비워 두지 않으면 제목 첫 줄이 그 밑으로 들어간다(실측 1440px에서 27px 겹침). */ .phx-cap{position:absolute;top:0;left:0;right:0;z-index:2;padding:11px 44px 0 13px;color:var(--ink)} .phx-top{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin-bottom:5px} .phx-bi{font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--ink-3)} .phx-th{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap; background:rgba(255,255,255,.62);color:var(--ink-2)} .phx-name{font-size:15.5px;font-weight:700;line-height:1.36;letter-spacing:-.02em;word-break:keep-all; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .phx-foot{margin-top:5px;font-size:10.5px;font-weight:600;color:var(--ink-3)} .phx-foot span{white-space:nowrap} /* [2026-10-19] 좁은 카드(홈 가로 줄·비슷한 축제 150px 안팎)에서는 '음식·먹거리' 꼬리표가 두 줄로 꺾이고 제목이 말줄임으로 잘렸다(대표님). 카드 폭을 보고 글자와 오른쪽 여백을 줄인다. */ .plate.phx{container-type:inline-size} @container (max-width:190px){ .phx-cap{padding:9px 34px 0 10px} .phx-bi{font-size:9px} .phx-th{font-size:8.5px;padding:1px 6px} .phx-name{font-size:13px;line-height:1.32;-webkit-line-clamp:4} .phx-foot{font-size:9.5px;margin-top:4px} } /* 더 좁은 카드(태블릿 상세의 '비슷한 축제' 105px 안팎) — '주말지도' 글씨를 빼서 꼬리표 자리를 만든다 */ @container (max-width:135px){ .phx-cap{padding:8px 8px 0 9px} .phx-bi{display:none} .phx-name{font-size:12px} .phx-foot{font-size:9px} } /* 가로 목록 카드의 사진칸은 112x84다. 여기에 이름을 얹으면 석 줄이 눌려 읽히지 않고, 바로 옆에 같은 이름이 제목으로 또 있다. 그림만 보여준다. (넓은 화면에서는 이 카드가 세로로 서면서 사진칸이 커지므로 아래에서 다시 켠다.) */ .card.row .plate.phx .phx-cap{display:none} /* [2026-10-12] 축제 표지(테마·계절 그림) — 바탕색이 표지마다 달라 글자색도 표지가 정한다(--tink). 이름 뒤에는 흰 가림막 대신 그 표지의 바탕색을 아래로 옅어지게 깐다 — 이름이 길어 그림에 닿아도 읽힌다. */ .plate.tcv::before{display:none} .tcv-art{position:absolute;inset:0;width:100%;height:100%;display:block} .tcv .phx-cap{color:var(--tink);padding-bottom:28px;background:linear-gradient(var(--cbg) 62%,transparent)} .tcv .phx-bi,.tcv .phx-foot{color:inherit;opacity:.78} .tcv .phx-th{background:color-mix(in srgb,var(--tink) 14%,transparent);color:inherit} /* 상세 화면의 큰 대표 이미지 — 같은 구성을 크게 */ .phx-in{padding:24px 28px 0} .phx-in .phx-name{font-size:30px;-webkit-line-clamp:3;line-height:1.3} .phx-in .phx-bi{font-size:12px} .phx-in .phx-th{font-size:11px;padding:3px 9px} .phx-in .phx-foot{font-size:12.5px;margin-top:8px} @media (max-width:767px){ .phx-in{padding:16px 18px 0} .phx-in .phx-name{font-size:21px} } /* 전통시장 카드는 사진 칸이 없는 글자 전용이다. 축제처럼 큰 그림 칸을 만들면 1,344곳이 전부 같은 그림으로 채워져 목록이 두 배로 길어지고 볼 것은 안 늘어난다. 그래서 카드 높이는 그대로 두고, 오른쪽에 그림을 옅게 깔아 무엇을 보는 칸인지만 드러낸다. [2026-09-21] 선그림이던 것을 같은 전통시장 그림 파일로 바꿨다 — 세 칸이 같은 그림을 쓴다. */ .mcard{position:relative;overflow:hidden} .mcard-art{position:absolute;right:0;bottom:0;width:104px;height:86%;object-fit:cover; object-position:center 78%;opacity:.2;pointer-events:none; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 86%); mask-image:linear-gradient(to right,transparent 0,#000 86%)} .mcard>*:not(.mcard-art){position:relative;z-index:1} /* 출발지 선택 버튼 — 조건 체크박스와 헷갈리지 않게 다른 모양으로 */ .obtn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%; padding:9px 11px;margin-bottom:6px;border:1px solid var(--border);border-radius:var(--r-sm); font-size:13px;background:var(--bg);text-align:left} .obtn.on{border-color:var(--ink);font-weight:700} .obtn.rsx{border-style:dashed;color:var(--ink-4)} /* ── 적용된 조건 (히어로 안, 칩 줄 아래) ───────────────── 조건마다 ✕가 붙어 하나씩 뺄 수 있다. 히어로 배경 위라 흰 글자 기준으로 맞춘다. */ .acond{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px; padding-top:14px;border-top:1px solid var(--line)} .acl{font-size:12px;font-weight:700;color:var(--ink-4);flex-shrink:0} /* [2026-09-14] 여기에 '아직 안 눌렀다'는 표시로 보라색 테를 둘렀다가 걷어냈다. 사용자가 보기엔 앞서 걷어낸 초점 테두리와 똑같이 생겨서, 알림이 아니라 고장으로 읽혔다. 찾기 버튼은 이미 진한 색으로 눈에 띄고 글자도 '찾기'다. 덧붙일 게 없다. */ .actags{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0} .actag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 12px; border-radius:var(--r-full);background:var(--ink);color:#fff;font-size:12.5px;font-weight:600} .actag .x{font-size:10px;opacity:.7} .actag:hover .x{opacity:1} /* [2026-09-11] .more에 CSS가 아예 없어서 '더 보기'가 배경도 테두리도 없는 맨 글자로 나오고 있었다. 버튼처럼 생겨야 버튼인 줄 안다. */ .more{padding:11px 22px;border-radius:var(--r-full);border:1px solid var(--border); background:var(--bg);font-size:14px;font-weight:600;color:var(--ink-2)} .more:hover{border-color:var(--ink-3);color:var(--ink);background:var(--surface)} /* 섹션 제목 옆(조건 지우기 등)에 올 때는 작게 */ .sh .more{padding:5px 12px;font-size:12.5px;margin-left:auto} .acond .more{padding:5px 12px;font-size:12.5px} .acx{flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--ink-3);text-decoration:underline; text-underline-offset:3px} .acx:hover{color:var(--ink)} /* ── 메인 검색창 ──────────────────────────────────── */ /* 헤더 검색창 — 마이리얼트립처럼 로고 옆 가운데에 놓는다 */ .hsrch{position:relative;display:flex;align-items:center;gap:9px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full); padding:9px 16px;flex:1;max-width:520px;margin:0 auto} /* [2026-09-14] 보라 네모를 걷어내는 대신, 이 칸의 원래 표시를 또렷하게 만든다. 초점 표시를 없애면 키보드로 쓰는 사람이 지금 어디에 있는지 알 수 없다. */ .hsrch:focus-within{background:#fff;border-color:var(--border);box-shadow:var(--shadow-sm)} .hsrch input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:14px;outline:none} /* [2026-09-14] 휴대폰에서 검색창을 누르면 화면이 확 커지면서 좌우로 잘렸다. 아이폰 사파리는 글자가 16px보다 작은 입력칸을 누르면 '읽기 힘들겠다' 싶어 화면을 저절로 확대한다. 우리 입력칸은 14~15px이라 매번 그랬다. 확대 자체를 막는 방법(maximum-scale)도 있지만, 그러면 글씨를 키워 보는 사람이 손가락으로 확대하는 것까지 막힌다. 글자를 16px로 키우는 쪽이 맞다. 손가락으로 쓰는 화면에서만 키운다 — 마우스로 쓰는 화면은 지금 모양 그대로 둔다. */ @media (pointer: coarse) { /* !important를 쓰는 이유: 검색 시트의 입력칸은 style="" 안에 글자 크기가 박혀 있어서 보통 규칙으로는 이기지 못한다. 확대를 막는 건 그 한 칸에서도 똑같이 중요하다. */ .hsrch input, .memo-new textarea, #sq, input[type="search"], input[type="text"], textarea, select { font-size: 16px !important; } } .hsrch input::-webkit-search-cancel-button{display:none} .hsrch>svg{color:var(--ink-4);flex-shrink:0} .hsx{flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--line-2);color:#fff; font-size:10px;display:grid;place-items:center} /* 검색 결과는 검색창 바로 아래에 떠서 화면을 밀지 않는다 */ .hsres{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70; background:#fff;border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-sm);overflow:hidden;max-height:60vh;overflow-y:auto} .hsres:empty{display:none} .hsres button{display:block;width:100%;text-align:left;padding:11px 16px;border-bottom:1px solid var(--line)} .hsres button:last-child{border-bottom:none} .hsres button:hover{background:var(--surface)} /* ── 달력 ────────────────────────────────────────────── 기간 음영은 '띠(band)'로 그린다. 칸 사이에 틈(gap)을 주면 띠가 끊겨 보이므로 가로 간격은 0으로 두고, 안쪽 버튼에 여백을 줘서 날짜끼리 붙지 않게 한다. */ .calw{max-width:340px} .calhd{display:flex;align-items:center;gap:10px;margin-bottom:8px} .calhd b{font-size:15px} .calhint{margin-left:auto;font-size:12px;color:var(--ink-4)} .calrow{display:grid;grid-template-columns:repeat(7,1fr);row-gap:3px} .calwk{font-size:11px;color:var(--ink-4);text-align:center;margin-bottom:4px} .cald{position:relative;padding:1px 0} /* 고른 기간에 깔리는 옅은 띠. 양 끝만 모서리를 둥글린다. */ .cald.band{background:var(--brand-w)} .cald.band.s{border-radius:999px 0 0 999px} .cald.band.e{border-radius:0 999px 999px 0} .cald.band.s.e{border-radius:999px} .calb{width:100%;aspect-ratio:1;max-height:34px;border-radius:50%;font-size:12px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; background:transparent;color:var(--ink);position:relative} .calb.sel{background:var(--ink);color:#fff;font-weight:700} .calb.past{color:var(--ink-5);opacity:.35;cursor:default} .calb .dot{width:4px;height:4px;border-radius:50%;background:transparent} .calb .dot.on{background:var(--brand)} .calb.sel .dot.on{background:#fff} .cd{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:var(--r-sm)} .cd:last-child{border-bottom:none} .cd:hover{background:var(--surface)} .cd .dd{flex:0 0 46px;text-align:right;font-size:18px;font-weight:700;letter-spacing:-.02em; color:var(--brand);font-variant-numeric:tabular-nums} .cd .dd small{display:block;font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--ink-5)} .cd .ct{flex:1;min-width:0} .cd .ct b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;color:var(--ink)} .cd .ct span{font-size:12px;color:var(--ink-4)} .cd .cd-travel{margin-top:3px} .cd > .i{color:var(--ink-5);width:16px;height:16px} /* ── 탐색 ───────────────────────────────────────────── */ .eh{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:var(--hdr);z-index:50} .ehi{max-width:var(--max);margin:0 auto;padding:11px 18px} .eq{display:flex;align-items:center;gap:10px;margin-bottom:10px} .eq .qb{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:#fff; border-radius:var(--r-sm);padding:9px 12px;font-size:13.5px;font-weight:600;min-width:0} .eq .qb .i{color:var(--ink-4)} .eq .qb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .eq .qb .x{margin-left:auto;color:var(--ink-4)} .tg{display:flex;background:var(--surface);border-radius:var(--r-sm);padding:2px;flex-shrink:0} .tg button{padding:7px 12px;font-size:12px;font-weight:600;color:var(--ink-3);border-radius:var(--r-xs)} .tg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-pill)} .fch{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px} .fch::-webkit-scrollbar{display:none} .eb{max-width:var(--max);margin:0 auto;padding:0 18px} .fs{display:none} .rb{display:flex;align-items:baseline;padding:16px 0 14px} .rb b{font-size:13.5px;font-weight:600;color:var(--ink)} .rb b em{font-style:normal;color:var(--brand);font-variant-numeric:tabular-nums} .rb .so{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:5px} /* [2026-09-22] grid-template-columns가 없어서 열 크기가 auto였다. auto는 '내용이 요구하는 최소 너비보다 작아지지 않는다'는 뜻이라, 카드 안에 줄바꿈 못 하는 긴 글자가 있으면 열이 화면보다 넓어지고 페이지가 통째로 옆으로 밀린다(360px에서 문서 폭 370px — Codex 독립 검토 W015가 운영 자료로 잡았다. 이 컴퓨터의 자료로는 재현되지 않았다). 넓은 화면 규칙은 이미 minmax(0,1fr)로 같은 것을 막고 있었다(아래 .lc 참고). 여기만 빠져 있었다. */ .lc{display:grid;grid-template-columns:minmax(0,1fr);gap:20px} /* [2026-10-12] 달력 탭 */ .cal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .cal-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} .cal-seg button{border:0;background:var(--bg);padding:8px 18px;font-size:14px;color:var(--ink-3);cursor:pointer} .cal-seg button[aria-pressed="true"]{background:var(--brand-w);color:var(--brand);font-weight:700} .cal-month{display:flex;align-items:center;gap:6px}.cal-month b{font-size:16px;min-width:92px;text-align:center} .cal-mv{border:1px solid var(--line);background:var(--bg);width:34px;height:34px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)} .cal-mv .i{transform:rotate(180deg)}.cal-mv.nx .i{transform:none}.cal-mv:disabled{opacity:.35;cursor:default} .cal-legend{font-size:12px;color:var(--ink-4);padding:14px 0 8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px} .cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px} .cal-dow{font-size:12px;color:var(--ink-4);text-align:center;padding:4px 0}.cal-dow.sun{color:#c2412b}.cal-dow.sat{color:#2a5bd7} .cal-d{min-height:72px;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:6px 7px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;cursor:pointer;font:inherit;color:var(--ink)} .cal-d.we{background:var(--surface)}.cal-d:hover{border-color:var(--ink-4)} .cal-d[aria-pressed="true"]{border:2px solid var(--brand);padding:5px 6px} .cal-d:disabled{cursor:default;color:var(--ink-4);background:transparent}.cal-d:disabled:hover{border-color:var(--line)} .cal-n{font-size:13px;font-weight:700}.cal-d.sun .cal-n{color:#c2412b}.cal-d.sat .cal-n{color:#2a5bd7}.cal-d:disabled .cal-n{color:var(--ink-4)} .cal-today{font-size:10px;background:var(--brand);color:#fff;border-radius:999px;padding:1px 6px;margin-left:4px;font-weight:600;vertical-align:1px} .cal-b{font-size:11px;line-height:1.35;border-radius:4px;padding:1px 5px;white-space:nowrap} .cal-b.s{background:#fdece6;color:#8a3416}.cal-b.o{background:var(--brand-w);color:var(--brand)} @media(max-width:767px){.cal-d{min-height:58px;padding:4px 3px;gap:2px}.cal-d[aria-pressed="true"]{padding:3px 2px}.cal-b{font-size:10px;padding:0 3px}.cal-seg button{padding:7px 14px}.cal-today{display:none}} /* 목 지도 — 단색, 그라데이션 없음 */ .mm::before{content:'';position:absolute;inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:48px 48px;opacity:.6} .mm .ld{position:absolute;left:24%;top:7%;width:54%;height:86%;background:var(--surface-2); border-radius:46% 54% 47% 53%/37% 33% 67% 63%} .pin{position:absolute;transform:translate(-50%,-100%);z-index:4;cursor:pointer;display:flex; flex-direction:column;align-items:center} .pin .bb{background:#fff;border-radius:var(--r-sm);padding:4px 9px;font-size:11.5px;font-weight:600; white-space:nowrap;color:var(--ink-2);box-shadow:var(--shadow-pill)} .pin .st{width:1px;height:8px;background:var(--ink-5)} .pin.hot .bb{background:var(--blue);color:#fff} .pin.hot .st{background:var(--blue)} .pin.act .bb{background:var(--ink);color:#fff} .pin.act .st{background:var(--ink)} .mr{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;background:var(--ink); color:#fff;border-radius:var(--r-full);padding:8px 16px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px; box-shadow:var(--shadow-sm)} .mt2{position:absolute;right:12px;top:12px;z-index:6;display:flex;flex-direction:column;gap:6px} .mt2 button{width:32px;height:32px;background:#fff;border-radius:var(--r-sm);display:grid; place-items:center;font-size:13px;font-weight:600;box-shadow:var(--shadow-pill)} .empty{background:var(--surface);border-radius:var(--r);padding:30px 22px;text-align:center} .empty .kicker{margin-bottom:10px} .empty h3{font-size:16px;font-weight:700;margin-bottom:7px;color:var(--ink)} .empty p{font-size:13px;color:var(--ink-3);margin-bottom:16px;max-width:34em;margin-inline:auto} .empty .al{display:flex;gap:7px;justify-content:center;flex-wrap:wrap} /* ── 상세 ───────────────────────────────────────────── */ .dh{position:relative;aspect-ratio:4/5;max-height:72vh;overflow:hidden} /* [2026-10-13] 휴대폰은 4:5로 키워 포스터 글씨가 읽히게(예전 16:10). 넓은 화면은 예전 띠 그대로. */ @media (min-width:768px){.dh{aspect-ratio:16/10;max-height:400px}} .dh .plate{position:absolute;inset:0} .dh .dots{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:4px} .dh .dots i{width:16px;height:2px;border-radius:99px;background:rgba(255,255,255,.5)} .dh .dots i.on{background:#fff} .dh .gc{position:absolute;right:12px;bottom:11px;z-index:3;color:rgba(255,255,255,.95);font-size:11px; font-weight:600;display:flex;align-items:center;gap:5px;background:rgba(16,20,24,.45);border-radius:var(--r-full);padding:4px 10px} .dw{max-width:var(--max);margin:0 auto;padding:0 18px} .dc{display:block} .dt{padding:20px 0 0} .dt .bgs{display:flex;gap:6px;align-items:center;margin-bottom:11px;flex-wrap:wrap} .dt h2,.dt h1{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.34;margin-bottom:10px;color:var(--ink)} .dt .rt{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3)} .dt .rt s{text-decoration:none;color:var(--line-2)} /* 우천 · 특보 안내 */ .alert{display:flex;gap:12px;background:var(--amber-w);border-radius:var(--r);padding:14px 15px;margin:20px 0} .alert .i{width:18px;height:18px;color:var(--amber);margin-top:1px} .alert h4{font-size:13.5px;font-weight:700;margin-bottom:4px;color:var(--ink)} .alert p{font-size:12.5px;color:var(--ink-2);line-height:1.6} .alert .src{display:block;margin-top:6px;font-size:11px;color:var(--ink-4)} .alert.warn{background:var(--red-w)} .alert.warn .i{color:var(--red)} /* 핵심 정보 표 — 서지 블록 그리드 */ .kv{margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px} .kv > div{padding:13px 14px;background:var(--surface);border-radius:var(--r)} .kv .k{font-size:11px;font-weight:600;color:var(--ink-4);margin-bottom:5px;display:flex;align-items:center;gap:5px} .kv .k .i{width:11px;height:11px} .kv .v{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .kv .v small{display:block;font-size:12px;font-weight:400;color:var(--ink-3);margin-top:2px} .kv .v a{color:var(--brand);text-decoration:underline;text-underline-offset:2px} .ds{padding:26px 0;border-top:1px solid var(--line)} /* [2026-10-28] 광고 자리(애드센스 승인 뒤, 대표님과 자리 확인 중). 광고 단위 번호(AD_SLOT)가 없으면 운영에서는 아무것도 안 그리고, 로컬·?adpreview=1 에서만 노란 '광고 자리' 상자를 그린다. */ .adbox{margin:22px 0;text-align:center} /* [2026-10-28] 검색 결과 위 '조건과 관계없이 전체에서 찾음 / 좁혀 보기' 줄 */ .sr-narrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:4px 0 18px;padding:11px 14px;border-radius:12px; background:var(--surface);color:var(--ink-2);font-size:13.5px;line-height:1.5} .sr-narrow b{color:var(--ink)} .adbox:empty{display:none} .adbox .ad-label{display:block;text-align:left;font-size:10.5px;font-weight:600;color:var(--ink-4);letter-spacing:.06em;margin:0 0 6px} .adbox ins{display:block;min-height:100px} /* 광고가 실제로 채워졌을 때(구글이 data-ad-status="filled"를 붙일 때)만 자리와 '광고' 글자를 보인다. 10/28 운영: 안 채워진 자리가 413px 빈칸으로 남았고, 심사 중에는 'unfilled' 표시조차 없이 빈칸만 잡는 자리도 있었다. display:none으로 숨기면 폭이 0이라 광고를 못 받으므로 높이만 0으로 접는다. */ .adbox:has(ins.adsbygoogle:not([data-ad-status="filled"])){height:0;margin:0;overflow:hidden} .adbox .ad-preview{display:flex;align-items:center;justify-content:center;min-height:120px;padding:12px;border:2px dashed #d39b00;border-radius:12px; background:repeating-linear-gradient(45deg,#fff8e1 0 10px,#fff1c6 10px 20px);color:#7a5600;font-weight:700;font-size:14px} @media (max-width:767px){.adbox .ad-preview{min-height:250px}} .ds h2{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;color:var(--ink); display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .ds h2 .hint{font-size:11.5px;font-weight:500;color:var(--ink-4)} .ds .lead{font-size:12.5px;color:var(--ink-3);margin-bottom:16px;max-width:44em;line-height:1.65} .ds .lead b{font-weight:600;color:var(--ink-2)} .ds .body{font-size:14px;color:var(--ink-2);line-height:1.78} .ds .body.dguide{white-space:pre-line} .ds .fold{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:5px} /* 프로그램 */ .pt{display:flex;gap:6px;margin-bottom:18px;overflow-x:auto;scrollbar-width:none} .pt::-webkit-scrollbar{display:none} .pt button{flex:1 0 auto;min-width:70px;background:var(--surface);border-radius:var(--r-sm);padding:8px 10px; font-size:12px;font-weight:600;color:var(--ink-3);text-align:center;line-height:1.35} .pt button small{display:block;font-size:10px;font-weight:500;color:var(--ink-4)} .pt button.on{background:var(--ink);color:#fff} .pt button.on small{color:rgba(255,255,255,.65)} .tl{border-left:2px solid var(--line);padding-left:18px;margin-left:3px;display:grid;gap:18px} .tli{position:relative} .tli::before{content:'';position:absolute;left:-23px;top:6px;width:7px;height:7px;background:var(--brand);border-radius:99px} .tli .tm{font-size:11px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums} .tli .nm{font-size:14.5px;font-weight:600;letter-spacing:-.01em;margin:3px 0 2px;color:var(--ink)} .tli .pl{font-size:12.5px;color:var(--ink-3)} /* 가격 */ .pb{background:var(--surface);border-radius:var(--r)} .pbh{padding:16px 16px 14px;border-bottom:1px solid var(--line-2)} .pbh .tot{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .pbh .tot b{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)} .pbh .tot span{font-size:12.5px;color:var(--ink-3);font-weight:500} .pbh .sub{font-size:11px;color:var(--ink-4);margin-top:5px} .pr{display:flex;align-items:baseline;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line)} .pr .pn{flex:1;font-size:13px;font-weight:500;color:var(--ink-2)} .pr .pn small{display:block;font-size:11.5px;color:var(--ink-4);font-weight:400;margin-top:1px} .pr .pv{font-size:13.5px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)} .pr .pv.free{color:var(--green)} .pbf{padding:13px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .pbf p{flex:1;font-size:11.5px;color:var(--ink-3);line-height:1.55;min-width:180px} .btn-d{background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:10px 15px;font-size:13px;font-weight:700; display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .btn-d:hover{background:#000} .btn-o{border:1px solid var(--border);color:var(--ink-2);border-radius:var(--r-sm);padding:10px 15px;font-size:13px;font-weight:600; display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .btn-o:hover{border-color:var(--ink);color:var(--ink)} /* 예매 채널 */ .bk{display:flex;flex-direction:column} .bki{display:flex;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap} .bki:last-of-type{border-bottom:none} .bki .bt{flex:1;min-width:170px} .bki .bt .ch{font-size:11px;font-weight:600;color:var(--ink-4);display:flex;align-items:center;gap:6px;margin-bottom:5px} .bki .bt .ch .aff{background:var(--brand-w);color:var(--brand);border-radius:var(--r-xs);padding:1px 6px;font-size:10px;font-weight:600} .bki .bt b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .bki .bt span{font-size:12px;color:var(--ink-3)} .bkn{padding:12px 14px;background:var(--surface);border-radius:var(--r);display:flex;gap:9px;margin-top:6px} .bkn .i{width:14px;height:14px;color:var(--ink-3);margin-top:2px} .bkn p{font-size:11.5px;color:var(--ink-3);line-height:1.55} .trk{margin-top:10px;border-radius:var(--r);padding:12px 14px;background:var(--surface)} .trk .kicker{margin-bottom:6px;color:var(--ink-4)} .trk code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--ink-3); display:block;line-height:1.75;word-break:break-all} .trk code b{color:var(--brand);font-weight:600} /* 주차장 */ .pk{display:grid;gap:10px} .pki{background:var(--surface);border-radius:var(--r);padding:14px 15px} .pkh{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;flex-wrap:wrap} .pkh b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .pkh .tag{font-size:10.5px;font-weight:600;border-radius:var(--r-xs);padding:2px 7px;background:var(--surface-2);color:var(--ink-3)} .pkh .tag.pub{background:var(--green-w);color:var(--green)} .pkh .tag.full{background:var(--red-w);color:var(--red)} .pkh .dist{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-4);font-variant-numeric:tabular-nums} .pki .meta{font-size:12px;color:var(--ink-3);margin-bottom:11px} .pki .meta span{white-space:nowrap} .pkb{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .pkb .nav{background:#fff;border-radius:var(--r-xs);padding:6px 10px;font-size:11.5px;font-weight:600; display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)} .pkb .nav:hover{color:var(--ink);box-shadow:var(--shadow-pill)} .pkb .nav .i{width:12px;height:12px} .pkb .rep{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink-3);display:inline-flex;align-items:center;gap:5px} .pkb .rep:hover{color:var(--brand)} /* 후기 */ .rvs{display:flex;align-items:center;gap:20px;padding:16px 0;margin-bottom:18px;flex-wrap:wrap;border-bottom:1px solid var(--line)} .rvs .bigg{text-align:center;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px} .rvs .bigg b{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink)} .rvs .bigg .i{width:16px;height:16px} .rvb{flex:1;display:grid;gap:5px;min-width:180px} .rbr{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-4);font-weight:600;font-variant-numeric:tabular-nums} .rbr .br{flex:1;height:4px;background:var(--surface);border-radius:99px;overflow:hidden} .rbr .br i{display:block;height:100%;background:var(--star);border-radius:99px} .rv{border-bottom:1px solid var(--line);padding:16px 0} .rvh{display:flex;align-items:center;gap:10px;margin-bottom:9px} .rvh .av{width:28px;height:28px;background:var(--surface-2);display:grid;place-items:center;font-size:11px; font-weight:700;color:var(--ink-3);border-radius:99px} .rvh .nn{flex:1;min-width:0} .rvh .nn b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)} .rvh .nn span{font-size:11px;color:var(--ink-4)} .rvh .sc2{font-size:12px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:3px} .rvh .sc2 .i{width:12px;height:12px} .rv p{font-size:13.5px;color:var(--ink-2);line-height:1.72} .rv .tgs{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap} .tgs span{font-size:10.5px;font-weight:600;color:var(--ink-3);background:var(--surface);border-radius:var(--r-xs);padding:3px 8px} /* 근처 동선 */ .nb{display:grid;gap:8px} .nbi{background:var(--surface);border-radius:var(--r);padding:13px 15px;display:flex;align-items:center;gap:13px;cursor:pointer} .nbi:hover{background:var(--surface-2)} .nbi .i{width:17px;height:17px;color:var(--ink-3);flex-shrink:0} .nbi .nt{flex:1;min-width:0} .nbi .nt .kd{font-size:10.5px;font-weight:600;color:var(--ink-4);margin-bottom:3px} .nbi .nt b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .nbi .nt span{font-size:12px;color:var(--ink-3)} .nbi .nd{font-size:12px;font-weight:600;color:var(--ink-4);flex-shrink:0;font-variant-numeric:tabular-nums} /* 데이터 출처 */ .prov{display:flex;flex-direction:column;margin-top:6px} .prov .pi{display:flex;align-items:baseline;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:12px} .prov .pi:last-child{border-bottom:none} .prov .pi .pf{flex:0 0 76px;font-weight:600;color:var(--ink)} .prov .pi .ps{flex:1;color:var(--ink-3)} .prov .pi .pd{color:var(--ink-5);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11.5px} .prov .pi.fresh .pd{color:var(--green);font-weight:600} .prov .pi.stale .pd{color:var(--amber);font-weight:600} /* 사이드 (데스크톱) */ .side{display:none} /* 하단 고정 CTA (모바일 상세) */ .cta{position:fixed;bottom:var(--tab);left:0;right:0;z-index:65;background:rgba(255,255,255,.97); backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:9px 14px;display:none;gap:8px} /* [2026-11-03] 공유가 아이콘만 있는 46px 네모라 무슨 단추인지 몰랐다(대표님). 글자를 붙이고 옆 단추와 같은 굵기로 */ .cta .cs{flex:0 0 auto;padding:0 14px;border-radius:var(--r-sm);background:var(--surface);display:flex;align-items:center;justify-content:center;gap:5px; font-size:14px;font-weight:700;color:var(--ink-2)} .cta .cs .i{width:17px;height:17px} .cta .cs.on{color:var(--red);background:var(--red-w)} .cta .cg{flex:1;background:var(--ink);color:#fff;border-radius:var(--r-sm);font-size:14px;font-weight:700;display:flex; align-items:center;justify-content:center;gap:7px;padding:12px 0} .cta .cb{flex:1;border:1px solid var(--border);border-radius:var(--r-sm);font-size:14px;font-weight:700;display:flex;align-items:center; justify-content:center;gap:6px;color:var(--ink-2)} /* ── 저장 ───────────────────────────────────────────── */ .pgt{padding:24px 0 4px;margin-bottom:20px} .pgt h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;color:var(--ink)} .pgt p{font-size:13px;color:var(--ink-3);padding-bottom:14px} .se{padding:56px 20px;text-align:center} .se .i{width:30px;height:30px;color:var(--ink-5);margin-bottom:14px} .se h3{font-size:17px;font-weight:700;margin-bottom:8px;color:var(--ink)} .se p{font-size:13px;color:var(--ink-3);margin-bottom:20px;line-height:1.65} /* ── 바텀시트 ───────────────────────────────────────── */ /* [2026-09-14] 선택창이 안 닫힌다는 제보, 특히 휴대폰에서. 아이폰 사파리는 버튼도 링크도 아닌 요소에 cursor:pointer가 없으면 탭을 click으로 안 바꾼다. 이 배경은 그냥
라서, 데스크톱에서는 닫히는데 아이폰에서는 아무 반응이 없었다. 한 줄 차이로 '닫히는 화면'과 '갇히는 화면'이 갈린다. */ .sbg{position:fixed;inset:0;background:rgba(16,20,24,.4);z-index:90;display:none;cursor:pointer} .sbg.on{display:block} .sheet{position:fixed;left:50%;transform:translateX(-50%) translateY(100%);width:min(100%,860px);bottom:0;z-index:91;background:#fff;max-height:84vh; /* [2026-09-07] 좌우 여백이 없어 안내문이 화면 밖으로 잘렸다. 넓은 화면에선 가운데로 모은다. */ padding-left:20px;padding-right:20px;box-sizing:border-box; border-radius:var(--r-lg) var(--r-lg) 0 0; overflow-y:auto;transition:transform .28s cubic-bezier(.32,.72,0,1); padding-bottom:calc(14px + env(safe-area-inset-bottom))} .sheet.on{transform:translateX(-50%) translateY(0)} /* [2026-09-14] 작대기는 '여기를 내리면 닫힌다'는 신호인데 아무 동작이 없었다. 생긴 대로 동작해야 한다 — 눌러도 닫히고, 아래로 끌어도 닫힌다. 손가락으로 잡기 좋게 위아래 여백을 넉넉히 둔다(선 자체는 그대로 가늘게). */ .sheet .hdlwrap{display:block;width:100%;padding:12px 0 14px;background:none;border:0;cursor:grab;touch-action:none} .sheet .hdlwrap:active{cursor:grabbing} .sheet .hdl{width:34px;height:4px;background:var(--line-2);border-radius:99px;margin:0 auto;pointer-events:none} /* 닫기 ✕ — 작대기와 같은 높이, 오른쪽 끝. 손가락이 닿을 만큼(40px) 크게 잡는다. */ .sheet .shx{position:absolute;top:6px;right:14px;width:40px;height:40px;display:grid;place-items:center; border:0;background:none;color:var(--ink-3);border-radius:var(--r-full);z-index:2} .sheet .shx:hover{background:var(--surface);color:var(--ink)} .sheet .shx .i{width:19px;height:19px;stroke-width:2} .sheet.dragging{transition:none} /* [2026-09-15] 제목만 혼자 40px 들어가 있었다(margin 20 + padding 20). 본문·칩·아래 버튼은 전부 20px이라, 제목은 오른쪽으로 안내문은 왼쪽으로 어긋나 보였다 (사용자 지적: "텍스트 좌측 쏠림"). 한 줄로 맞춘다 — 창 안의 모든 것이 같은 선에서 시작한다. */ .sheet h3{font-size:17px;font-weight:700;padding:0 20px 14px;margin:0 0 18px;border-bottom:1px solid var(--line); letter-spacing:-.01em;color:var(--ink)} /* 창 안의 설명 문단도 같은 선. 인라인 style로 하나씩 붙이면 새 창을 만들 때마다 빠진다. */ .sheet>#shb>p{padding-left:20px;padding-right:20px} /* 날씨 한 줄. 카드의 다른 글보다 조금 작고 옅게 — 곁들이는 정보라 제목을 가리면 안 된다. 비·눈이 예보된 날만 색으로 드러낸다. 맑은 날까지 색을 주면 카드가 알록달록해지고, 정작 봐야 할 '비 오는 날'이 묻힌다. */ /* 날씨는 한 줄로 고정한다. 길이에 따라 한 줄이 됐다 두 줄이 됐다 하면 그 아래 내용이 카드마다 다른 높이에서 시작해 목록이 어긋나 보인다. */ .wx{font-size:12.5px;line-height:19px;min-height:19px;color:var(--ink-3);margin-top:3px; letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* [2026-09-16] 비 오는 날을 파란색으로 칠했더니 '파란색은 뭐냐'는 물음을 받았다. 색만으로는 뜻이 안 전해진다. 게다가 이 파랑은 '진행 중' 배지(.bg.live)에 이미 쓰는 색이라 뜻이 겹치고, 파란 글씨는 누를 수 있는 것처럼 읽힌다. 비는 '챙길 것이 있다'는 신호다. 그 뜻에 맞는 호박색을 쓴다. */ .wx.rain{color:var(--amber);font-weight:600} .fg{padding:0 20px 20px} .fg h4{font-size:12px;font-weight:600;color:var(--ink-3);margin-bottom:10px} /* [2026-09-28] '출발지'와 '행사 지역'이 이름만으로는 같은 말로 읽혔다(대표님 지적). 무엇을 하는 칸인지 제목 옆에 한마디 붙인다 — 고르는 자리에서 알려주는 게 제일 낫다. */ .fg h4 small{font-weight:500;color:var(--ink-4);margin-left:6px;font-size:11px;letter-spacing:0} .fg .op{display:flex;gap:6px;flex-wrap:wrap} .sfoot{padding:14px 20px 0;border-top:1px solid var(--line);display:flex;gap:8px;margin-top:4px} .sfoot button:first-child{flex:0 0 84px;background:var(--surface);border-radius:var(--r-sm);padding:12px 0;font-size:13px;font-weight:600} .sfoot button:last-child{flex:1;background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:12px 0;font-size:13.5px;font-weight:700} /* 복사가 막힌 브라우저에서 띄우는 주소 칸 */ #share-url{position:fixed;left:50%;bottom:calc(var(--tab) + 74px);transform:translateX(-50%);z-index:130;width:min(92vw,440px); background:var(--bg);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-sm);padding:14px;display:grid;gap:8px} #share-url p{font-size:13px;font-weight:600;color:var(--ink)} #share-url input{width:100%;font-size:14px;padding:10px;border:1px solid var(--line-2);border-radius:8px;color:var(--ink);background:var(--surface)} #share-url button{justify-self:end;font-size:13px;font-weight:600;padding:6px 12px;border-radius:8px;background:var(--surface)} /* 토스트 */ .tst{position:fixed;left:50%;bottom:calc(var(--tab) + 74px);transform:translate(-50%,12px);z-index:120; background:var(--ink);color:#F2F4F6;border-radius:var(--r-sm);padding:11px 16px;font-size:12.5px;font-weight:500;opacity:0; pointer-events:none;transition:all .22s;max-width:min(92vw,440px);line-height:1.5;box-shadow:var(--shadow-sm)} .tst.on{opacity:1;transform:translate(-50%,0)} /* 푸터 */ .ft{border-top:1px solid var(--line);margin-top:44px;padding:34px 18px 46px;background:var(--surface)} .fti{max-width:var(--max);margin:0 auto} .fbrand{display:flex;align-items:baseline;gap:7px;margin-bottom:16px} .fbrand .bm{font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--ink)} .fbrand .bs{font-size:10.5px;font-weight:600;color:var(--ink-4);letter-spacing:.02em} /* 데이터 출처는 가로로 늘어놓는다. 좁아지면 줄만 바뀌고 순서는 그대로다. */ .fsrc{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 20px; padding-bottom:18px;border-bottom:1px solid var(--line)} .fsrc h4{font-size:12px;font-weight:700;color:var(--ink);margin:0;white-space:nowrap} .fsrc-list{display:flex;flex-wrap:wrap;gap:4px 14px} .fsrc-list a{font-size:12px;color:var(--ink-4);line-height:1.9;white-space:nowrap;cursor:pointer} .fsrc-list a:hover{color:var(--brand)} .fnote{font-size:11.5px;color:var(--ink-4);line-height:1.9;margin:0 0 6px;max-width:70em} .fnote:last-of-type{margin-bottom:0} .fnote b{color:var(--ink-3);font-weight:600} /* 사업자 정보 앞의 줄 — 여기서부터는 서비스 설명이 아니라 사업자 표시다 */ .fbiz{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline; margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line); font-size:11.5px;color:var(--ink-4);line-height:1.8} .fbiz b{color:var(--ink-3);font-weight:700;font-size:12px} .fbiz span{font-variant-numeric:tabular-nums} .fbiz span + span::before{content:'· ';color:var(--line-2)} .fbiz a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px} .fbiz a:hover{color:var(--brand)} /* 모바일: 검색 필드 2행 + 버튼 */ @media (max-width:767px){ .sf{flex-wrap:wrap} .sf .fd{padding:11px 13px;border-bottom:1px solid var(--line)} .sf .fd + .fd::before{display:none} .sf .fd:nth-child(1),.sf .fd:nth-child(2){flex:1 1 44%} .sf .fd:nth-child(2){border-left:1px solid var(--line)} .sf .fd:nth-child(3){flex:1 1 100%} .sf .go{flex:1 1 auto;margin:8px;padding:13px 0;justify-content:center} .sf .fd .v{font-size:13.5px} } /* ══════════ 태블릿 ≥768 ══════════ */ @media (min-width:768px){ .wrap,.ehi,.eb,.dw,.ft{padding-left:26px;padding-right:26px} .hero{padding-top:48px} .hero h1{font-size:38px} .hero .lead{font-size:15px;margin-bottom:28px} .grid{grid-template-columns:repeat(2,1fr);gap:24px} .hsc > *{width:176px} .colls{grid-template-columns:repeat(2,1fr)} .kv{grid-template-columns:repeat(4,1fr)} .sh h2{font-size:21px} .dt h2,.dt h1{font-size:29px} /* h1 — 행사 쪽(/f/…)에 미리 채운 제목(lib/app-page.js) */ .nb{grid-template-columns:repeat(2,1fr)} .pk{grid-template-columns:repeat(2,1fr)} .card.row .ph{width:150px} .qrow .qk{flex-basis:66px} } /* ══════════ 데스크톱 ≥1024 ══════════ */ @media (min-width:1024px){ :root{--nav:64px} body{font-size:15.5px} main{padding-bottom:0} .tabs{display:none} .cta{display:none !important} nav.gnb{display:block} .hero{padding-top:60px} .hero h1{font-size:46px;letter-spacing:-.03em} .qrow .qv{flex-wrap:wrap;overflow:visible} .grid{grid-template-columns:repeat(3,1fr);gap:28px} .hsc{overflow:visible;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:0;padding:0} .cnav{display:grid} /* 포스터는 세로가 길다. 칸이 좁아진 만큼 사진 자리도 세로형으로 맞춘다. */ .hsc .card .ph{aspect-ratio:3/4} .hsc > *{width:auto} .colls{grid-template-columns:repeat(4,1fr)} section.sc{padding-top:48px} .qrow{padding:8px 0} /* 탐색: 필터 + 리스트 + 지도 */ .eb{display:grid;grid-template-columns:196px 1fr;gap:34px;align-items:start} /* [2026-09-07] position:sticky를 뺐다. 화면에 붙박여 따라다니니 목록만 흐르고 필터는 멈춰 있어 어색하다는 지적. 이제 본문과 같이 스크롤되다 끝난다. */ .fs{display:block;padding-top:18px} .fsb{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)} .fsb:last-child{border-bottom:none} /* [2026-09-10] '출발지'와 '거리 계산 기준'을 한 줄에 나란히 두니 196px 폭에서 겹쳐 보였다. 제목은 제목대로, 보조 설명은 아랫줄로 내린다. */ .fsb h4{font-size:11.5px;font-weight:600;color:var(--ink-3);margin-bottom:11px; display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;line-height:1.5} .fsb h4 .sub{flex-basis:100%;font-weight:500;color:var(--ink-4);font-size:10.5px} .fsb h4 .rs{margin-left:auto;font-size:11px;font-weight:500;color:var(--ink-4)} .fo{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px;color:var(--ink-3);cursor:pointer;border-radius:var(--r-xs)} .fo:hover{color:var(--ink)} .fo .cb{width:15px;height:15px;border:1.5px solid var(--border);border-radius:4px;display:grid;place-items:center;flex-shrink:0} .fo .cb .i{width:9px;height:9px;color:transparent;stroke-width:2.8} .fo.on .cb{background:var(--ink);border-color:var(--ink)} .fo.on .cb .i{color:#fff} .fo.on{color:var(--ink);font-weight:600} .fo .n{margin-left:auto;font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums} /* 조건칸 안의 짧은 설명. 이 조건이 왜 전부를 못 거르는지 같은 것을 적는다. */ .fnote{font-size:11px;line-height:1.55;color:var(--ink-4);margin:-4px 0 9px;word-break:keep-all} .fch,.tg{display:none} /* [2026-09-10] 축제 보기·전통시장도 홈처럼 5개씩. 칸이 좁아지면 세로형 포스터가 제 비율로 들어간다(가로로 넓으면 위아래가 남거나 잘린다). */ /* [2026-09-10] 1fr이 아니라 minmax(0,1fr)를 쓴다. 1fr은 '남는 공간을 똑같이 나눠 갖되, 내용이 요구하는 최소 폭보다는 작아지지 않는다'는 뜻이다. 그래서 긴 제목이 든 카드가 자기 열을 밀어 넓히고 나머지가 쪼그라들었다 (194 / 147 / 205 / 206 / 157px). 열 폭이 다르니 3:4로 잡은 사진 높이도 따라 달라졌다. minmax(0,…)로 최소 폭을 0으로 풀면 다섯 열이 정확히 같아진다. */ .lc{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px} .card.row{flex-direction:column;gap:0} /* [2026-09-10] flex-shrink:0이 없으면 사진칸이 줄어든다. 카드가 세로 플렉스라, 제목이 두 줄인 카드는 글자가 자리를 더 먹고 그만큼 사진칸이 찌그러졌다(259px → 196px). 그래서 한 줄에 놓인 포스터 높이가 제각각이었다. 사진칸은 비율대로 고정하고, 늘어나는 건 글자 쪽이 맡는다. */ .card.row .ph{width:100%;aspect-ratio:3/4;border-radius:var(--r);flex-shrink:0} .card.row .tx{padding-top:10px} /* 사진칸이 커졌으니 이름을 다시 얹는다(좁은 화면 설명은 .phx-cap 쪽 참고). */ .card.row .plate.phx .phx-cap{display:block} /* 상세: 본문 + sticky 사이드 */ .dh{aspect-ratio:auto;height:400px;max-height:none;width:100%} .dc{display:grid;grid-template-columns:1fr 320px;gap:46px;align-items:start;padding-bottom:56px} .side{display:block;position:sticky;top:calc(var(--hdr) + 22px);padding-top:22px} .sd{background:var(--surface);border-radius:var(--r-lg)} .sdh{padding:16px 16px 13px} .sdh h3{font-size:16px;font-weight:700;letter-spacing:-.02em;margin-top:9px;color:var(--ink)} .sr{display:flex;gap:10px;padding:9px 16px;font-size:13px} .sr .i{width:14px;height:14px;color:var(--ink-4);margin-top:3px} .sr .sv2{font-weight:600;letter-spacing:-.01em;color:var(--ink)} .sr .sv2 small{display:block;font-weight:400;color:var(--ink-3);font-size:11.5px;margin-top:1px} .sb{padding:6px 16px 16px;display:grid;gap:7px} .sb .b1{background:#fff;color:var(--ink);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 0;font-size:14px;font-weight:700; display:flex;align-items:center;justify-content:center;gap:7px} .sb .b1:hover{border-color:var(--ink)} .sb .b0{background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:12px 0;font-size:14px;font-weight:700; display:flex;align-items:center;justify-content:center;gap:7px} .sb .b0:hover{background:#000} /* [2026-11-03] 저장(하트)이 빠진 뒤 이 줄에 공유 하나만 남아 반쪽 폭·작은 글자였다(대표님). 위 두 단추와 같은 폭·높이·글자로 */ .sb .brw{display:grid;gap:7px} .sb .b2{background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 0;font-size:14px;font-weight:700;display:flex; align-items:center;justify-content:center;gap:7px;color:var(--ink-2)} .sb .b2:hover{border-color:var(--ink);color:var(--ink)} .sb .b2.on{border-color:var(--red);color:var(--red);background:var(--red-w)} .snote{margin:0 16px 14px;background:var(--surface-2);border-radius:var(--r);padding:12px 14px} .snote h5{font-size:12px;font-weight:700;margin-bottom:4px;color:var(--ink)} .snote p{font-size:11.5px;color:var(--ink-3);line-height:1.6} .nb,.pk{grid-template-columns:1fr} } @media (min-width:1440px){ .grid{grid-template-columns:repeat(4,1fr)} .lc{grid-template-columns:repeat(5,minmax(0,1fr))} } @media (max-width:1023px){ /* [2026-09-10] 상세로 들어가면 검색창·카테고리·로고를 감추고 있었다. 축제 하나를 보다가 바로 다른 걸 찾고 싶은 게 자연스러운데 검색할 데가 사라졌다(사용자 지적). 헤더는 어느 화면에서든 그대로 둔다 — 어디에 있든 같은 자리에서 찾고 이동할 수 있어야 한다. */ body.dmode .back{display:grid} body.dmode .cta{display:flex} } /* [2026-09-14] 보라색 테두리를 전부 걷어냈다. 키보드로 쓰는 분을 위해 넣은 표시인데, 마우스로 눌러도 화면 곳곳에 네모가 쳐져 "영역별·탭별·글자별로 박스가 뜬다"는 제보를 여러 번 받았다. 고장으로 읽힌다. 표시를 없애지는 않는다 — 선을 긋는 대신 바탕색을 살짝 바꿔 알린다. 눈에 거슬리지 않으면서, 지금 어디에 있는지는 알 수 있다. */ :focus-visible{outline:none!important;background-color:rgba(84,38,184,.10);border-radius:6px} input:focus-visible,textarea:focus-visible,select:focus-visible{background-color:transparent} /* [2026-09-14] 메인 화면 제목에 보라색 네모가 쳐져 보인다는 제보. 화면을 옮길 때 제목으로 초점을 보내는데(화면 읽기 프로그램이 "여기부터 새 화면"이라고 알리게 하려는 것), 마우스로 눌러도 브라우저가 이걸 '키보드 초점'으로 보고 테두리를 그렸다. 초점은 그대로 보내되 테두리만 지운다 — 키보드로 직접 옮겨 간 곳에는 그대로 나온다. */ /* 화면을 옮길 때 제목으로 초점을 보내는 자리는 아무 표시도 남기지 않는다. [2026-09-14] 테두리만 껐더니 이번엔 바탕색이 깔려 제목에 연보라 덩어리가 생겼다(제보). 사람이 직접 간 곳이 아니라 화면이 옮겨 주는 자리라, 표시할 이유가 없다. */ [data-quiet-focus]:focus-visible{outline:none!important;background-color:transparent!important} /* 선택창 안에 누를 것이 없어 창 자체로 초점이 갈 때가 있다. 그때 창 전체에 3px 테두리가 둘러지면 고장처럼 보인다. 창은 이미 화면을 덮어 눈에 띈다. */ #sht:focus-visible{outline:none!important;background-color:#fff!important} /* [2026-09-14] 상단 검색창에도 보라 네모가 쳐진다는 제보. 위 규칙은 '초점 표시가 아예 없는 곳'을 구하려고 넣은 것인데, 글상자는 원래 자기 표시를 갖고 있다(테두리 색·배경·그림자). 거기에 3px 보라 선을 덧그리니 디자인과 따로 놀고, 누를 때마다 눈에 거슬린다. 자기 표시가 있는 입력칸은 그쪽에 맡기고 덧그리지 않는다. ※ 초점 표시를 '없애는' 게 아니다 — 키보드로 쓰는 사람이 지금 어디에 있는지 알 수 있어야 하므로, 아래에서 각 입력칸에 확실한 표시를 준다. */ .hsrch input:focus-visible, .memo-new textarea:focus-visible, #sq:focus-visible{outline:none!important;background-color:transparent!important} /* 시트 검색창은 자기 표시가 없었다. 여기서 만들어 준다(선 색 + 옅은 테). */ #sq:focus{border-color:var(--border)!important} /* [2026-09-14] 카드 글자가 밑으로 쳐지고 줄이 안 맞는다는 제보. 원인은 키보드 조작을 붙이면서 제목을