From b7b8cb856cb4c99f37fe54dd6b4dd6e0a72dab32 Mon Sep 17 00:00:00 2001
From: Mina Choi <mnchoi@o2o.kr>
Date: Wed, 23 Sep 2026 13:18:02 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20solution/site:=20=ED=9D=90=EB=A6=B0=20?=
 =?UTF-8?q?=EB=B3=B4=EC=A1=B0=20=EA=B8=80=EC=9E=90=20=EB=8C=80=EB=B9=84=20?=
 =?UTF-8?q?=EC=98=AC=EB=A6=BC=20=C2=B7=20=EC=98=88=EC=95=BD=20=EB=8B=AC?=
 =?UTF-8?q?=EB=A0=A5=20=EA=B8=B0=EB=B3=B8=EC=9C=BC=EB=A1=9C=20=ED=8E=BC?=
 =?UTF-8?q?=EC=B9=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

여러 섹션의 opacity-55~70 짜리 보조 텍스트가 밝은 배경에서 너무 흐렸다 — 85~100 으로
올림(Carousel 카운터·SectionHead 리드문·SNS 소식·주변 안내 거리·공식 채널 링크).
StayBookingDemo: "날짜·시간 선택" 토글을 없애고 달력을 기본으로 펼쳐 보여준다 —
접어 두면 손님이 그 버튼을 눌러야만 날짜를 볼 수 있었다.
---
 solution/site/src/layouts/editorial/Shell.tsx |  2 +-
 .../site/src/layouts/pastel/SectionHead.tsx   |  2 +-
 solution/site/src/lib/ui/Carousel.tsx         |  2 +-
 .../site/src/sections/LocalGuideSection.tsx   |  2 +-
 solution/site/src/sections/MobileTabBar.tsx   |  6 +++---
 .../site/src/sections/SocialPostsSection.tsx  |  4 ++--
 .../site/src/sections/StayBookingDemo.tsx     | 19 ++-----------------
 solution/site/src/sections/WeatherSection.tsx |  4 ++--
 8 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/solution/site/src/layouts/editorial/Shell.tsx b/solution/site/src/layouts/editorial/Shell.tsx
index 9dfcd8c..ab3ce9b 100644
--- a/solution/site/src/layouts/editorial/Shell.tsx
+++ b/solution/site/src/layouts/editorial/Shell.tsx
@@ -154,7 +154,7 @@ export function Shell({children}: {children: ReactNode}) {
                       href={link.url}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="underline underline-offset-4 opacity-80 transition-opacity hover:opacity-100"
+                      className="underline underline-offset-4 opacity-90 transition-opacity hover:opacity-100"
                     >
                       {channelLabel(link)}
                     </a>
diff --git a/solution/site/src/layouts/pastel/SectionHead.tsx b/solution/site/src/layouts/pastel/SectionHead.tsx
index 1800ea1..e426f92 100644
--- a/solution/site/src/layouts/pastel/SectionHead.tsx
+++ b/solution/site/src/layouts/pastel/SectionHead.tsx
@@ -38,7 +38,7 @@ export function SectionHead({
 
       {/* 설명은 한 줄이다. 없으면 그리지 않는다 — 없는 문구를 지어내지 않는다. */}
       {lead && (
-        <p className="measure text-[length:var(--fs-sm)] leading-relaxed opacity-65">{lead}</p>
+        <p className="measure text-[length:var(--fs-sm)] leading-relaxed opacity-85">{lead}</p>
       )}
 
       {aside && <div className="text-[length:var(--fs-sm)]">{aside}</div>}
diff --git a/solution/site/src/lib/ui/Carousel.tsx b/solution/site/src/lib/ui/Carousel.tsx
index bd14d1a..cd2346a 100644
--- a/solution/site/src/lib/ui/Carousel.tsx
+++ b/solution/site/src/lib/ui/Carousel.tsx
@@ -257,7 +257,7 @@ export function Carousel({
               ))}
             </ul>
           )}
-          <span className="text-current/80 text-[length:var(--fs-xs)] tabular-nums">
+          <span className="text-current/90 text-[length:var(--fs-xs)] tabular-nums">
             {selected + 1} / {snaps.length}
           </span>
         </div>
diff --git a/solution/site/src/sections/LocalGuideSection.tsx b/solution/site/src/sections/LocalGuideSection.tsx
index 6b0d3ec..235bfe2 100644
--- a/solution/site/src/sections/LocalGuideSection.tsx
+++ b/solution/site/src/sections/LocalGuideSection.tsx
@@ -261,7 +261,7 @@ function PlaceList({
             {(Number.isFinite(distanceOf(open)) || open.distanceText) && (
               <p className="text-[length:var(--fs-sm)] font-semibold opacity-100">
                 {walkText(distanceOf(open)) ?? open.distanceText}
-                {open.distanceText && <span className="ml-1 font-normal opacity-70">{open.distanceText}</span>}
+                {open.distanceText && <span className="ml-1 font-normal opacity-85">{open.distanceText}</span>}
               </p>
             )}
             {open.location && (
diff --git a/solution/site/src/sections/MobileTabBar.tsx b/solution/site/src/sections/MobileTabBar.tsx
index ddff550..a137803 100644
--- a/solution/site/src/sections/MobileTabBar.tsx
+++ b/solution/site/src/sections/MobileTabBar.tsx
@@ -60,7 +60,7 @@ export function MobileTabBar() {
       {phone && (
         <a
           href={`tel:${phone}`}
-          className="tap border-line flex flex-1 items-center justify-center gap-1.5 rounded-lg border text-[length:var(--fs-sm)] font-bold"
+          className="tap border-line flex flex-1 items-center justify-center gap-1.5 rounded-lg border px-2 text-[length:var(--fs-sm)] font-bold"
         >
           <Phone className="size-4" />
           <span>전화</span>
@@ -72,7 +72,7 @@ export function MobileTabBar() {
           <button
             type="button"
             onClick={() => setBookingOpen(true)}
-            className="tap flex min-w-0 flex-[1.4] items-center justify-center truncate rounded-lg px-2 text-[length:var(--fs-sm)] font-bold"
+            className="tap flex min-w-0 flex-1 items-center justify-center truncate rounded-lg border border-transparent px-2 text-[length:var(--fs-sm)] font-bold"
             style={{backgroundColor: 'var(--color-brand)', color: 'var(--tpl-bg, #fff)'}}
           >
             예약하기
@@ -82,7 +82,7 @@ export function MobileTabBar() {
             href={booking.url}
             target="_blank"
             rel="noopener noreferrer"
-            className="tap flex min-w-0 flex-[1.4] items-center justify-center truncate rounded-lg px-2 text-[length:var(--fs-sm)] font-bold"
+            className="tap flex min-w-0 flex-1 items-center justify-center truncate rounded-lg border border-transparent px-2 text-[length:var(--fs-sm)] font-bold"
             style={{backgroundColor: 'var(--color-brand)', color: 'var(--tpl-bg, #fff)'}}
           >
             {/* ★ channelLabel() 은 수집된 제목("스테이,머뭄 네이버 플레이스")을 준다 —
diff --git a/solution/site/src/sections/SocialPostsSection.tsx b/solution/site/src/sections/SocialPostsSection.tsx
index 414d42d..745e4c6 100644
--- a/solution/site/src/sections/SocialPostsSection.tsx
+++ b/solution/site/src/sections/SocialPostsSection.tsx
@@ -6,9 +6,9 @@ export function SocialPostsSection() {
   if (!posts.length) return null;
   return <section id="social-posts" className="mx-auto w-full max-w-5xl px-6 py-12">
     <h2 className="mb-3 text-2xl font-semibold">함께 발행한 소식</h2>
-    <p className="mb-6 text-sm opacity-70">사장님이 승인해 홈페이지와 Threads에 함께 전한 소식입니다.</p>
+    <p className="mb-6 text-sm opacity-85">사장님이 승인해 홈페이지와 Threads에 함께 전한 소식입니다.</p>
     <div className="grid gap-4 md:grid-cols-3">{posts.map((post) => <article key={post.postId} className="rounded-xl border border-current/15 p-5">
-      <time dateTime={post.postedAt} className="text-sm opacity-70">{new Date(post.postedAt).toLocaleDateString('sv-SE', {timeZone: 'Asia/Seoul'})} (한국시간)</time>
+      <time dateTime={post.postedAt} className="text-sm opacity-85">{new Date(post.postedAt).toLocaleDateString('sv-SE', {timeZone: 'Asia/Seoul'})} (한국시간)</time>
       <p className="my-4 whitespace-pre-wrap break-words">{post.body}</p>
       {post.permalink && <a href={post.permalink} target="_blank" rel="noopener noreferrer" className="text-sm underline underline-offset-4">SNS에 올린 글 보기</a>}
     </article>)}</div>
diff --git a/solution/site/src/sections/StayBookingDemo.tsx b/solution/site/src/sections/StayBookingDemo.tsx
index 320b868..d1a0699 100644
--- a/solution/site/src/sections/StayBookingDemo.tsx
+++ b/solution/site/src/sections/StayBookingDemo.tsx
@@ -1,6 +1,6 @@
 import {useEffect, useMemo, useState} from 'react';
 import {BookingRequestSection} from './BookingRequestSection';
-import {CalendarDays, Check, ChevronLeft, ChevronRight, Clock, Minus, Phone, Plus, RotateCcw} from 'lucide-react';
+import {Check, ChevronLeft, ChevronRight, Clock, Minus, Phone, Plus, RotateCcw} from 'lucide-react';
 import {factText, sanitizeUnits, selectPublishable, type SitePayload} from '@o2o/shared';
 import {useSite} from '@site/lib/site-context';
 import {unitBaseRate} from '@site/seo/jsonld';
@@ -155,10 +155,6 @@ export function StayBookingDemo() {
   const [unitId, setUnitId] = useState<string | null>(units[0]?.unitId ?? null);
   const [guests, setGuests] = useState(2);
   const [submitted, setSubmitted] = useState(false);
-  /* ★ 달력은 접어 둔다. 3.5화면짜리 섹션의 절반이 달력이었는데, 손님 대부분은 예약 창구
-     버튼을 누르러 온다 — 날짜를 고르려는 사람만 펼친다. */
-  const [pickerOpen, setPickerOpen] = useState(false);
-
   const selectedDay = cells.find((cell): cell is DayCell => cell !== null && cell.iso === dateIso) ?? null;
   const selectedUnit = units.find((unit) => unit.unitId === unitId) ?? null;
   const maxGuests = selectedUnit?.maxCapacity ?? 8;
@@ -181,24 +177,13 @@ export function StayBookingDemo() {
       className="mt-4 overflow-hidden rounded-2xl border border-black/8 lg:mt-6"
       style={{backgroundColor: 'var(--color-surface)'}}
     >
-      <button
-        type="button"
-        onClick={() => setPickerOpen((value) => !value)}
-        aria-expanded={pickerOpen}
-        className="tap flex w-full items-center gap-2 border-b border-black/8 px-4 text-[length:var(--fs-sm)] font-bold sm:px-5"
-      >
-        <CalendarDays className="size-4 opacity-100" />
-        <span className="flex-1 text-left">날짜 · 시간 선택</span>
-        <span className="opacity-100">{pickerOpen ? '−' : '+'}</span>
-      </button>
-
       {/* 서버 렌더 · 자바스크립트 꺼짐: 달력 대신 사실만 내보낸다(머리주석). */}
       {today === null || cursor === null ? (
         <p className="px-4 py-6 text-[length:var(--fs-xs)] leading-relaxed opacity-100 sm:px-5">
           날짜 선택은 브라우저에서 열립니다. 실제 예약 가능 여부와 결제는 아래 예약 창구에서
           확인해 주세요.
         </p>
-      ) : !pickerOpen && !submitted ? null : submitted ? (
+      ) : submitted ? (
         <ConfirmPanel
           payload={payload}
           onReset={() => setSubmitted(false)}
diff --git a/solution/site/src/sections/WeatherSection.tsx b/solution/site/src/sections/WeatherSection.tsx
index d49ff95..ca2b4ed 100644
--- a/solution/site/src/sections/WeatherSection.tsx
+++ b/solution/site/src/sections/WeatherSection.tsx
@@ -107,10 +107,10 @@ export function WeatherSection() {
           {bandLine && (
             <p
               key={bandLine}
-              className="w4-note-fade measure flex items-start gap-2.5 text-[length:var(--fs-sm)] leading-relaxed opacity-100"
+              className="w4-note-fade measure flex items-center gap-2.5 text-[length:var(--fs-sm)] leading-relaxed opacity-100"
             >
               <span
-                className="border-line mt-0.5 shrink-0 rounded-full border px-2 py-0.5 text-[length:var(--fs-sm)] font-bold"
+                className="border-line shrink-0 rounded-full border px-2 py-0.5 text-[length:var(--fs-sm)] font-bold"
                 aria-hidden
               >
                 {band}