/* GILVIA v0.1 separate page. Mobile first; no shared styles with the existing app.
   Look follows the ORVION home (cream background, soft washes, round cards, thin line icons) in the GILVIA mark colors. */
:root {
  --v01-bg: #FFFAF3;
  --v01-surface: #ffffff;
  --v01-ink: #1F2733;
  --v01-muted: #646B77;
  --v01-line: #E9E1D4;
  --v01-accent: #0A6B78;
  --v01-accent-soft: #DDF3F5;
  --v01-teal: #08B4C2;
  --v01-navy: #02326C;
  --v01-coral: #FC754B;
  --v01-eyebrow: #B04A22;
  --v01-warn-bg: #fff3c4;
  --v01-warn-ink: #5c4300;
  --v01-danger: #a33a2c;
  --v01-radius: 18px;
  /* Icon tiles (docs/ICON_TILES.md): one rounded square for every icon. Shared values, also meant for CheckCare. */
  --tile-radius: 14px;
  --tile-border: 1px;
  --tile-shadow: 0 1px 2px rgba(31, 39, 51, .06), 0 2px 6px rgba(31, 39, 51, .05);
  --tile-lg: 48px; --tile-sm: 36px; --tile-xs: 28px;
  --tile-icon-lg: 26px; --tile-icon-sm: 20px; --tile-icon-xs: 16px;
  /* stroke in viewBox units, chosen so every icon draws about 1.5px on screen (24 x 1.5 / icon size). */
  --tile-stroke-lg: 1.4; --tile-stroke-sm: 1.8; --tile-stroke-xs: 2.25;
  --tile-sky-bg: #EEF5FC; --tile-sky-line: #B9D0E8; --tile-sky-ink: #1F5E91;
  --tile-apricot-bg: #FDF2E7; --tile-apricot-line: #EBC6A2; --tile-apricot-ink: #9A4A17;
  --tile-green-bg: #EFF7EC; --tile-green-line: #BCDAB0; --tile-green-ink: #3F6E22;
  --tile-lavender-bg: #F5EDF9; --tile-lavender-line: #D9C2E5; --tile-lavender-ink: #7A3F91;
  --tile-teal-bg: #E8F6F7; --tile-teal-line: #A9D9DF; --tile-teal-ink: #0A6B78;
  --tile-neutral-bg: #FBF8F3; --tile-neutral-line: #DCD3C5; --tile-neutral-ink: #3F4652;
  color-scheme: light;
}
/* 종류 colors: a dot on the buttons, the wash circle and icon tone on cards. */
[data-kind="sight"] { --kind: #FC754B; --kind-wash: #FDE6DC; --kind-tone: #B9481F; }
[data-kind="nature"] { --kind: #08B4C2; --kind-wash: #DDF3F5; --kind-tone: #047782; }
[data-kind="museum"] { --kind: #02326C; --kind-wash: #E3E9F3; --kind-tone: #02326C; }
[data-kind="festival"] { --kind: #F2B33D; --kind-wash: #FCF0D6; --kind-tone: #8F5D00; }
[data-kind="water"] { --kind: #3F96D6; --kind-wash: #E1EEF9; --kind-tone: #1F5E91; }
[data-kind="experience"] { --kind: #7FB33F; --kind-wash: #EAF4DC; --kind-tone: #476E17; }
[data-kind="kidsIndoor"] { --kind: #B57BCB; --kind-wash: #F3E8F7; --kind-tone: #7A3F91; }
[data-kind="spa"] { --kind: #7FCBEA; --kind-wash: #E6F6FC; --kind-tone: #1A6A8A; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: radial-gradient(120% 50% at 0% 0%, #E9F6F5 0%, rgba(233,246,245,0) 60%), radial-gradient(90% 50% at 100% 100%, #FCEBDD 0%, rgba(252,235,221,0) 65%), var(--v01-bg);
  background-attachment: fixed;
  color: var(--v01-ink);
  font-family: "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
body.v01-sheet-open { overflow: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #2f7de1; outline-offset: 2px; }

.v01-banner {
  position: sticky; top: 0; z-index: 30;
  margin: 0; padding: 8px 16px;
  background: var(--v01-warn-bg); color: var(--v01-warn-ink);
  border-bottom: 1px solid #e6cf73;
  font-size: 14px; font-weight: 700; text-align: center;
}
.v01-banner-inline { position: static; border-radius: 10px; border: 1px solid #e6cf73; margin: 0 0 12px; }
.v01-banner[hidden] { display: none; }

/* ---- brand row: phone = GILVIA + language on line 1, by ORVION on line 2; wider = one line ---- */
.v01-brandbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand lang" "by tools";
  align-items: center; gap: 2px 12px; max-width: 960px; margin: 0 auto; padding: 14px 16px 4px;
}
.v01-brand { grid-area: brand; display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: var(--v01-navy); text-decoration: none; }
.v01-brand-mark { display: block; width: 46px; height: 41px; flex: none; }
.v01-logo { font-size: 26px; font-weight: 700; letter-spacing: .1em; line-height: 1.1; }
.v01-by { grid-area: by; display: inline-flex; align-items: center; gap: 6px; margin-left: 3px; color: var(--v01-muted); font-size: 14px; letter-spacing: .06em; }
.v01-by img { display: block; width: 22px; height: 22px; }
.v01-lang { grid-area: lang; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 6px 12px; border: var(--tile-border) solid var(--tile-neutral-line); border-radius: var(--tile-radius); background: var(--tile-neutral-bg); box-shadow: var(--tile-shadow); color: var(--v01-ink); font-size: 13px; font-weight: 600; }
.v01-lang > svg:first-child { width: var(--tile-icon-xs); height: var(--tile-icon-xs); stroke-width: var(--tile-stroke-xs); color: var(--tile-neutral-ink); }
.v01-lang-long { display: none; }
.v01-tools { grid-area: tools; display: inline-flex; justify-content: flex-end; gap: 6px; }
.v01-tool { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: var(--tile-border) solid var(--tile-neutral-line); border-radius: var(--tile-radius); background: var(--tile-neutral-bg); box-shadow: var(--tile-shadow); color: var(--tile-neutral-ink); }
.v01-tool svg { width: var(--tile-icon-sm); height: var(--tile-icon-sm); stroke-width: var(--tile-stroke-sm); }
.v01-tool[aria-pressed="true"] { border-color: var(--tile-sky-line); color: var(--v01-navy); background: var(--tile-sky-bg); }
#v01-btn-sound .v01-sound-on, #v01-btn-sound[aria-pressed="true"] .v01-sound-off { display: none; }
#v01-btn-sound[aria-pressed="true"] .v01-sound-on { display: inline; }

/* ---- top banner (src/v01-banners.json) ---- */
.v01-promo { position: relative; max-width: 928px; margin: 10px 16px 4px; aspect-ratio: 2.4 / 1; border-radius: 16px; overflow: hidden; background: #DCE9E6; }
.v01-promo[hidden] { display: none; }
.v01-promo-track { position: absolute; inset: 0; touch-action: pan-y; }
.v01-promo-slide { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; color: #fff; text-decoration: none; }
.v01-promo-slide.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.v01-promo-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.v01-promo-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,24,32,.55) 0%, rgba(18,24,32,.28) 38%, rgba(18,24,32,0) 66%); }
.v01-promo-text { position: absolute; left: 16px; bottom: 26px; max-width: 64%; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.v01-promo-ad { position: absolute; left: 12px; top: 10px; padding: 1px 7px; border-radius: 6px; background: rgba(18,24,32,.6); color: #fff; font-size: 12px; font-weight: 700; }
.v01-promo-dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 2px; }
.v01-promo-dot { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; }
.v01-promo-dot::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.6); transition: width .3s ease; }
.v01-promo-dot.is-on::before { width: 16px; background: #fff; }
.v01-promo-close { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--v01-ink); }

.v01-top { padding: 8px 16px 8px; max-width: 960px; margin: 0 auto; }
.v01-eyebrow { margin: 8px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--v01-eyebrow); }
/* Thai letters (with marks above and below) must not be spaced apart. */
html:lang(th) .v01-eyebrow, html:lang(th) .v01-title, html:lang(th) .v01-promo-text, html:lang(th) .v01-card-kind { letter-spacing: normal; }
.v01-title { font-size: 25px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; margin: 0 0 14px; }
.v01-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.v01-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 0;
  padding: 8px 14px; border: 1px solid var(--v01-line); border-radius: 999px;
  background: rgba(255,255,255,.85); text-align: left; font-size: 15px; font-weight: 500;
}
.v01-chip:hover { border-color: var(--v01-navy); }
.v01-chip-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.v01-chip-origin { flex: 1 1 100%; gap: 12px; min-height: 64px; padding: 7px 8px; background: var(--v01-surface); box-shadow: 0 4px 16px rgba(31,39,51,.06); }
.v01-chip-origin .v01-chip-text { display: grid; }
.v01-chip-origin small { font-size: 11px; color: var(--v01-muted); line-height: 1.2; }
.v01-chip-origin [data-chip-label] { font-size: 16px; font-weight: 600; }
.v01-chip-go { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--v01-ink); color: #fff; }
/* 찾기 조건 in three boxes (언제 · 얼마나 · 누구와), each its own light color. Every cell has the same height and
   the same icon/text size; the ▲▼ steppers center their small title over the buttons. */
.v01-groups { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
.v01-group { padding: 10px; border-radius: 18px; border: 1px solid var(--g-line); background: var(--g-bg); }
.v01-group-when { --g-bg: #EEF5FC; --g-line: #D7E6F5; --g-tone: #1F5E91; }
.v01-group-far { --g-bg: #FDF2E7; --g-line: #F3DDC6; --g-tone: #9A4A17; }
.v01-group-who { --g-bg: #EFF7EC; --g-line: #D8EBD1; --g-tone: #3F6E22; }
.v01-group-title { margin: 0 0 8px 4px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--g-tone); }
.v01-group-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v01-group.is-single .v01-group-cells { grid-template-columns: minmax(0, 1fr); }
.v01-cell { width: 100%; min-height: 72px; justify-content: flex-start; gap: 10px; padding: 8px 12px 8px 10px; border-radius: 14px; border-color: rgba(31,39,51,.08); background: #fff; font-size: 15px; }
.v01-cell[hidden] { display: none; }
.v01-cell .v01-chip-text { font-weight: 600; }
/* ▲▼ steppers (출발 시간, 가까운 곳 빼기): a small title centered over [▼ value ▲]. */
.v01-stepper { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-content: stretch; justify-items: stretch; gap: 4px; padding: 6px 10px; cursor: default; }
.v01-stepper .v01-step-row { width: 100%; max-width: 220px; justify-self: center; }
.v01-step-label { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 6px; font-size: 11px; color: var(--v01-muted); line-height: 1.3; text-align: center; }
.v01-step-note { font-size: 11px; color: var(--v01-muted); opacity: .85; }
.v01-step-note:empty { display: none; }
.v01-step-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 4px; }
.v01-step-value { text-align: center; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--v01-ink); white-space: nowrap; }
.v01-step-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--g-line, var(--v01-line)); border-radius: 50%; background: #fff; color: var(--g-tone, var(--v01-ink)); font-size: 11px; line-height: 1; }
.v01-step-btn:disabled { opacity: .35; cursor: not-allowed; }
/* Very narrow phones (320px): slightly smaller ▲▼ leave room for '30분 빼기' on one line. */
@media (max-width: 340px) { .v01-step-row { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 2px; } .v01-step-btn { width: 28px; height: 28px; } }
/* Computer: the three boxes side by side, their two cells stacked so each cell is wide enough for one line. */
@media (min-width: 700px) { .v01-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v01-group-cells { grid-template-columns: minmax(0, 1fr); } }
.v01-section-label { margin: 14px 0 0; font-size: 13px; color: var(--v01-muted); }
.v01-qbar { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; }
.v01-qbar .v01-search-input { flex: 1 1 auto; width: auto; font-size: 15px; }
.v01-search-input::placeholder { color: #8A8174; text-overflow: ellipsis; }
.v01-search-btn { flex: none; }
/* The examples sit under the box in small print, so the box itself only needs a short placeholder that fits 320px. */
.v01-q-hint { margin: 4px 2px 0; color: var(--v01-muted); font-size: 12.5px; line-height: 1.4; }
.v01-all-kinds { margin: 2px 0 10px; }
/* Start-point weather for the chosen day: a light card of its own, big colored icon, numbers in bold. */
.v01-weather { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1px solid #D7E6F5; background: #F3F8FD; font-size: 15px; line-height: 1.45; color: var(--v01-ink); }
.v01-weather-body { display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.v01-weather-text { font-weight: 500; }
.v01-weather[hidden] { display: none; }
.v01-weather svg { flex: none; }
.v01-weather-icon[data-sky="clear"] { color: #E0930F; fill: #FFE8A6; }
.v01-weather-icon[data-sky="cloud"] { color: #5F7690; fill: #E3EAF2; }
.v01-weather-icon[data-sky="wet"] { color: #2466B0; fill: #D8E8FA; }
.v01-weather-num { font-weight: 800; }
.v01-weather-num.is-wet { color: #1D5FB4; }
.v01-weather-src { color: var(--v01-muted); font-size: 12px; }
.v01-rain-note { background: #E1EEF9; }
.v01-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.v01-kind { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--v01-line); border-radius: 999px; background: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; }
.v01-kind.is-on { border-color: var(--v01-ink); background: var(--v01-ink); color: #fff; font-weight: 700; }
.v01-kind-mark:empty { display: none; }
.v01-subs:empty { display: none; }
/* Big 종류: each its own color (wash when off, full color when picked); the open one points down at its blind. */
#v01-kinds .v01-kind[data-kind]:not([data-kind="all"]) { position: relative; padding-left: 6px; border-color: transparent; background: var(--kind-wash); color: var(--kind-tone); font-weight: 600; }
#v01-kinds .v01-kind[data-kind]:not([data-kind="all"]).is-on { border-color: var(--kind-tone); background: var(--kind-tone); color: #fff; }
#v01-kinds .v01-kind.is-open::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--kind-tone); }
.v01-kind-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: var(--kind-tone); font-size: 12px; font-weight: 800; }
/* 하위 종류 of the open 종류: a colored panel that rolls down like a blind. */
.v01-sub-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 14px; border-top: 3px solid var(--kind); background: var(--kind-wash); transform-origin: top; }
.v01-sub-row.is-opening { animation: v01-blind .32s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes v01-blind { from { clip-path: inset(0 0 100% 0 round 14px); opacity: .4; transform: translateY(-6px); } to { clip-path: inset(0 0 0 0 round 14px); opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v01-sub-row.is-opening { animation: none; } }
.v01-sub-head { font-size: 13px; font-weight: 700; color: var(--kind-tone); }
.v01-sub { min-height: 36px; padding: 4px 10px; font-size: 13px; background: #fff; }
.v01-sub::before { display: none; }
.v01-sub.is-on { border-color: var(--kind-tone); background: var(--kind-tone); color: #fff; }
.v01-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-top: 10px; padding: 3px; border: 1px solid var(--v01-line); border-radius: 22px; background: rgba(255,255,255,.75); }
.v01-seg .v01-kind { min-height: 38px; border-color: transparent; background: none; color: var(--v01-muted); }
.v01-seg .v01-kind.is-on { background: var(--v01-ink); color: #fff; }
.v01-inout-unknown { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px dashed #c9a646; border-radius: 6px; background: #fff8dc; color: #5c4a00; font-size: 12px; font-weight: 700; }

.v01-main { max-width: 960px; margin: 0 auto; padding: 0 16px 32px; }
.v01-origin-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin: 8px 0; padding: 10px 14px; border-radius: 14px; background: var(--v01-accent-soft);
}
.v01-origin-note[hidden] { display: none; }
.v01-origin-note p { margin: 0; flex: 1 1 200px; }
.v01-link-btn { border: 0; background: none; padding: 8px 0; min-height: 44px; color: var(--v01-accent); font-weight: 700; text-decoration: underline; }
.v01-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 16px; }
.v01-results-head h2 { margin: 0; font-size: 19px; font-weight: 600; }
.v01-count { color: var(--v01-muted); font-size: 14px; }
.v01-note { margin: 4px 0 8px; color: var(--v01-muted); font-size: 14px; }
.v01-status { margin: 8px 0; font-size: 14px; color: var(--v01-ink); min-height: 1em; }
/* 불러오는 중: a turning mark instead of an empty list (and in the 출발지 sheet while the phone finds the position). */
.v01-loading { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 18px 16px; border: 1px dashed var(--v01-line); border-radius: var(--v01-radius); background: var(--v01-surface); font-size: 15px; color: var(--v01-ink); }
.v01-loading[hidden] { display: none; }
#v01-sheet .v01-loading { padding: 10px 12px; font-size: 14px; }
.v01-spinner { flex: none; width: 22px; height: 22px; border: 3px solid var(--v01-accent-soft); border-top-color: var(--v01-accent); border-radius: 50%; animation: v01-spin .8s linear infinite; }
.v01-loading-text { display: grid; gap: 2px; min-width: 0; }
.v01-loading-slow { font-size: 13px; color: var(--v01-muted); }
.v01-loading-slow[hidden] { display: none; }
@keyframes v01-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .v01-spinner { animation-duration: 2.4s; } }
.v01-footnote { margin-top: 24px; font-size: 13px; color: var(--v01-muted); }
.v01-signature { margin-top: 6px; font-size: 12px; letter-spacing: .06em; }
.v01-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; }
.v01-legal a { color: inherit; text-underline-offset: 3px; min-height: 24px; display: inline-flex; align-items: center; }
.v01-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v01-collecting { margin-top: 20px; }
.v01-collecting[hidden] { display: none; }
.v01-collecting h3 { margin: 0; font-size: 17px; }

/* ---- cards: photo slot (kind icon when none) and one wash circle spilling in from the right ---- */
.v01-card { position: relative; overflow: hidden; background: rgba(255,255,255,.92); border: 1px solid var(--v01-line); border-radius: var(--v01-radius); }
.v01-card::before { content: ""; position: absolute; width: 200px; height: 200px; right: -84px; top: -70px; border-radius: 50%; background: var(--kind-wash, #F1ECE3); pointer-events: none; }
.v01-card.is-visited { background: rgba(250,248,244,.95); }
.v01-card-btn { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start; width: 100%; padding: 12px; border: 0; background: none; text-align: left; border-radius: var(--v01-radius); }
.v01-card-body { display: grid; gap: 2px; min-width: 0; }
.v01-card-photo { display: grid; place-items: center; width: 88px; height: 88px; overflow: hidden; border-radius: 14px; background: var(--kind-wash, #F1ECE3); }
.v01-card-photo img { width: 100%; height: 100%; object-fit: contain; }
.v01-card-icon { display: grid; place-items: center; color: var(--kind-tone, var(--v01-muted)); }
.v01-photo { margin: 4px 0 12px; }
.v01-photo img { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: 14px; background: #F1ECE3; }
.v01-photo figcaption { margin-top: 4px; color: var(--v01-muted); font-size: 12px; }
/* Detail photos: one at a time, swiped sideways (scroll snap); ‹ n / m › under them when there is more than one. */
.v01-photo-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 14px; background: #F1ECE3; scrollbar-width: none; }
.v01-photo-strip::-webkit-scrollbar { display: none; }
.v01-photo .v01-photo-strip img { flex: 0 0 100%; width: 100%; height: 240px; max-height: none; object-fit: contain; border-radius: 0; scroll-snap-align: center; }
.v01-photo-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; }
.v01-photo-nav[hidden] { display: none; }
.v01-photo-count { min-width: 48px; text-align: center; color: var(--v01-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.v01-photo-kakao { margin: 4px 0 12px; }
.v01-photo-kakao .v01-photo-none { margin-bottom: 8px; }
.v01-photo-prev, .v01-photo-next { min-width: 40px; font-size: 18px; line-height: 1; }
.v01-photo-none { margin: 4px 0 12px; padding: 12px; border-radius: 14px; background: #F4EFE6; color: var(--v01-muted); font-size: 14px; }
.v01-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v01-rank { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--v01-navy); color: #fff; font-size: 13px; font-weight: 700; }
.v01-card-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 17px; }
.v01-badge { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: #EFE9DF; color: #3A3F47; font-size: 13px; font-weight: 700; }
.v01-card-kind { color: var(--kind-tone, var(--v01-muted)); font-size: 13px; letter-spacing: .02em; }
/* Romanized reading of a Korean name (no screen-language name found): small, under the name. */
.v01-card-roman { color: var(--v01-muted); font-size: 12px; overflow-wrap: anywhere; }
.v01-card-when { font-size: 14px; font-weight: 700; color: var(--v01-ink); }
.v01-card-when.is-now { color: var(--v01-accent); }
.v01-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 4px 0 0; font-size: 13px; color: var(--v01-muted); }
.v01-card-time { font-size: 15px; font-weight: 800; color: var(--v01-ink); }
/* Filled in from a little beyond the travel time. */
.v01-beyond { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #FCEBDD; color: #8A3A12; font-size: 12px; font-weight: 700; }
/* Above the list: name search inside the suggestions + '다른 후보 보기'. */
.v01-list-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.v01-list-tools[hidden] { display: none; }
.v01-filter { flex: 1 1 180px; width: auto; }
.v01-more { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--v01-accent); border-color: #B5DEE3; background: var(--v01-accent-soft); }
#v01-filter-none:empty { display: none; }
.v01-list-foot { margin-top: 16px; font-size: 13px; }
.v01-dot { color: var(--v01-muted); }

.v01-sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.v01-sheet[hidden] { display: none; }
.v01-sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 26, 34, .45); }
.v01-sheet-panel {
  position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  background: var(--v01-bg); border-radius: 22px 22px 0 0; padding: 14px 16px 24px;
}
@media (min-width: 700px) {
  .v01-brandbar { display: flex; gap: 14px; }
  .v01-by { margin-left: 0; padding-left: 14px; border-left: 1px solid var(--v01-line); }
  .v01-tools { margin-left: auto; }
  .v01-lang-short { display: none; }
  .v01-lang-long { display: inline; }
  .v01-promo { margin: 12px auto 4px; width: calc(100% - 32px); aspect-ratio: 3.1 / 1; }
  .v01-promo-text { left: 28px; bottom: 34px; font-size: 24px; }
  .v01-chip-origin { flex-basis: 100%; }
  .v01-sheet { align-items: center; }
  .v01-sheet-panel { border-radius: 22px; max-height: 86vh; }
  .v01-title { font-size: 28px; }
  .v01-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v01-card-btn { grid-template-columns: 108px minmax(0, 1fr); }
  .v01-card-photo { width: 108px; height: 108px; }
}
/* ---- first-screen mood photo: soft, behind the top of the page, fading into the cream background ---- */
.v01-mood { position: absolute; left: 0; right: 0; top: 0; height: 460px; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.6) 75%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.6) 75%, transparent 100%); }
.v01-mood[hidden] { display: none; }
/* Text that can sit on the photo keeps a faint cream halo so it stays readable. */
.v01-by, .v01-eyebrow, .v01-title, .v01-section-label, .v01-weather { text-shadow: 0 0 6px rgba(255,250,243,.95), 0 0 2px rgba(255,250,243,.9); }
.v01-mood img { width: 100%; height: 100%; object-fit: cover; opacity: .72; filter: brightness(1.08) saturate(1.05); }
@media (min-width: 700px) { .v01-mood { height: 560px; } }

/* ---- season background: a fixed layer behind everything; few items; paused when the page is hidden ---- */
.v01-season { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.v01-season[hidden] { display: none; }
.v01-brandbar, .v01-promo, .v01-top, .v01-main { position: relative; z-index: 1; }
.v01-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Three nested moves, transform only: the item falls (outer), sways side to side with a small tilt (middle) and slowly
   turns (shape). Depth sets size, speed and strength through the custom properties. */
.v01-flake { position: absolute; top: -12vh; left: var(--x); opacity: var(--o); will-change: transform;
  animation: v01-drop var(--d) linear var(--delay) infinite; }
.v01-sway { display: block; animation: v01-sway var(--sw) ease-in-out var(--delay) infinite alternate; }
.v01-shape { display: block; width: var(--s); height: var(--s); animation: v01-spin var(--sp) linear infinite; animation-direction: var(--dir, normal); }
.v01-season.is-paused .v01-flake, .v01-season.is-paused .v01-sway, .v01-season.is-paused .v01-shape { animation-play-state: paused; }
@keyframes v01-drop { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 118vh, 0); } }
@keyframes v01-sway { from { transform: translateX(calc(var(--amp) * -1)) rotate(-14deg); } to { transform: translateX(var(--amp)) rotate(14deg); } }
@keyframes v01-spin { to { transform: rotate(360deg); } }
.v01-petal { height: calc(var(--s) * .8); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #FBD3DC, #F4AFC0); }
.v01-leaf-ginkgo { color: #EDBB2F; }
.v01-leaf-maple.is-red { color: #D2452A; }
.v01-leaf-maple.is-orange { color: #EB7A2C; }
.v01-snow { color: #8DB7DB; filter: drop-shadow(0 0 1px rgba(255,255,255,.9)); }
body.v01-season-summer { background: radial-gradient(120% 55% at 0% 0%, #D6EEF8 0%, rgba(214,238,248,0) 62%), radial-gradient(90% 55% at 100% 100%, #DDF1EC 0%, rgba(221,241,236,0) 65%), #F7FBFB; background-attachment: fixed; }
@media (prefers-reduced-motion: reduce) { .v01-flake, .v01-sway, .v01-shape { animation: none; } .v01-flake { display: none; } }

/* ---- touch motion: pressed (slightly smaller) and appear (fade up). All off with 동작 줄이기. ---- */
.v01-chip, .v01-kind, .v01-option, .v01-card-btn, .v01-map-btn, .v01-primary, .v01-secondary, .v01-small, .v01-preset, .v01-visit, .v01-lang, .v01-tool, .v01-close, .v01-promo-close, .v01-food-item, .v01-review-link {
  transition: transform .12s ease, background-color .2s ease, border-color .2s ease;
}
.v01-chip:active, .v01-kind:active, .v01-option:active, .v01-map-btn:active, .v01-primary:active, .v01-secondary:active, .v01-small:active, .v01-preset:active, .v01-visit:active, .v01-lang:active, .v01-tool:active, .v01-close:active, .v01-promo-close:active, .v01-food-item:active, .v01-review-link:active { transform: scale(.96); }
.v01-card-btn:active { transform: scale(.985); }
@keyframes v01-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v01-sheet-up { from { opacity: .4; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.v01-list .v01-card { animation: v01-appear .35s ease both; animation-delay: calc(min(var(--i, 0), 8) * 40ms); }
.v01-sheet:not([hidden]) .v01-sheet-panel { animation: v01-sheet-up .25s ease both; }
@media (prefers-reduced-motion: reduce) {
  .v01-promo-slide, .v01-promo-slide.is-on, .v01-promo-dot::before { transition: none; }
  .v01-chip, .v01-kind, .v01-option, .v01-card-btn, .v01-map-btn, .v01-primary, .v01-secondary, .v01-small, .v01-preset, .v01-visit, .v01-lang, .v01-tool, .v01-close, .v01-promo-close, .v01-food-item, .v01-review-link { transition: none; }
  .v01-chip:active, .v01-kind:active, .v01-option:active, .v01-card-btn:active, .v01-map-btn:active, .v01-primary:active, .v01-secondary:active, .v01-small:active, .v01-preset:active, .v01-visit:active, .v01-lang:active, .v01-tool:active, .v01-close:active, .v01-promo-close:active, .v01-food-item:active, .v01-review-link:active { transform: none; }
  .v01-list .v01-card, .v01-sheet:not([hidden]) .v01-sheet-panel { animation: none; }
}
.v01-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.v01-sheet-head h2 { margin: 6px 0; font-size: 19px; font-weight: 600; }
.v01-close { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--v01-line); border-radius: 50%; background: #fff; font-size: 18px; }
.v01-block { margin-top: 16px; }
.v01-block h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.v01-options { display: grid; gap: 8px; margin-top: 8px; }
.v01-option { display: grid; gap: 2px; padding: 12px 14px; min-height: 52px; text-align: left; border: 1px solid var(--v01-line); border-radius: 16px; background: #fff; }
.v01-option.is-on { border: 2px solid var(--v01-navy); background: #EEF2F8; }
.v01-option[disabled] { color: var(--v01-muted); background: #F6F2EB; cursor: not-allowed; }
.v01-option-title { font-weight: 700; }
.v01-option-desc { font-size: 14px; color: var(--v01-muted); }
.v01-option-aside { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--v01-muted); white-space: nowrap; }
/* Language sheet: 9 languages in two columns of short buttons (name in its own language + small mark). */
.v01-lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v01-lang-option { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 48px; padding: 10px 12px; }
.v01-lang-option .v01-option-title { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.v01-lang-mark { font-size: 11px; font-weight: 700; color: var(--v01-muted); border: 1px solid var(--v01-line); border-radius: 6px; padding: 1px 5px; }
.v01-lang-option.is-on .v01-lang-mark { color: #fff; background: var(--v01-navy); border-color: var(--v01-navy); }
.v01-input { width: 100%; min-width: 0; min-height: 46px; padding: 8px 14px; border: 1px solid #C9C1B4; border-radius: 999px; background: #fff; }
.v01-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v01-row .v01-input { flex: 1 1 160px; width: auto; }
.v01-primary, .v01-secondary, .v01-small { min-height: 44px; padding: 8px 16px; border-radius: 999px; font-weight: 700; }
.v01-primary { border: 0; background: var(--v01-ink); color: #fff; }
.v01-secondary { width: 100%; border: 1px solid var(--v01-ink); background: #fff; color: var(--v01-ink); }
.v01-small { border: 1px solid var(--v01-line); background: #fff; font-size: 14px; }
.v01-primary-soft { background: var(--v01-accent-soft); border-color: #B5DEE3; color: var(--v01-accent); }
.v01-danger { color: var(--v01-danger); border-color: #e5c1bb; }
.v01-error { margin: 4px 0 0; color: var(--v01-danger); font-size: 14px; }
.v01-error:empty { display: none; }
.v01-save-form { display: grid; gap: 8px; margin-top: 8px; width: 100%; }
.v01-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.v01-preset { min-height: 40px; padding: 4px 12px; border: 1px solid var(--v01-line); border-radius: 999px; background: #fff; font-size: 14px; }
.v01-saved-list, .v01-suggest, .v01-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v01-saved { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--v01-line); border-radius: 16px; background: #fff; }
.v01-saved.is-on { border-color: var(--v01-navy); background: #EEF2F8; }
.v01-saved-pick { display: grid; gap: 2px; width: 100%; min-height: 44px; border: 0; background: none; text-align: left; padding: 0; }
.v01-saved-name { font-weight: 700; }
.v01-saved-addr { font-size: 13px; color: var(--v01-muted); }
.v01-saved-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.v01-confirm p { margin: 0 0 6px; }
.v01-suggest { margin-top: 8px; }
.v01-suggest-item { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--v01-line); border-radius: 16px; background: #fff; }
.v01-suggest-text { display: grid; }
.v01-suggest-name { font-weight: 700; }
.v01-suggest-sub { font-size: 13px; color: var(--v01-muted); }
.v01-details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--v01-accent); font-weight: 700; }
/* Detail folds (주차 안내·근처 먹거리·주변 숙소): closed at first. */
.v01-fold { margin-top: 12px; border: 1px solid var(--v01-line); border-radius: 16px; background: #fff; }
.v01-fold-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 16px; cursor: pointer; list-style: none; }
.v01-fold-head::-webkit-details-marker { display: none; }
.v01-fold-head { justify-content: flex-start; padding-left: 10px; }
.v01-fold-head h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; }
.v01-fold-mark { flex: none; width: 10px; height: 10px; border-right: 2px solid var(--v01-ink); border-bottom: 2px solid var(--v01-ink); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.v01-fold[open] .v01-fold-mark { transform: rotate(-135deg) translateY(-3px); }
.v01-fold > .v01-block { margin: 0; padding: 0 16px 14px; }
@media (prefers-reduced-motion: reduce) { .v01-fold-mark { transition: none; } }
.v01-sheet-sub { margin: 18px 0 0; font-size: 16px; font-weight: 700; }
.v01-hour-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v01-hour { min-height: 48px; padding: 8px 4px; text-align: center; justify-items: center; }
.v01-detail-kind { margin: 0 0 8px; color: var(--v01-muted); font-size: 14px; }
.v01-detail-ko { margin: -4px 0 10px; color: var(--v01-muted); font-size: 13px; overflow-wrap: anywhere; }
.v01-about-text { margin: 4px 0 8px; font-size: 15px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.v01-facts, .v01-parking-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0; }
.v01-facts dt, .v01-parking-facts dt { color: var(--v01-muted); font-size: 14px; }
.v01-facts dd, .v01-parking-facts dd { margin: 0; font-weight: 600; }
.v01-review-link { display: block; padding: 10px 14px; min-height: 44px; border: 1px solid var(--v01-line); border-radius: 14px; background: #fff; color: var(--v01-accent); text-decoration: none; }
.v01-review-link.is-disabled { color: #767c85; background: #F6F2EB; border-style: dashed; cursor: not-allowed; }
.v01-map-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.v01-map-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 14px 8px 10px; border: 1px solid var(--v01-ink); border-radius: 999px; background: #fff; color: var(--v01-ink); font-weight: 700; text-align: center; text-decoration: none; }
.v01-map-route { background: var(--v01-ink); color: #fff; }
.v01-map-btn.is-disabled { color: #767c85; background: #F6F2EB; border: 1px dashed #C9C1B4; cursor: not-allowed; }
.v01-inline-link { color: var(--v01-accent); font-weight: 700; }
.v01-food-head { margin: 10px 0 6px; font-size: 14px; color: var(--v01-muted); }
.v01-food-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.v01-food-item { display: grid; gap: 2px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--v01-line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; }
.v01-food-item.is-disabled { background: #F6F2EB; border-style: dashed; cursor: not-allowed; }
.v01-food-name { font-weight: 700; color: var(--v01-accent); }
.v01-food-item.is-disabled .v01-food-name { color: #5f6570; }
.v01-food-sub { font-size: 13px; color: var(--v01-muted); }
.v01-visit { width: 100%; margin-top: 16px; min-height: 52px; border: 2px solid var(--v01-ink); border-radius: 999px; background: #fff; color: var(--v01-ink); font-weight: 800; font-size: 17px; }
.v01-visit.is-on { background: var(--v01-ink); color: #fff; }
.v01-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v01-toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70;
  width: min(92vw, 460px); padding: 12px 16px; border-radius: 14px;
  background: #1F2733; color: #fff; font-size: 15px; text-align: center;
}
.v01-toast[hidden] { display: none; }

/* ---- icon tiles: every icon in a rounded square (14px corners) with a light wash of its box color, a 1px border one
   step darker and a faint shadow. lg 48 for big items, sm 36 for small items, xs 28 inside chips and buttons. ---- */
.v01-tile {
  --t-bg: var(--tile-neutral-bg); --t-line: var(--tile-neutral-line); --t-ink: var(--tile-neutral-ink);
  --t-size: var(--tile-sm); --t-icon: var(--tile-icon-sm); --t-stroke: var(--tile-stroke-sm);
  display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
  width: var(--t-size); height: var(--t-size); border-radius: var(--tile-radius);
  border: var(--tile-border) solid var(--t-line); background: var(--t-bg); color: var(--t-ink); box-shadow: var(--tile-shadow);
  line-height: 0;
}
.v01-tile-lg { --t-size: var(--tile-lg); --t-icon: var(--tile-icon-lg); --t-stroke: var(--tile-stroke-lg); }
.v01-tile-xs { --t-size: var(--tile-xs); --t-icon: var(--tile-icon-xs); --t-stroke: var(--tile-stroke-xs); border-radius: 10px; }
.v01-tile > svg { display: block; width: var(--t-icon); height: var(--t-icon); stroke-width: var(--t-stroke); color: inherit; }
.v01-tile[data-tone="sky"] { --t-bg: var(--tile-sky-bg); --t-line: var(--tile-sky-line); --t-ink: var(--tile-sky-ink); }
.v01-tile[data-tone="apricot"] { --t-bg: var(--tile-apricot-bg); --t-line: var(--tile-apricot-line); --t-ink: var(--tile-apricot-ink); }
.v01-tile[data-tone="green"] { --t-bg: var(--tile-green-bg); --t-line: var(--tile-green-line); --t-ink: var(--tile-green-ink); }
.v01-tile[data-tone="lavender"] { --t-bg: var(--tile-lavender-bg); --t-line: var(--tile-lavender-line); --t-ink: var(--tile-lavender-ink); }
.v01-tile[data-tone="teal"] { --t-bg: var(--tile-teal-bg); --t-line: var(--tile-teal-line); --t-ink: var(--tile-teal-ink); }
/* Kind color: wash inside, border mixed one step toward the kind tone. */
.v01-tile[data-tone="kind"] { --t-bg: var(--kind-wash, var(--tile-neutral-bg)); --t-line: color-mix(in srgb, var(--kind-tone, #8A8174) 32%, var(--kind-wash, #fff)); --t-ink: var(--kind-tone, var(--tile-neutral-ink)); }
/* Sun in a deeper amber so it keeps 3:1 on the apricot wash. */
.v01-tile[data-tone="apricot"] > .v01-weather-icon { color: #B8740A; }
/* Card with no photo: the kind tile in the middle of the wash square. */
.v01-card-photo.is-empty .v01-tile { background: #fff; }
/* On a dark (picked) chip or the dark route button the tile keeps its light wash, so the icon stays clear. */
.v01-kind.is-on .v01-tile, .v01-map-route .v01-tile { box-shadow: none; }
.v01-map-btn.is-disabled .v01-tile { opacity: .7; }