designpaca/apps/site/public/work/thursday-flowers/index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <!-- viewport-fit=cover 가 있어야 하단 행동 바의 env(safe-area-inset-bottom) 이 0이 아니다 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <title>목요일의 화원 | 목요일에만 여는 서촌 꽃집</title>
    <meta
      name="description"
      content="매주 목요일 10시부터 19시까지만 여는 서울 서촌의 꽃집. 이번 주 목요일에 들이는 꽃 여섯 가지와 주문 마감(수요일 18시), 격주 정기 구독, 오시는 길."
    />
    <meta property="og:title" content="목요일의 화원 | 목요일에만 여는 서촌 꽃집" />
    <meta
      property="og:description"
      content="이번 주 목요일에 들이는 꽃 여섯 가지. 주문 마감은 수요일 18시, 제작은 최대 20건."
    />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta property="og:image" content="./assets/flower-01.webp" />
    <meta name="theme-color" content="#f7ebe9" />

    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
    <!--
      표제: 리디바탕(리디주식회사, SIL OFL 1.1). 배포처 ridicorp.com/ridibatang 은 페처에 403을 내
      fonts-archive 미러(README에 OFL 전문 인용)의 다이나믹 서브셋 CSS로 싣는다. 패밀리명 "RIDI Batang".
      본문: Pretendard 가변 다이나믹 서브셋.
    -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/fonts-archive/RIDIBatang/subsets/RIDIBatang-dynamic-subset.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css"
    />
    <link rel="stylesheet" href="./styles/main.css?v=20261006" />
    <link
      rel="icon"
      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 30V16a10 10 0 0 1 20 0v14z' fill='%232f6b33'/%3E%3C/svg%3E"
    />
  </head>

  <body>
    <a class="skip" href="#main">본문으로 건너뛰기</a>

    <!--
      내비 없음. 한 장짜리이고 섹션이 넷, 행동은 "예약" 하나다(layout §2-c).
      브랜드 표기와 행동 하나만 둔다. 모바일에서는 이 행동이 하단 고정 바로 내려간다.
    -->
    <header class="site-head wrap">
      <p class="wordmark">목요일의 화원</p>
      <a class="btn head-cta" href="#contact">이번 주 주문 예약</a>
    </header>

    <main id="main">
      <!--
        히어로 = 이번 주 꽃 목록 격자. 표제는 작고 격자가 주인이다(layout §2-b 격자·목록).
        사진이 있는 꽃 넷은 아치 창으로, 아직 사진이 없는 둘은 같은 아치에 이름만 둔다.
        첫 화면에서 한 번만 순서대로 떠오른다(스태거). 스크롤 리빌은 없다.
      -->
      <section id="work" class="hero wrap" aria-labelledby="hero-h">
        <div class="hero-head">
          <h1 id="hero-h" class="hero-h">이번 주 목요일에 들이는 꽃 여섯 가지</h1>
          <dl class="hero-facts">
            <div>
              <dt>주문 마감</dt>
              <dd>수요일 18:00</dd>
            </div>
            <div>
              <dt>이번 주 제작</dt>
              <dd>최대 20건</dd>
            </div>
          </dl>
        </div>

        <ol class="flower-grid" aria-label="이번 주 꽃 목록">
          <li class="cell" style="--i: 0">
            <figure class="arch">
              <img
                src="./assets/flower-01.webp"
                alt="흰 작약과 라넌큘러스, 유칼립투스를 묶은 꽃다발"
                width="1086"
                height="1448"
                loading="eager"
                fetchpriority="high"
              />
            </figure>
            <h2 class="name">작약</h2>
            <p class="note">흰색. 이번 주 꽃다발의 중심입니다.</p>
          </li>
          <li class="cell" style="--i: 1">
            <figure class="arch">
              <img
                src="./assets/flower-03.webp"
                alt="크림색 라넌큘러스 꽃잎을 가까이 찍은 사진"
                width="1086"
                height="1448"
                loading="eager"
              />
            </figure>
            <h2 class="name">라넌큘러스</h2>
            <p class="note">크림색. 꽃잎이 얇아 화병에 오래 둡니다.</p>
          </li>
          <li class="cell" style="--i: 2">
            <figure class="arch arch-dahlia">
              <img
                src="./assets/flower-02.webp"
                alt="나무 작업대 위에 놓인 연분홍 다알리아 한 송이"
                width="1448"
                height="1086"
                loading="eager"
              />
            </figure>
            <h2 class="name">다알리아</h2>
            <p class="note">연분홍. 한 송이로 쓰거나 꽃다발 가운데에 둡니다.</p>
          </li>
          <li class="cell" style="--i: 3">
            <figure class="arch arch-scabiosa">
              <img
                src="./assets/flower-05.webp"
                alt="손으로 줄기를 잡고 가위로 다듬는 자줏빛 스카비오사"
                width="1086"
                height="1448"
                loading="lazy"
              />
            </figure>
            <h2 class="name">스카비오사</h2>
            <p class="note">자줏빛. 줄기를 길게 남겨 손질합니다.</p>
          </li>
          <li class="cell" style="--i: 4">
            <div class="arch arch-empty" aria-hidden="true">
              <svg viewBox="0 0 48 48" class="leaf" focusable="false">
                <path d="M8 40C8 22 20 10 40 8c-2 20-14 32-32 32z" />
                <path d="M10 38 36 12" stroke-linecap="round" />
              </svg>
            </div>
            <h2 class="name">유칼립투스</h2>
            <p class="note">사진은 목요일 아침에 올립니다. 꽃다발의 잎으로 씁니다.</p>
          </li>
          <li class="cell" style="--i: 5">
            <div class="arch arch-empty" aria-hidden="true">
              <svg viewBox="0 0 48 48" class="leaf" focusable="false">
                <path d="M8 40C8 22 20 10 40 8c-2 20-14 32-32 32z" />
                <path d="M10 38 36 12" stroke-linecap="round" />
              </svg>
            </div>
            <h2 class="name">스위트피</h2>
            <p class="note">사진은 목요일 아침에 올립니다. 연보라와 분홍이 섞여 옵니다.</p>
          </li>
        </ol>
        <p class="hero-foot">
          목요일 새벽 시장에서 그날 상태를 보고 들입니다. 상태가 나쁜 꽃은 목록에 있어도 빼고,
          대신 들인 꽃은 당일 알려 드립니다.
        </p>
      </section>

      <!-- 왜 목요일인가 — 이름이 곧 운영 방식이다. 사실 세 줄과 작업실 사진 하나 -->
      <section id="thursday" class="section wrap two" aria-labelledby="thursday-h">
        <div class="two-text">
          <h2 id="thursday-h">목요일 10시부터 19시까지, 일주일에 하루만 엽니다</h2>
          <p>
            수요일 밤에 경매가 끝나고 목요일 새벽 시장에 그 주의 꽃이 나옵니다. 그날 좋은 것만
            골라 그날 만듭니다. 남는 꽃이 없어서 시들 일도 없습니다.
          </p>
          <p>
            나머지 요일에는 제작하지 않습니다. 꽃을 미리 사 두면 파는 날까지 신선도가 떨어지기
            때문입니다.
          </p>
          <dl class="facts">
            <div>
              <dt>여는 날</dt>
              <dd>매주 목요일 10:00–19:00</dd>
            </div>
            <div>
              <dt>주문 마감</dt>
              <dd>수요일 18:00</dd>
            </div>
            <div>
              <dt>그 주 제작 수</dt>
              <dd>최대 20건</dd>
            </div>
          </dl>
        </div>
        <figure class="two-photo">
          <img
            src="./assets/flower-04.webp"
            alt="창가 자연광이 드는 작업실, 양철 양동이에 담긴 꽃들과 나무 선반"
            width="1600"
            height="900"
            loading="lazy"
          />
          <figcaption>서촌 작업실, 목요일 아침</figcaption>
        </figure>
      </section>

      <!-- 정기 구독. 주 행동(예약)과 경쟁하지 않게 조용한 링크 하나 -->
      <section id="subscribe" class="section band" aria-labelledby="sub-h">
        <div class="wrap sub-inner">
          <h2 id="sub-h">격주 목요일에 새 꽃을 놓고 지난 꽃을 거둬 갑니다</h2>
          <div class="sub-text">
            <p>
              사무실 응접실, 매장 카운터처럼 꽃을 늘 두어야 하는 곳을 위한 정기 구독입니다.
              화병은 저희 것을 놓아 드립니다.
            </p>
            <p>
              놓을 자리와 조명을 먼저 확인해야 해서 첫 회는 방문 상담으로 시작합니다. 상담은
              목요일 영업시간 안에 잡습니다.
            </p>
            <a class="link" href="#contact">정기 구독 상담도 아래 연락처로 받습니다</a>
          </div>
        </div>
      </section>

      <!-- 예약·문의 — 페이지의 유일한 행동이 도착하는 곳. 폼은 없고 연락처 셋이다 -->
      <section id="contact" class="section wrap contact" aria-labelledby="contact-h">
        <h2 id="contact-h">수요일 18시 전에 예약하면 이번 주 목요일에 받습니다</h2>
        <p class="lead">
          받는 분, 놓을 장소, 예산을 알려 주시면 이번 주 꽃으로 가능한 구성을 답해 드립니다.
          20건이 차면 바로 알려 드립니다.
        </p>
        <ul class="contact-list">
          <li>
            <span class="label">전화</span>
            <a class="link" href="tel:0212345678">02-1234-5678</a>
          </li>
          <li>
            <span class="label">메일</span>
            <a class="link" href="mailto:hello@thursday.flowers">hello@thursday.flowers</a>
          </li>
          <li>
            <span class="label">인스타그램</span>
            <a class="link" href="https://instagram.com" rel="noopener">@thursday.flowers</a>
          </li>
        </ul>
      </section>
    </main>

    <!-- 푸터 = 연락처·영업시간 카드(layout §2-d). 찾아가는 곳이라 이 형태다 -->
    <footer id="visit" class="site-foot wrap" aria-labelledby="visit-h">
      <div class="foot-card">
        <div class="foot-col">
          <h2 id="visit-h" class="foot-h">찾아오는 길과 여는 시간</h2>
          <address class="foot-address">
            서울 종로구 자하문로 00길 00, 2층<br />
            경복궁역 3번 출구에서 도보 8분
          </address>
        </div>
        <dl class="foot-hours">
          <div>
            <dt>목요일</dt>
            <dd>10:00–19:00</dd>
          </div>
          <div>
            <dt>금요일부터 수요일</dt>
            <dd>쉽니다. 방문은 미리 연락 주세요</dd>
          </div>
          <div>
            <dt>전화</dt>
            <dd><a class="link" href="tel:0212345678">02-1234-5678</a></dd>
          </div>
          <div>
            <dt>메일</dt>
            <dd><a class="link" href="mailto:hello@thursday.flowers">hello@thursday.flowers</a></dd>
          </div>
        </dl>
      </div>
      <p class="foot-mark">목요일의 화원</p>
    </footer>

    <!--
      모바일 하단 고정 행동 바(layout §2-c). 768px 이하에서만 보인다.
      본문 가림은 body 의 padding-bottom 과 섹션의 scroll-margin-bottom 으로 막는다.
    -->
    <div class="action-bar">
      <a class="btn btn-bar" href="#contact">이번 주 주문 예약</a>
      <a class="btn btn-quiet btn-bar-phone" href="tel:0212345678">전화</a>
    </div>
  </body>
</html>