import html import json import re import shutil from pathlib import Path from urllib.parse import quote HERE = Path(__file__).parent TPL = HERE / "tpl-story" OUT = HERE / "build4" PAYLOAD = json.loads((HERE / "stay4-payload.json").read_text()) ORIGIN = "https://web4ai.o2osolution.ai" BASE = "/s/stay4" place = PAYLOAD["place"] narrative = PAYLOAD["narrative"] units = PAYLOAD["units"] media = PAYLOAD["media"] facts = {f["key"]: f for f in PAYLOAD["facts"]} faqs = PAYLOAD["faqs"] links = PAYLOAD["links"] local = PAYLOAD["local"] sections = {s["id"]: (json.loads(s["data"]) if isinstance(s.get("data"), str) else None) for s in PAYLOAD["theme"]["sections"]} NAME = place["name"] PHONE = place["phone"] PLACE_ID = PAYLOAD["site"]["placeId"] BOOK_URL = next((l["url"] for l in links if l.get("channel") == 7), "#") INSTA_URL = next((l["url"] for l in links if l.get("channel") == 4), None) ABOUT = narrative["about"] SEASON_ORDER = ["봄", "여름", "가을", "겨울"] def e(text): return html.escape(str(text or ""), quote=True) def uf(unit, key, default=""): for f in unit["facts"]: if f["key"] == key: value, unit_text = f["value"], (f.get("unit") or "") joiner = "" if unit_text in ("명", "원") else " " return value + (joiner + unit_text if unit_text else "") return default def won(raw): digits = re.sub(r"[^0-9]", "", raw or "") return f"{int(digits):,}원" if digits else "" def unit_title(unit): return unit["name"].split("(")[0].strip() def unit_sub(unit): raw = unit["name"] return raw[raw.find("(") + 1:raw.rfind(")")].strip() if "(" in raw else "" def pics(category=None, skip=0, limit=None): rows = [m for m in media if category is None or m.get("category") == category][skip:] return rows[:limit] if limit else rows def pick(category, fallback_index): rows = pics(category) return rows[0] if rows else media[fallback_index] def meters(text): import re as _re m = _re.match(r"^([\d.]+)\s*(km|m)$", (text or "").strip(), _re.I) return float(m[1]) * (1000 if m[2].lower() == "km" else 1) if m else float("inf") def naver(query): return f"https://search.naver.com/search.naver?query={quote(query)}" def yt_id(url): return url.rstrip("/").split("/")[-1].split("?")[0] PRICE_FROM = won(uf(units[0], "weekday_price")) NAV = [("", "소개"), ("gunsan", "군산"), ("booking", "예약·후기")] HEAD = """ {title}

""" FOOT = """

{price_from}주중 1박 기준 · 2인 예약하기

{extra} """ def nav_html(current): out = "" for slug, label in NAV: href = f"{BASE}/{slug}" if slug else BASE klass = ' class="on"' if slug == current else "" out += f'{label}' return out def next_cards(cards): items = "".join( f'' f'

' f'{kicker}{label}' for kicker, label, href, img in cards) return f'

{items}

' def footer_html(): insta = (f'

인스타그램

') if INSTA_URL else "" return f""" """ def page(slug, title, desc, og, body, extra=""): canonical = f"{ORIGIN}{BASE}/{slug}" if slug else f"{ORIGIN}{BASE}" head = HEAD.format(title=e(title), desc=e(desc), canonical=canonical, origin=ORIGIN, og=og, base=BASE, name=e(NAME), nav=nav_html(slug)) foot = FOOT.format(base=BASE, book=e(BOOK_URL), price_from=PRICE_FROM, extra=extra) target = (OUT / slug / "index.html") if slug else (OUT / "index.html") target.parent.mkdir(parents=True, exist_ok=True) target.write_text(head + body + footer_html() + foot) return target def cover(image, kicker, heading, lead, actions="", height="tall", invert_nav=True): action_html = f'

{actions}' if actions else "" scroll = '' if height == "tall" else "" return f"""

{kicker}

{heading}

{lead}

{action_html}

{scroll}

""" def chapter_cover(image, heading, paragraphs): body = "".join(f"

{p}

" for p in paragraphs) return f"""

{heading}

{body}

""" def block(heading, kicker="", lead="", inner="", tone="", anchor="", actions=""): klass = "wrapper style1 align-center" if tone: klass += f" {tone}" head = "" if kicker: head += f'

{kicker}

' if heading: head += f'

{heading}

' if lead: head += f'

{lead}

' act = f'

{actions}' if actions else "" return f"""

{head}{inner}{act}

""" def tiles(rows, meta_key, badge_key=None, href_fn=None, columns="two"): cells = "" for row in rows: href = href_fn(row) if href_fn else naver(row["searchQuery"]) badge = f'{e(row.get(badge_key))}' if badge_key and row.get(badge_key) else "" meta = e(row.get(meta_key) or "") desc = e((row.get("description") or "").strip()) shot = (f' {e(row[

' if row.get("imageUrl") else f'{e(row["name"])}') cells += ( f'' f'{shot}' f'{badge}{e(row["name"])}' f'{meta}' f'{desc}') return f'

{cells}

' def spec_grid(pairs): rows = "".join(f"

{k}

{v}

" for k, v in pairs if str(v).strip()) return f'

{rows}' def faq_list(rows): return '

' + "".join( f"

{e(f['question'])}

{e(f['answer'])}

" for f in rows) + "

" def gallery_grid(rows): cells = "".join( f'

' f'

{e(m.get("category") or "")}

' for m in rows) return f'' def foot_note(text): return f'

{text}

' POSTCARD_JS = """ """ def postcard_block(): picks = "".join( f'' for m in media[:10]) return f"""

엽서 쓰기

스테이,머뭄에서 보내는 한 장을 직접 써 봅니다. 사진을 고르고 한 마디를 적으면 그 자리에서 엽서가 되고, 그대로 공유하거나 저장할 수 있습니다.

{picks}

네 줄까지 · 0/60

""" def build_home(): hero = media[0] body = cover(hero, e(place["addressLocality"]), e(NAME), e(narrative["tagline"]), '

스테이,머뭄 소개

') body += chapter_cover(pick("외관", 3), "스테이,머뭄 소개", [e(ABOUT[0])]) body += block("", inner=(f'

{e(ABOUT[1])}

' f'

{e(ABOUT[2])}

'), tone="ivory", anchor="about") shots = [pics("거실", skip=1)[0] if len(pics("거실")) > 1 else media[1], pics("침실")[0] if pics("침실") else media[4]] cards = "" for i, u in enumerate(units): anchor = "a" if i == 0 else "b" chips = [f"기준 {uf(u, 'standard_capacity')}", f"최대 {uf(u, 'max_capacity')}", uf(u, "bed_type"), uf(u, "room_size")] chip_html = "".join(f"

{e(c)}

" for c in chips if c.strip()) cards += f"""

{e(unit_title(u))}

{e(unit_sub(u))}

{chip_html}

주중 1박 {e(won(uf(u, 'weekday_price')))}

{e(unit_title(u))} 보기

""" body += block("객실 안내", inner=f'

{cards}

', anchor="units", actions=f'

이용안내 및 예약

') head_shots, rest_shots = media[:12], media[12:] gal = gallery_grid(head_shots) if rest_shots: gal += (f'

나머지 {len(rest_shots)}장 보기

' f'{gallery_grid(rest_shots)}

') body += block("사진 갤러리", inner=gal, tone="ivory", anchor="gallery") vids = "".join( f'' f' {e(v[

' f'{e(v["caption"])}' for v in sections["video"]["items"]) body += block("ADO2 영상 보기", lead=e(sections["video"]["subtitle"]), inner=f'

{vids}

', anchor="video") weather = local["weather"] note_sets = weather.get("noteSets") or {} cond = weather.get("condition") note = (note_sets.get(cond) or [weather["notes"].get(cond, "")])[0] if note_sets \ else weather["notes"].get(cond, "") body += block("오늘의 날씨", inner=f'

{e(cond)} ' f'{weather["temperature"]}°{e(note)}

', tone="ivory", anchor="weather") lat, lng = place["latitude"], place["longitude"] body += block("오시는 길", lead="주소와 주요 거점까지의 이동 시간을 안내합니다.", inner=f"""

{e(place['roadAddress'])}

""", anchor="location", actions=f'

길찾기

') body += postcard_block() body += next_cards([ ("군산", "군산 이야기", f"{BASE}/gunsan", local["attractions"][0]["imageUrl"]), ("예약", "이용안내 및 예약", f"{BASE}/booking", media[2]["url"]), ]) return page("", f"{NAME} · 전북 군산시 독채 펜션", narrative["summary"], media[0]["url"], body, extra=POSTCARD_JS) def build_gunsan(): spots = sorted(local["attractions"], key=lambda r: meters(r.get("distanceText"))) rest = sorted(local["restaurants"], key=lambda r: meters(r.get("distanceText"))) fests = sorted(local["festivals"], key=lambda f: SEASON_ORDER.index(f["season"]) if f.get("season") in SEASON_ORDER else 9) itin = sections["itinerary"]["items"] reading = sections["reading"]["items"] songs = sections["songs"]["items"] people = sections["people"]["items"] chron = sections["chronicle"]["items"] body = cover({"url": spots[0]["imageUrl"], "alt": spots[0]["name"]}, e(place["addressLocality"]), "군산 이야기", "이 도시를 네 갈래로 봅니다. 하나씩 골라 보세요.", height="mid") body += block("주변 안내", lead="군산시 지역의 맛집 · 명소 안내입니다.", inner=tiles(spots[:8], "distanceText") + f'

명소 {len(spots) - 8}곳 · 맛집 {len(rest)}곳 더 보기

' f'{tiles(spots[8:], "distanceText")}{tiles(rest, "distanceText")}

' + foot_note("도보 시간은 숙소에서 잰 직선거리를 분속 80m 로 환산한 값입니다. " "실제로 걷는 길은 이보다 깁니다."), anchor="guide") body += block("계절별 축제", lead="군산시의 축제와 행사를 계절로 묶었습니다.", inner=tiles(fests[:8], "period", badge_key="season") + f'

나머지 {len(fests) - 8}개 보기

' f'{tiles(fests[8:], "period", badge_key="season")}

', tone="ivory", anchor="festival") plans = "" for i in itin: days = "".join( f'

{e(d["label"])}{e(d["startTime"])} 출발

{e(s["name"])}' + (f'{e(s["note"])}' if s.get("note") else "") + "

" for d in i["days"]) plans += (f'

{e(i["name"])}' f'{e(i["duration"])} · {e(i["audience"])}

' f'

{e(i["why"])}

{days}

') plan_rows = plans.split("") head_plans = "".join(plan_rows[:8]) + "" tail_plans = "".join(plan_rows[8:]) body += block("추천 일정", lead=e(sections["itinerary"]["subtitle"]), inner=f'

{head_plans}

' f'

나머지 {len(itin) - 8}가지 보기

' f'

{tail_plans}

', anchor="itinerary") def lp(index, song): side = "A면" if index < len(songs) / 2 else "B면" return (f'' f'' f'{side} · {index + 1} / {len(songs)}' f'{e(song["title"])}{e(song["artist"])}' f'{e(song["story"])}') body += block("가요 다방", lead=e(sections["songs"]["subtitle"]), inner=f'

{"".join(lp(n, s) for n, s in enumerate(songs[:6]))}

' f'

나머지 {len(songs) - 6}곡 보기

' f'

{"".join(lp(n + 6, s) for n, s in enumerate(songs[6:]))}

', tone="invert", anchor="songs") def person(row): shot = (f' {e(row[

' if row.get("imageUrl") else '') src = (f'' f'{e(row["source"]["name"])}') if row.get("source") else "" return (f'

{shot}' f'

{e(row["name"])}

' f'

{e(row.get("role"))}{" · " + e(row["years"]) if row.get("years") else ""}

' f'

{e(row.get("oneLine"))}

{src}

') body += block("인물 열전", lead=e(sections["people"]["subtitle"]), inner=f'

{"".join(person(r) for r in people[:6])}

' f'

나머지 {len(people) - 6}명 보기

' f'

{"".join(person(r) for r in people[6:])}

', tone="ivory", anchor="people") def year_row(row): shot = (f' {e(row[

' if row.get("imageUrl") else "") where = f'{e(row["place"])}' if row.get("place") else "" return (f'

' f'{row["year"]}' f'

{e(row["title"])}

' f'

{e(row["summary"])}

{where}

' f'{shot}

') body += block("시간의 골목", lead=e(sections["chronicle"]["subtitle"]), inner=f'

{"".join(year_row(r) for r in chron)}', anchor="chronicle") def read_row(n, r): return ( f'

{n + 1:02d}' f'

{e(r["title"])}

' f'{f"

{r['year']}

" if r.get("year") else ""}' f'

{e(r["body"])}

' f'' f'{e(r["source"]["name"])}

') head_reads = "".join(read_row(n, r) for n, r in enumerate(reading[:4])) tail_reads = "".join(read_row(n + 4, r) for n, r in enumerate(reading[4:])) body += block("군산 읽기", lead=e(sections["reading"]["subtitle"]), inner=f'

{head_reads}

' f'

나머지 {len(reading) - 4}꼭지 보기

' f'

{tail_reads}

', tone="ivory", anchor="reading") body += next_cards([ ("소개", "스테이,머뭄 소개", BASE, media[0]["url"]), ("예약", "이용안내 및 예약", f"{BASE}/booking", media[2]["url"]), ]) return page("gunsan", f"군산 이야기 · {NAME}", "군산시 지역의 맛집 · 명소, 계절별 축제, 추천 일정, 군산을 노래한 곡과 쓴 글.", spots[0]["imageUrl"], body) REVIEW_JS = """ """ def build_booking(): body = cover(pick("침실", 5), e(NAME), "이용안내 및 예약", "방문 전 확인이 필요한 운영 규정과 시설 안내입니다.", height="mid") for i, u in enumerate(units): anchor = "a" if i == 0 else "b" shot = (pics("거실", skip=1) or media)[0] if i == 0 else (pics("침실") or media)[0] spec = [("기준 인원", uf(u, "standard_capacity")), ("최대 인원", uf(u, "max_capacity")), ("침대", uf(u, "bed_type")), ("면적", uf(u, "room_size")), ("주중 요금", won(uf(u, "weekday_price"))), ("요금", uf(u, "price_range"))] fac = "".join(f"

{e(x)}

" for x in uf(u, "room_facilities").split(" · ") if x.strip()) body += block(e(unit_title(u)), kicker="객실 안내", lead=e(uf(u, "room_intro")), inner=(f' {e(shot[

' f'{spec_grid(spec)}

{fac}'), tone="ivory" if i else "", anchor=anchor) amen = [("체크인 시간", facts["check_in_time"]["value"]), ("체크아웃 시간", facts["check_out_time"]["value"]), ("인원 추가 요금", won(facts["extra_person_fee"]["value"])), ("주차 가능", "가능"), ("와이파이", "있음"), ("취사 가능", "가능"), ("반려동물 동반", "불가"), ("흡연 가능", "불가"), ("바비큐 이용", "불가"), ("픽업 서비스", "없음")] body += block("이용안내 및 예약", lead="방문 전 확인이 필요한 운영 규정과 시설 안내입니다.", inner=(spec_grid(amen) + f'

취소·환불 규정
{e(facts["cancel_policy"]["value"])}

'), anchor="info") body += block("자주 묻는 질문", lead="아래 답변은 모두 사업자가 확인한 내용입니다.", inner=faq_list(faqs[:12]) + f'

나머지 {len(faqs) - 12}개 보기

' f'{faq_list(faqs[12:])}

', tone="ivory", anchor="faq") body += f"""

다녀오신 이야기

점수 대신 문장으로 남겨 주세요.

불러오는 중…

실시간 예약

빈 방 확인과 결제는 아래 예약 창구에서 진행됩니다. 이 페이지에서는 요금과 이용 조건만 안내합니다.

""" body += next_cards([ ("소개", "스테이,머뭄 소개", BASE, media[0]["url"]), ("군산", "군산 이야기", f"{BASE}/gunsan", local["attractions"][0]["imageUrl"]), ]) return page("booking", f"이용안내 및 예약 · {NAME}", "객실 안내와 요금, 이용 규정, 자주 묻는 질문, 다녀오신 이야기.", media[5]["url"], body, extra=REVIEW_JS % {"place_id": PLACE_ID}) OVERRIDE = """ :root { --ink: #15181a; --ink-2: #4a5157; --muted: #767d84; --accent: #1f4a3f; --accent-hi: #2b6555; --paper: #ffffff; --ivory: #f7f5f1; --night: #14181a; --line: rgba(20,24,26,.1); } body, input, select, textarea, button { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: 16px; line-height: 1.7; word-break: keep-all; color: var(--ink); letter-spacing: -0.005em; } body { background: var(--paper); padding-bottom: 78px; } h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; } .serif { font-family: "Gowun Batang", serif; font-weight: 700; letter-spacing: -0.015em; } a { color: var(--accent); } img { max-width: 100%; } .kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 .6rem; } .sectionlead { color: var(--ink-2); max-width: 33rem; margin: .5rem auto 0; font-size: 15.5px; } .note { color: var(--muted); font-size: 14.5px; max-width: 34rem; margin: 1rem auto 0; } .tiny { font-size: 12.5px; line-height: 1.85; opacity: .72; } #topbar { position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); } #topbar .brand { display: flex; align-items: center; min-height: 44px; padding-right: 8px; font-weight: 700; font-size: 15.5px; text-decoration: none; color: var(--ink); letter-spacing: -.02em; } #topbar nav { display: flex; } #topbar nav a { display: flex; align-items: center; min-height: 44px; padding: 0 9px; min-width: 44px; justify-content: center; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink-2); } #topbar nav a.on { color: var(--accent); } #wrapper { padding-top: 52px; } #bookbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 9px 14px; padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.95); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line); } #bookbar .price { display: flex; flex-direction: column; line-height: 1.2; } #bookbar .price b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; } #bookbar .price small { font-size: 11.5px; color: var(--muted); } #bookbar .button.primary { margin-left: auto; min-width: 8.5rem; } .button, .button.large, input[type="submit"], button.button { letter-spacing: 0; font-weight: 600; min-height: 48px; line-height: 48px; border-radius: 999px; font-size: 15px; } .button.large { min-height: 52px; line-height: 52px; font-size: 16px; } input[type="submit"].primary, button.primary, .button.primary { background-color: var(--accent); } .button.primary:hover, button.primary:hover { background-color: var(--accent-hi); } #wrapper > .invert input[type="submit"].primary, #wrapper > .invert button.primary, #wrapper > .invert .button.primary { background-color: var(--accent); color: #fff !important; } #wrapper > .invert input[type="submit"].primary:hover, #wrapper > .invert button.primary:hover, #wrapper > .invert .button.primary:hover { background-color: var(--accent-hi); } .button.ghost { background: rgba(255,255,255,.12); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); } .button.ghost:hover { background: rgba(255,255,255,.22); } .cover { position: relative; overflow: hidden; display: block; } .cover .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cover .veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,13,12,.88) 0%, rgba(10,13,12,.6) 30%, rgba(10,13,12,.2) 58%, rgba(10,13,12,.02) 84%); } .cover .inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem 1.4rem 3.2rem; color: #fff; text-align: left; } .cover.tall .inner { min-height: 88svh; } .cover.mid .inner { min-height: 58svh; } .cover .inner .kicker { color: rgba(255,255,255,.82); } .cover h1 { font-size: 2.55rem; line-height: 1.18; margin: 0 0 .5rem; color: #fff; } .cover h2 { font-size: 1.95rem; line-height: 1.25; margin: 0 0 .7rem; color: #fff; } .cover p { color: rgba(255,255,255,.93); font-size: 16px; max-width: 26rem; margin: 0 0 .4rem; } .cover .lead { font-size: 17px; } .cover .actions { margin-top: 1.4rem; } .cover.chapter .inner { padding-bottom: 2.6rem; } .cover.chapter p { font-size: 15.5px; line-height: 1.85; } .scrollhint { position: absolute; left: 50%; bottom: 14px; z-index: 3; width: 1px; height: 30px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.85)); } #wrapper > .wrapper { background: var(--paper); } #wrapper > .wrapper.ivory { background: var(--ivory); } #wrapper > .wrapper.invert, #wrapper > footer.invert { background: var(--night); color: #fff; } .invert h2, .invert h3, .invert h4, .invert p, .invert b { color: #fff; } .invert .kicker, .invert .sectionlead, .invert .note { color: rgba(255,255,255,.72); } .wrapper > .inner { padding: 3.4rem 1.4rem; max-width: 62rem; } .wrapper.pad-s > .inner { padding: 1.6rem 1.4rem; } .wrapper h2 { font-size: 1.65rem; margin: 0; } .wideshot { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; margin: 1.6rem auto 0; max-height: 460px; display: block; } .units { display: grid; gap: 18px; margin: 2rem 0 .5rem; text-align: left; } .unit { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); } .unit .shot { display: block; aspect-ratio: 4/3; } .unit .shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .unit .body { padding: 18px 18px 20px; } .unit h3 { font-size: 20px; margin: 0 0 2px; } .unit .sub { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; } .unit .price { margin: 14px 0 12px; font-size: 14.5px; color: var(--ink-2); } .unit .price b { font-size: 20px; color: var(--ink); letter-spacing: -.02em; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .chips li { padding: 5px 11px; border-radius: 999px; background: rgba(20,24,26,.055); font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--ink-2); } .chips.wide { justify-content: center; margin-top: 1.2rem; } .invert .chips li, .ivory .chips li { background: rgba(20,24,26,.07); } .invert .chips li { background: rgba(255,255,255,.13); color: rgba(255,255,255,.9); } .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; margin: 2rem 0 0; text-align: left; } .tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .tile .shot { position: relative; display: block; border-radius: 12px; overflow: hidden; } .tile .shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .tile .shot.blank { background: rgba(20,24,26,.07); } .tile .shot.blank b { display: none; } .tile .noshot { display: grid; place-items: center; width: 100%; aspect-ratio: 4/3; padding: 0 12px; text-align: center; font-size: 19px; line-height: 1.35; color: var(--ink-2); } .tile .shot.blank::after { background: linear-gradient(to top, rgba(8,10,10,.55) 0%, rgba(8,10,10,0) 52%); } .tile .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,10,10,.82) 0%, rgba(8,10,10,.25) 46%, rgba(8,10,10,0) 74%); } .tile .shot b { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 2; color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tile .shot i { position: absolute; top: 9px; left: 9px; z-index: 2; font-style: normal; background: rgba(255,255,255,.92); color: var(--ink); border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; } .tile .meta { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; font-variant-numeric: tabular-nums; } .tile .desc { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .invert .tile .meta, .invert .tile .desc { color: rgba(255,255,255,.7); } .vids { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 1.8rem; } .vid { position: relative; display: block; border-radius: 12px; overflow: hidden; text-decoration: none; } .vid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .vid::after { content: ""; position: absolute; inset: 0; background: rgba(8,10,10,.3); } .vid b { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 2; color: #fff; font-size: 13.5px; font-weight: 600; text-align: left; } .vid .play { position: absolute; top: 50%; left: 50%; z-index: 2; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 999px; background: rgba(255,255,255,.92); } .vid .play::before { content: ""; position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); border-left: 13px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .weather { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 38rem; margin-inline: auto; } .weather .tag { display: inline-block; margin-right: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(31,74,63,.1); color: var(--accent); font-size: 12.5px; font-weight: 700; } .mapframe { width: 100%; height: 290px; border: 0; border-radius: 14px; margin: 1.5rem 0 0; } .addr { font-size: 15px; color: var(--ink-2); } .addr.big { font-size: 18px; font-weight: 600; color: var(--ink); margin: 1.2rem 0 0; } .specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; max-width: 40rem; margin: 1.8rem auto 0; text-align: left; } .specs > div { padding: 10px 0; border-bottom: 1px solid var(--line); } .invert .specs > div { border-bottom-color: rgba(255,255,255,.16); } .specs dt { font-size: 12.5px; color: var(--muted); font-weight: 600; } .specs dd { margin: 1px 0 0; font-size: 15px; font-weight: 500; } .cancel { text-align: left; max-width: 40rem; margin-inline: auto; } .faq { text-align: left; max-width: 44rem; margin: 1.6rem auto 0; } .faq details { border-bottom: 1px solid var(--line); } .invert .faq details { border-bottom-color: rgba(255,255,255,.16); } .faq summary { cursor: pointer; list-style: none; position: relative; padding: 15px 30px 15px 0; font-size: 15.5px; font-weight: 600; min-height: 44px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .5; } .faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .faq details p { margin: 0; padding: 0 0 16px; font-size: 15px; color: var(--ink-2); } .invert .faq details p { color: rgba(255,255,255,.8); } .plans summary span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; } .invert .plans summary span { color: rgba(255,255,255,.65); } .plans .why { padding-bottom: 10px !important; } .plans .day { padding: 2px 0 14px; } .plans .day h4 { font-size: 13.5px; margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; } .plans .day h4 small { font-weight: 400; color: var(--muted); font-size: 12.5px; } .invert .plans .day h4 small { color: rgba(255,255,255,.6); } .plans .day ol { margin: 0; padding-left: 1.15rem; } .plans .day li { padding: 4px 0; font-size: 14.5px; } .plans .day li span { display: block; font-size: 13.5px; opacity: .76; line-height: 1.6; } .reads { display: block; text-align: left; max-width: 36rem; margin: 2rem auto 0; } .read { padding: 26px 0; border-top: 1px solid var(--line); position: relative; } .read:first-child { border-top: 0; padding-top: 6px; } .read .no { display: block; font-family: "Gowun Batang", serif; font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .12em; margin-bottom: 8px; } .read h4 { font-size: 20px; margin: 0; line-height: 1.4; } .read .yr { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; } .read .txt { font-family: "Gowun Batang", serif; font-size: 16px; line-height: 1.95; color: var(--ink); margin: 14px 0 0; text-indent: 0; } .read a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); margin-top: 6px; } .read a:hover { color: var(--accent); border-bottom-color: var(--accent); } .songs { list-style: none; margin: 1.6rem auto 0; padding: 0; text-align: left; max-width: 44rem; } .songs li { border-top: 1px solid var(--line); } .songs li:last-child { border-bottom: 1px solid var(--line); } .songs a { display: block; padding: 13px 0; text-decoration: none; color: inherit; min-height: 44px; } .songs b { font-size: 15.5px; font-weight: 600; } .songs span { font-size: 13px; color: var(--muted); margin-left: 8px; } .songs em { display: block; font-style: normal; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.6; } .reviews { list-style: none; margin: 1.6rem auto 0; padding: 0; text-align: left; max-width: 44rem; } .reviews li { padding: 15px 0; border-bottom: 1px solid var(--line); } .reviews .who { margin: 0 0 5px; display: flex; gap: 9px; align-items: baseline; } .reviews .who b { font-size: 14.5px; } .reviews .who time { font-size: 12.5px; color: var(--muted); } .reviews .body { margin: 0; font-size: 15px; color: var(--ink-2); white-space: pre-line; } .reviews .empty { color: var(--muted); font-size: 15px; border: 0; text-align: center; padding: 2rem 0; } #reviewsheet { position: fixed; inset: 0; z-index: 60; } #reviewsheet[hidden] { display: none; } #reviewsheet .scrim { position: absolute; inset: 0; background: rgba(8,10,10,.55); border: 0; } #reviewsheet .sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88svh; overflow: auto; background: var(--paper); border-radius: 18px 18px 0 0; padding: 18px 18px 26px; padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); text-align: left; } #reviewsheet .sheethead { display: flex; align-items: center; justify-content: space-between; } #reviewsheet h3 { margin: 0; font-size: 18px; } #reviewsheet .x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); min-width: 44px; min-height: 44px; cursor: pointer; } #reviewsheet label { display: block; margin: 14px 0 6px; font-size: 13.5px; font-weight: 600; } #reviewsheet label em { font-style: normal; color: var(--muted); font-weight: 400; } #reviewsheet textarea, #reviewsheet input[type="text"], #reviewsheet input:not([type]) { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 16px; background: var(--paper); box-shadow: none; } #reviewsheet .hint { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; } #reviewsheet .check { display: flex; gap: 9px; align-items: flex-start; margin-top: 16px; font-weight: 400; font-size: 14px; } #reviewsheet .check input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; } #reviewsheet .pot { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } #reviewsheet .button { margin-top: 18px; } .nextnav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .nextcard { position: relative; display: block; border-radius: 14px; overflow: hidden; text-decoration: none; } .nextcard img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; } .nextcard::after { content: ""; position: absolute; inset: 0; background: rgba(8,10,10,.48); } .nextcard span { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 2px; } .nextcard small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; } .nextcard b { font-size: 15.5px; font-weight: 700; } .more { margin-top: 1.4rem; } .more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.6rem; border-radius: 999px; font-size: 14.5px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); } .invert .more > summary { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); color: #fff; } .more > summary::-webkit-details-marker { display: none; } #footer .inner { padding: 3rem 1.4rem 3.2rem; } #footer h2 { font-size: 21px; } #footer .addr a { color: rgba(255,255,255,.9); display: inline-flex; align-items: center; min-height: 44px; } #footer .actions { margin-top: 1.4rem; } #footer .tiny a { color: rgba(255,255,255,.8); } .gallery.style2 article .caption { display: none; } @media (min-width: 737px) { #topbar { height: 60px; padding: 0 28px; } #topbar nav a { padding: 0 14px; font-size: 15px; } #wrapper { padding-top: 60px; } .cover .inner { padding: 4rem 4rem 4.4rem; } .cover.tall .inner { min-height: 84svh; } .cover h1 { font-size: 4rem; } .cover h2 { font-size: 2.6rem; } .cover p, .cover .lead { max-width: 32rem; font-size: 18px; } .wrapper > .inner { padding: 5rem 2rem; } .wrapper h2 { font-size: 2.1rem; } .units { grid-template-columns: repeat(2, 1fr); } .tiles { grid-template-columns: repeat(4, 1fr); gap: 20px 16px; } .vids { grid-template-columns: repeat(3, 1fr); } .specs { grid-template-columns: repeat(3, 1fr); } .mapframe { height: 380px; } .wideshot { max-height: 520px; width: auto; max-width: 100%; } #reviewsheet .sheet { left: 50%; bottom: 50%; transform: translate(-50%, 50%); width: 30rem; border-radius: 16px; max-height: 84svh; } } .pc { display: grid; gap: 18px; margin-top: 2rem; } #pcCanvas { width: 100%; max-width: 340px; height: auto; margin: 0 auto; display: block; border-radius: 12px; box-shadow: 0 2px 20px rgba(20,24,26,.14); } .pcside { text-align: left; max-width: 340px; margin: 0 auto; width: 100%; } .picks { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .picks button { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; box-shadow: 0 0 0 1px var(--line); min-height: 56px; line-height: 0; } .picks button.on { box-shadow: 0 0 0 2px var(--accent); } .picks img { width: 100%; height: 100%; object-fit: cover; display: block; } #pcText { width: 100%; margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 16px; font-family: "Gowun Batang", serif; line-height: 1.8; background: var(--paper); box-shadow: none; resize: vertical; } .pc .hint { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; font-variant-numeric: tabular-nums; } .pc .actions { margin-top: 14px; } @media (min-width: 737px) { .pc { grid-template-columns: 340px 1fr; align-items: start; gap: 28px; } .pcside { margin: 0; max-width: 24rem; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } .prose { max-width: 34rem; margin: 0 auto; font-size: 16px; line-height: 1.85; color: var(--ink-2); text-align: left; } .prose + .wideshot { margin-top: 1.8rem; } .wideshot + .prose { margin-top: 1.8rem; } .lps { display: grid; gap: 14px; margin-top: 1.8rem; text-align: left; } .lp { display: grid; grid-template-columns: 82px 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.055); text-decoration: none; } .lp .disc { position: relative; width: 82px; height: 82px; border-radius: 999px; background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 1px, rgba(0,0,0,0) 1px 4px), radial-gradient(circle at 34% 30%, #3b4145 0%, #16191b 62%); box-shadow: 0 2px 10px rgba(0,0,0,.45); } .lp .disc i { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 999px; background: var(--label); } .lp .disc i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 999px; background: #14181a; } .lp .txt { display: block; min-width: 0; } .lp small { display: block; font-size: 11.5px; letter-spacing: .1em; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; } .lp b { display: block; font-size: 16.5px; font-weight: 700; color: #fff; margin-top: 3px; letter-spacing: -.02em; } .lp .by { display: block; font-size: 13px; color: rgba(255,255,255,.66); margin-top: 1px; } .lp em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: normal; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.78); margin-top: 6px; } .people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 14px; margin-top: 1.8rem; text-align: left; } .person { display: flex; flex-direction: column; } .person .face { display: block; width: 74px; height: 74px; border-radius: 999px; overflow: hidden; background: rgba(20,24,26,.07); margin-bottom: 10px; } .person .face img { width: 100%; height: 100%; object-fit: cover; display: block; } .person h4 { margin: 0; font-size: 16px; } .person .role { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .person .one { margin: 6px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); } .person a { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; } .chron { list-style: none; margin: 1.8rem auto 0; padding: 0; max-width: 44rem; text-align: left; } .chron li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0 14px; padding: 18px 0; border-top: 1px solid var(--line); } .chron li:last-child { border-bottom: 1px solid var(--line); } .chron .yr { font-family: "Gowun Batang", serif; font-weight: 700; font-size: 19px; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.02em; padding-top: 1px; } .chron li.turn .yr::after { content: ""; display: block; width: 18px; height: 2px; background: var(--accent); margin-top: 7px; } .chron .what h4 { margin: 0; font-size: 16.5px; } .chron .what p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); } .chron .where { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; } .chron .pic { grid-column: 2; display: block; margin-top: 12px; } .chron .pic img { width: 100%; aspect-ratio: 21/9; max-height: 132px; object-fit: cover; border-radius: 10px; display: block; } .read h4 { font-size: 17px; margin: 0 0 6px; } @media (min-width: 737px) { .lps { grid-template-columns: repeat(2, 1fr); gap: 16px; } .people { grid-template-columns: repeat(4, 1fr); gap: 28px 20px; } .chron li { grid-template-columns: 5rem 1fr 190px; } .chron .pic { grid-column: 3; grid-row: 1; margin-top: 0; } .chron .pic img { aspect-ratio: 4/3; max-height: none; } } """ def main(): if OUT.exists(): shutil.rmtree(OUT) OUT.mkdir(parents=True) shutil.copytree(TPL / "assets", OUT / "assets") (OUT / "assets" / "js" / "demo.js").unlink(missing_ok=True) (OUT / "assets" / "css" / "meomoom.css").write_text(OVERRIDE) shutil.copy(TPL / "LICENSE.txt", OUT / "assets" / "LICENSE-story.txt") for made in (build_home(), build_gunsan(), build_booking()): print(made.relative_to(OUT), f"{made.stat().st_size:,} bytes") if __name__ == "__main__": main()