/* ========================================================================== 방콕 3D 동선 — the one theme (OpenDesign v5-refined theme-original.css) The deployed look: teal accent, green-grey neutrals, IBM Plex Sans KR with Chakra Petch numerals, v3's type sizes, density, corners, shadows and pins. Loads last (after explore.css). index.html sets : the panels stay light even when the phone is in dark mode, because the pastel map is light. Not ported from the prototype: the map-style blocks (paper, pastel, night pictures). Only the pastel ground colour stays, as --map-bg, so #globe shows the map's cream before the tiles arrive. Two parts: 1. Tokens. The UI colours are not repeated: tokens.css holds them on :root. 2. "v3 exact sizes": v3's per-element values for this look. ========================================================================== */ :root[data-look="original"] { /* ---- Map side (tokens.css "Map markers" + v3.css explore hues): same in both modes ---- */ --map-bg: #f6efe3; /* pastel basemap ground (map3d.js pastel look) */ --mk-stop: oklch(0.260 0.015 175); --mk-on: oklch(1 0 0); --mk-ring: oklch(1 0 0); --mk-ring-w: 2px; --mk-edge: oklch(0.200 0.020 175 / 0.55); --mk-tail: oklch(1 0 0); --mk-landmark: oklch(0.560 0.110 75); --mk-landmark-ring: oklch(1 0 0); --mk-landmark-halo: oklch(0.860 0.100 85 / 0.85); --mk-lodging: oklch(0.480 0.085 188); --mk-air: oklch(0.500 0.100 250); --mk-label-bg: oklch(1 0 0 / 0.96); --mk-label-fg: oklch(0.240 0.014 175); --mk-label-bd: 0 solid transparent; --mk-label-r: 8px; --mk-focus: oklch(0.480 0.085 188); --mk-sel-glow: 0 0 #0000; --mk-shadow: 0 1px 2px oklch(0.2 0.02 175 / 0.35), 0 3px 8px oklch(0.2 0.02 175 / 0.22); --mk-size: 28px; --mk-size-phone: 28px; /* Leader line (v4 feature): the pin's own ink */ --mk-lead-c: oklch(0.260 0.015 175); --mk-lead-style: dotted; --mk-lead-w: 2px; --mk-ground-glow: none; --x-food: oklch(0.560 0.165 38); --x-cafe: oklch(0.500 0.085 60); --x-see: oklch(0.500 0.130 255); --x-rest: oklch(0.520 0.140 330); --x-mich: oklch(0.540 0.200 25); --x-mich-on: oklch(1 0 0); --x-me: oklch(0.560 0.170 255); --xm-tile: oklch(1 0 0); --xm-on: oklch(1 0 0); --xm-r: 10px; --xm-ring-w: 2px; /* ---- Type (tokens.css): IBM Plex Sans KR, Chakra Petch for dates, pins and preset letters ---- */ --font-ko: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; --font-num: 'Chakra Petch', 'IBM Plex Sans KR', system-ui, sans-serif; --font-head: var(--font-ko); --font-date: var(--font-num); --font-mk: var(--font-ko); --font-mk-num: var(--font-num); --font-disp: var(--font-num); --fw-body: 400; --fw-regular: 400; --fw-head: 700; --ls-head: 0; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 28px; --fs-title: 20px; /* v3 .drawer-head h2, .cmp-head h2 */ --fs-price: 26px; /* v3 .ms-p dd */ --fs-stat: 24px; /* v3 .cmp-stat b */ --fs-mk-label: 12px; /* v1 .mk-label */ --fs-mk-num: 14px; /* v1 .mk-pin */ --lh-tight: 1.25; --lh-snug: 1.4; --lh-body: 1.55; /* ---- Density (tokens.css layout + v3.css) ---- */ --tap: 44px; --tap-desk: 40px; --edge: 12px; --pad-x: 16px; --row-min: 76px; --thumb: 56px; --thumb-desk: 60px; --pv-thumb: 84px; --rail-h: 190px; --card-pad: 14px; --chip-h: 44px; --panel-w: 392px; --drawer-w: 420px; /* ---- Shape (tokens.css radius + elevation; shadows come from tokens.css per mode) ---- */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-btn: var(--r-pill); --r-chip: var(--r-pill); --r-card: var(--r-md); --icon-sw: 1.9; --icon-fill: none; --panel-bg: var(--surface); --panel-border: 1px solid var(--border); --panel-blur: blur(8px); /* v1 glass controls over the map; opaque panels look the same */ --panel-glow: 0 0 #0000; --sel-ring: 0 0 #0000; --rule-head: 0 solid transparent; /* ---- v3.css additions that follow the mode (light here, dark below) ---- */ --inverse-hover: oklch(0.340 0.014 175); --mich-soft: oklch(0.955 0.030 25); --mich-text: oklch(0.480 0.190 25); /* v3 panel tiles used the map hues with white icons in both modes */ --c-food: var(--x-food); --c-cafe: var(--x-cafe); --c-see: var(--x-see); --c-rest: var(--x-rest); --c-grand: var(--mk-landmark); --c-on: oklch(1 0 0); } :root[data-look="original"][data-theme="dark"] { --inverse-hover: oklch(0.840 0.008 165); --mich-soft: oklch(0.330 0.070 25); --mich-text: oklch(0.820 0.110 25); } /* ========================================================================== v3 exact sizes (this look only) ========================================================================== */ /* v1 components as in components.css */ :root[data-look="original"] .brand h1 { letter-spacing: -0.01em; } :root[data-look="original"] .day-tab { min-block-size: 56px; border-radius: var(--r-md); } :root[data-look="original"] .seg { border-radius: var(--r-md); } :root[data-look="original"] .seg-tab { border-radius: 9px; font-size: var(--fs-sm); } :root[data-look="original"] :is(.stats, .hint) { font-size: var(--fs-sm); } :root[data-look="original"] :is(.sec-head h2, .sec-head h3) { font-size: var(--fs-xs); } :root[data-look="original"] .issue { font-size: var(--fs-sm); } :root[data-look="original"] .issue .ic { font-size: 12px; } :root[data-look="original"] .issue.ok { font-size: var(--fs-xs); } :root[data-look="original"] .issue.ok .ic { font-size: 10px; } :root[data-look="original"] .tl-row { grid-template-columns: 46px 26px minmax(0, 1fr); } :root[data-look="original"] .tl-num { font-size: 12.5px; } :root[data-look="original"] .tl-node { inline-size: 24px; block-size: 24px; margin-top: 8px; } :root[data-look="original"] .tl-node.landmark { background: var(--gold); color: var(--mk-on); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--gold-halo); } :root[data-look="original"] .nu-pin.landmark { background: var(--gold); color: var(--mk-on); box-shadow: none; } :root[data-look="original"] :is(.tl-node.lodging, .nu-pin.lodging) { background: var(--mk-lodging); color: var(--mk-on); } :root[data-look="original"] :is(.tl-node.air, .nu-pin.air) { background: var(--mk-air); color: var(--mk-on); } :root[data-look="original"] :is(.tl-sub, .tl-sub .th) { font-size: var(--fs-xs); } :root[data-look="original"] .tl-note { font-size: var(--fs-sm); } :root[data-look="original"] :is(.tl-leg .tl-note, .tl-gap .tl-body, .leg-line) { font-size: var(--fs-xs); } :root[data-look="original"] .leg-line .mono { font-size: var(--fs-sm); } :root[data-look="original"] .cand .ct { font-size: var(--fs-md); } :root[data-look="original"] :is(.blk-sum, .lodging-detail, .blk-empty, .text-btn, .toast) { font-size: var(--fs-sm); } :root[data-look="original"] .cand .cs { font-size: var(--fs-xs); } :root[data-look="original"] .layers-pop { border-radius: var(--r-lg); box-shadow: var(--shadow-2); } :root[data-look="original"] .layers-pop h3 { font-size: var(--fs-xs); } :root[data-look="original"] :is(.plan-head, .cmp-head) { border-bottom: 1px solid var(--border); } :root[data-look="original"] .mk-label { max-inline-size: 170px; padding: 3px 8px; font-weight: var(--fw-semi); } :root[data-look="original"] .mk[aria-current="true"] .mk-pin { scale: 1.18; box-shadow: 0 0 0 2px var(--mk-ring), 0 0 0 3px var(--mk-edge), var(--mk-shadow); } :root[data-look="original"] .mk.landmark[aria-current="true"] .mk-pin { box-shadow: 0 0 0 2px var(--mk-ring), 0 0 0 5px var(--mk-landmark-halo), 0 0 0 6px var(--mk-edge), var(--mk-shadow); } /* MapLibre controls stay white, as in v3 */ :root[data-look="original"] .maplibregl-ctrl-group { background: oklch(1 0 0); border: 0; } :root[data-look="original"] .maplibregl-ctrl-group button { color: oklch(0.24 0.014 175); } :root[data-look="original"] .maplibregl-ctrl-group button + button { border-top: 1px solid oklch(0.9 0.005 165); } :root[data-look="original"] .maplibregl-ctrl-group button:hover { background: oklch(0.95 0.005 165); } :root[data-look="original"] .maplibregl-ctrl-attrib { background: oklch(1 0 0 / 0.8); color: oklch(0.3 0.01 175); font-size: 10.5px; } /* v3.css: explore markers and badges */ :root[data-look="original"] .xm-label { font-size: 13px; font-weight: var(--fw-semi); } :root[data-look="original"] .xm-price { font-size: 13px; } :root[data-look="original"] .xm[aria-current="true"] .xm-body { box-shadow: 0 0 0 2.5px var(--mk-ring), 0 0 0 3.5px var(--mk-edge), var(--mk-shadow); } :root[data-look="original"] .xm[aria-current="true"].is-grand .xm-body { box-shadow: 0 0 0 2.5px var(--mk-ring), 0 0 0 6px var(--mk-landmark-halo), 0 0 0 7px var(--mk-edge), var(--mk-shadow); } :root[data-look="original"] .mich { inline-size: 18px; block-size: 18px; font-size: 10.5px; } :root[data-look="original"] .mich-star { font-size: 11px; } :root[data-look="original"] :is(.xm .mich, .ptile .mich) { top: -7px; right: -7px; } :root[data-look="original"] :is(.pill .mich, .fchip .mich, .lr .mich, .pv .mich, .map-key .mich, .dt-head .mich) { background: var(--x-mich); color: oklch(1 0 0); } :root[data-look="original"] .fchip .mich { inline-size: 19px; block-size: 19px; } :root[data-look="original"] .xc { font-size: 16px; } :root[data-look="original"] .xc.is-key { block-size: 26px; padding: 0 8px; font-size: 12px; } /* v3.css: its own parts were fixed px on every device */ :root[data-look="original"] :is(.fchip, .fwin-n, .wchip, .research, .xsum, .xsum-go, .mini-go, .btn, .rail-count, .pv-line, .lr-sub, .lr-empty, .dt-facts, .dt-links, .dt-memo, .mrow-main, .ms-p dt, .ms-p.na dd, .see3 dd, .slot-pick .sp-slot, .slot-pick .sp-blk, .slot-pick .sp-go, .cmp-open b, .lb-count, .cmp-focus-name, .cmp-common h3, .cmp-common p, .cmp-table) { font-size: 15px; } :root[data-look="original"] .mini-date { font-size: 22px; } :root[data-look="original"] :is(.mini-title, .dt-desc, .dt-sec > h3, .mrow-price) { font-size: 16px; } :root[data-look="original"] .lr-name { font-size: 17px; } :root[data-look="original"] :is(.lb-cap h2, .lb-price) { font-size: 18px; } :root[data-look="original"] .cmp-common h3 { font-weight: var(--fw-semi); } :root[data-look="original"] .cmp-dot { font-size: 12.5px; } :root[data-look="original"] .cmp-focus-btns { border-radius: var(--r-md); } :root[data-look="original"] .cmp-focus-btns button { border-radius: 9px; } :root[data-look="original"] .wchip { border-radius: var(--r-md); } :root[data-look="original"] .rail-count { min-block-size: 32px; } :root[data-look="original"] .pv { border-radius: var(--r-lg); } :root[data-look="original"] .pv-thumb { border-radius: var(--r-md); } :root[data-look="original"] .ptile { border-radius: 12px; } :root[data-look="original"] .mrow { padding: 11px 0; } :root[data-look="original"] .mrow-ph { border-radius: var(--r-md); background: color-mix(in oklch, var(--pc, var(--c-food)) 18%, var(--surface-2)); } :root[data-look="original"] .mrow-cam { background: oklch(0 0 0 / 0.5); } :root[data-look="original"] .ph-credit { background: oklch(0 0 0 / 0.42); color: oklch(1 0 0 / 0.92); } :root[data-look="original"] .strength-bar { grid-template-columns: repeat(3, 36px); } :root[data-look="original"] .strength-bar i { block-size: 26px; } :root[data-look="original"] .see3 > div { grid-template-columns: 88px minmax(0, 1fr); } :root[data-look="original"] .dt-head { margin-bottom: 10px; } :root[data-look="original"] .drawer-head { margin: 0; padding: 0 10px 8px 16px; } :root[data-look="original"] .drawer[data-view="place"] .drawer-head { padding-left: 10px; } :root[data-look="original"] .drawer-scroll { padding: 4px 16px 24px; } :root[data-look="original"] .fwin { max-block-size: calc(65% - var(--safe-top) - 112px); } :root[data-look="original"] .fwin-head { padding: 14px 16px 6px; } :root[data-look="original"] .fwin-scroll { padding: 4px 16px 12px; } :root[data-look="original"] .lb { background: oklch(0.14 0.008 175 / 0.95); } :root[data-look="original"] .lb-ph { background: color-mix(in oklch, var(--pc, var(--c-food)) 30%, oklch(0.26 0.01 175)); } /* v3.css phone block: v1's timeline and blocks moved up to the 15px body floor; sheets have no frame */ @container app (max-width: 860px) { :root[data-look="original"] .tl-name { font-size: 16px; } :root[data-look="original"] :is(.tl-note, .tl-leg .tl-note, .blk-sum, .issue, .stats, .cand .cs, .lodging-detail, .plan-chip-name, .seg-tab, .tl-gap .tl-body, .leg-line .mono, .day-head .hint, #preset-desc) { font-size: 15px; } :root[data-look="original"] :is(.tl-sub, .leg-line) { font-size: 13px; } :root[data-look="original"] :is(.cand .ct, .blk-title) { font-size: 16px; } :root[data-look="original"] :is(#panel, .drawer, .fwin, .plan-sheet, .modal-box, .cmp) { border: 0; } :root[data-look="original"] #app[data-sheet="mini"] .mini { grid-template-columns: 52px minmax(0, 1fr) auto; } } /* v3.css / components.css desktop block */ @container app (min-width: 861px) { :root[data-look="original"] .icon-btn { border-radius: var(--r-sm); } :root[data-look="original"] .plan-chip-tag { border-radius: var(--r-sm); } :root[data-look="original"] .day-tab { min-block-size: 52px; } :root[data-look="original"] .seg-tab { min-block-size: 34px; } :root[data-look="original"] .fchip { font-size: 14px; } :root[data-look="original"] .fwin { inline-size: 520px; max-block-size: calc(100% - 90px); border-radius: var(--r-lg); } :root[data-look="original"] .fwin-foot { border-radius: 0 0 var(--r-lg) var(--r-lg); } :root[data-look="original"] .research { top: 66px; } :root[data-look="original"] :is(#panel, .topbar, .plan-sheet, .drawer, .cmp) { border-radius: var(--r-lg); } :root[data-look="original"] .drawer-head { padding: 12px 10px 8px 18px; } :root[data-look="original"] .drawer[data-view="place"] .drawer-head { padding-left: 12px; } :root[data-look="original"] .drawer-scroll { padding: 4px 18px 20px; } :root[data-look="original"] .drawer-actions { padding: 12px 18px; border-radius: 0 0 var(--r-lg) var(--r-lg); } :root[data-look="original"] :is(.btn, .drawer-actions .btn) { min-block-size: 42px; } :root[data-look="original"] .cmp-inner { max-inline-size: 760px; } :root[data-look="original"] .cmp-stats { max-inline-size: 560px; } :root[data-look="original"] .cmp-focus-btns button { block-size: 36px; } }