/* ============================================================================
   flower-store.css — 근조화환 자체 판매(상품 목록·상세·주문·결제)

   @version   1.9.0
   @updated   2026-08-26

   @changelog
   - 1.9.0 (2026-08-26) NICEPAY 저해상도 630px 강제를 대체해 결제 iframe을
     660×900px 이상 확보하고 화면보다 클 때만 레이어 전체를 자동 축소.
   - 1.8.2 (2026-08-24) NICEPAY 내부 종료가 멈출 때 사용할 가맹점 측 보조
     '창 닫기' 버튼 스타일 추가.
   - 1.8.1 (2026-08-24) 실결제창의 약관 버튼이 700px에서도 잘려 iframe 기준
     높이를 900px로 확대. 작은 화면에서는 기존처럼 레이어 전체를 자동 축소한다.
   - 1.8.0 (2026-08-24) 작은 PC 브라우저에서 NICEPAY 약관 하단이
     iframe 밖으로 잘리던 문제를 해결. 결제 레이어 자체를 화면에 맞게 축소한다.

   색은 전부 theme-*.css 의 토큰을 쓴다. 여기에 색을 직접 박으면 사이트마다
   테마가 달라질 때 이 화면만 어긋난다.
   ============================================================================ */

/* ── 바깥 여백 ─────────────────────────────────────────────────────────────
   ⛔ **좌우 여백이 두 겹으로 들어가고 있었다.** `.page`(bugo-common.css)가 18px,
      `.fs-wrap` 이 16px 을 각각 물려 모바일에서 좌우로 34px 씩, 합쳐 68px 을
      먹었다. 폭 360px 화면이면 본문에 292px 밖에 남지 않아 글이 자꾸 접히고
      화면이 세로로 길어진다(2026-08-14 클라이언트 지적).

   그래서 상점 화면(`.page--store`)에서는 `.page` 의 좌우 여백을 없애고
   **`.fs-wrap` 하나만** 여백을 갖게 한다. 상점 뷰 7개가 `page page--store` 를
   달고 있다 — 다른 화면의 여백은 건드리지 않는다.

   ⚠️ `.page` 자체를 고치면 홈·부고장 등 사이트 전체 여백이 함께 바뀐다. */
.page--store { padding-left: 0; padding-right: 0; }

.fs-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}

@media (max-width: 480px) {
    /* 모바일은 화면이 좁을수록 여백의 비중이 커진다 — 한 단계 더 줄인다. */
    .fs-wrap { padding: 12px 10px 32px; }
    .page--store { padding-top: 16px; padding-bottom: 40px; }
}

/* ── 머리글 ───────────────────────────────────────────────────────────────── */

/* 상품 목록 외의 화면(주문서·안내·주문조회·결제)이 쓰는 가벼운 머리글.
   ⚠️ 목록만 아래 `.fs-hero` 로 바꿨다 — 이 규칙을 지우면 나머지 4개 화면의
      머리글이 통째로 민무늬가 된다. */
.fs-head {
    background: linear-gradient(135deg, var(--color-cream-start), var(--color-cream-end));
    border: 1px solid var(--color-cream-border);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.fs-head h1 { font-size: 20px; font-weight: 700; color: var(--color-primary); margin: 0 0 6px; }
.fs-head p  { font-size: 14px; color: var(--color-text-light); margin: 0; line-height: 1.6; }

/* 주문서 전용 — 어두운 머리글(부고장 헤더·상품 목록 히어로와 같은 결).
   2026-08-15 클라이언트 지시: "이 화면이 주문/결제 페이지라는 것만 확실히".

   ⛔ **`.fs-head` 자체를 어둡게 바꾸지 말 것.** 크림색 기본값은 안내·주문조회·결제
      3개 화면이 그대로 쓴다. 여기서 색을 갈면 그 화면들이 함께 바뀐다.
   ⚠️ 어두운 바탕에서는 글자색을 **직접 못박는다.** 지정하지 않으면 테마 기본값
      (짙은 네이비)이 그대로 적용돼 배경에 묻힌다 — 이 저장소의 단골 사고다. */
.fs-head--dark {
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}
.fs-head--dark h1 { color: #fff; margin: 0; }

/* ── 상단 히어로 ───────────────────────────────────────────────────────────
   ⛔ 예전에는 「돌아가기 · 제목 · 배송지」가 각각 **밝은 상자**로 흩어져 있었다.
      아래 상품 카드도 흰 상자라 어디까지가 머리글이고 어디부터가 상품인지
      구분이 되지 않았다(2026-08-14 클라이언트 지적).
      색을 뒤집어(네이비 + 금색) 한 덩어리로 묶으면 그 경계가 생긴다.

   ⚠️ 어두운 바탕에서는 안쪽 글자색을 **하나씩 직접** 지정한다. 지정하지 않으면
      테마 기본값(어두운 색)이 그대로 적용돼 배경에 묻혀 사라진다.
      `a` 는 특히 조심 — theme-hyobugo.css 의 `a:hover` 가 네이비라, 색을 안 박으면
      호버하는 순간 글자가 배경과 같은 색이 된다. */
.fs-hero {
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: 16px;
    padding: 20px 20px 22px;
    margin-bottom: 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
    color: #fff;
    /* 2026-08-14 클라이언트 지시 — 히어로 안쪽 글자는 전부 가운데. */
    text-align: center;
}

/* 「부고장으로 돌아가기」 — 글자 링크에서 **버튼(알약)** 으로 바꿨다(클라이언트 지시).
   ⛔ 링크라서 색을 전부 못박는다. theme-hyobugo.css 의 `a:hover` 가 네이비라,
      지정하지 않으면 호버하는 순간 글자가 히어로 배경과 같은 색이 되어 사라진다. */
.fs-hero-back,
.fs-hero-back:hover,
.fs-hero-back:focus,
.fs-hero-back:active,
.fs-hero-back:visited {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 14px;
}
.fs-hero-back:hover {
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

.fs-hero-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #fff;
    /* 부고장 빈소 머리글과 같은 명조 계열 — 상가(喪家) 화면의 결을 맞춘다. */
    font-family: Georgia, "Noto Serif KR", "Nanum Myeongjo", Batang, serif;
}

/* 금색 장식선 — 부고장 배너(.fw-banner-orn)와 같은 문양. 이미지 없이 CSS 로 그린다.
   ⚠️ 히어로가 가운데 정렬이라 `margin: … auto` 로 **선 자체도 가운데**에 둔다.
      `text-align` 은 블록 요소의 위치를 옮기지 못한다. */
.fs-hero-orn {
    display: block;
    width: 108px;
    height: 9px;
    margin: 12px auto;
    position: relative;
    background:
        linear-gradient(var(--color-accent), var(--color-accent)) left 4px / 44px 1px no-repeat,
        linear-gradient(var(--color-accent), var(--color-accent)) right 4px / 44px 1px no-repeat;
}
.fs-hero-orn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 1px;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    background: var(--color-accent);
    transform: rotate(45deg);
}

.fs-hero-sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
}

/* ⚠️ 배송지 블록(.fs-hero-hall)은 2026-08-14 클라이언트 지시로 **뺐다** —
      상품 상세와 주문서에 이미 나오기 때문이다. 규칙도 함께 지웠으니
      다시 넣을 일이 생기면 `.fs-hall`(상세 화면에서 쓰는 밝은 버전)을 참고할 것. */

@media (max-width: 380px) {
    .fs-hero { padding: 16px 16px 14px; }
    .fs-hero-title { font-size: 21px; }
}

/* 「← 상품 목록」·「← 상품으로 돌아가기」 — 글자 링크에서 **알약 버튼**으로 바꿨다
   (2026-08-15 클라이언트 지적 "잘 안 보인다"). 헤드리스 브라우저로 실제 화면을
   찍어 확인한 원인은 셋이다:
     ① 13px 회색 평문(#6c757d)이 연회색 페이지 배경에 묻혔다
     ② 테두리도 배경도 없어 **누를 수 있는 것인지 알 수 없었다**
     ③ 터치 영역이 글자 높이(약 17px)뿐이라 손가락으로 누르기 어려웠다
   → 흰 알약 + 테두리 + 네이비 굵은 글씨로 바꾸고 상하 여백으로 높이를 키웠다.
      목록 화면의 `.fs-hero-back`(어두운 히어로 위 알약)과 형태를 맞춘 것이다.

   ⛔ 링크라서 색을 **모든 상태에 못박는다.** theme-hyobugo.css 의 `a:hover` 가
      네이비라, 지정하지 않으면 배경색을 바꾼 순간 글자가 묻히는 사고가 반복된다.
   ⚠️ 이 클래스는 상세(item)와 주문서(checkout) **두 화면이 함께 쓴다.** */
.fs-back,
.fs-back:hover,
.fs-back:focus,
.fs-back:active,
.fs-back:visited {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 9px 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}
.fs-back:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border);
}

/* 부고장 경유 시 배송지 안내 박스
   ⛔ 화환이 **실제로 가는 곳**이라 틀리면 되돌릴 수 없다. 2026-08-15 클라이언트
      지시로 흰 상자에서 금색 상자로 바꾸고 글자를 키웠다 — 상품 설명·배송 안내가
      전부 흰 상자라 그 사이에 흰 상자를 하나 더 두면 시선이 그냥 지나간다.
   ⚠️ 왼쪽 금색 막대(border-left 4px)가 강조의 핵심이다. 지우면 다시 묻힌다. */
.fs-hall {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-soft-border);
    border-left: 4px solid var(--color-accent);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.fs-hall .fs-hall-label {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 6px;
    padding: 4px 8px;
}
/* min-width:0 이 없으면 긴 주소가 상자를 밀어 가로 스크롤이 생긴다 */
.fs-hall .fs-hall-body { flex: 1 1 auto; min-width: 0; line-height: 1.5; color: var(--color-text); }
.fs-hall .fs-hall-name { font-size: 16px; font-weight: 700; color: var(--color-primary); }
.fs-hall .fs-hall-room {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent-text);
    background: var(--color-white);
    border: 1px solid var(--color-primary-soft-border);
    border-radius: 5px;
    padding: 1px 6px;
    margin-left: 4px;
    white-space: nowrap;
}
.fs-hall .fs-hall-addr {
    display: block;
    font-size: 13px;
    color: var(--color-text-light);
    margin-top: 4px;
    word-break: keep-all;
}
/* 주문서에서만 쓰는 보조 설명("주소를 입력하지 않으셔도 됩니다") */
.fs-hall .fs-hall-note {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin-top: 6px;
}
/* 주문서는 이 상자가 섹션 안 마지막 요소라 아래 여백이 필요 없다 */
.fs-hall--flat { margin-bottom: 0; }

/* ── 상품 목록 ────────────────────────────────────────────────────────────── */

/* ── 상품 목록 — 2열 그리드 ────────────────────────────────────────────────
   2026-08-14 클라이언트 지시로 가로 리스트에서 **2×2 그리드**로 바꿨다.
   상품이 7종이라 세로로 늘어놓으면 아래쪽 상품은 스크롤해야 보인다.

   ⚠️ 열 수를 미디어쿼리로 나누지 않고 `repeat(2, minmax(0, 1fr))` 로 고정한다 —
      클라이언트가 요청한 것이 "2열"이고, 모바일에서도 PC 에서도 같은 배치여야
      상품 비교가 된다. `minmax(0, …)` 를 빼면 긴 상품명이 열 폭을 밀어내 두 열이
      어긋난다(그리드 기본 min-width 가 auto 라서 생기는 흔한 함정). */
.fs-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.fs-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.fs-card:hover { box-shadow: var(--shadow-sm); border-color: var(--color-primary-border); }

/* ⛔ `cover` 로 자르지 않는다. 화환은 세로로 긴 상품이라 정사각형에 맞춰 자르면
   리본과 받침이 잘려 무엇을 사는지 알 수 없게 된다. `contain` + 고정 높이라
   비율이 제각각인 사진(750x1000 · 1000x1000 · 563x1000)을 섞어도 줄이 맞는다. */
.fs-thumb {
    width: 100%;
    height: 180px;
    border-radius: 10px;
    object-fit: contain;
    background: var(--color-surface-soft);
}
.fs-card-body { flex: 1 1 auto; min-width: 0; }

/* [머리줄] 이미지 바로 아래 — **왼쪽 배송시간 · 오른쪽 뱃지**
   (2026-08-14 클라이언트 지정). 뱃지가 없어도 줄 자체는 남아 카드 높이가
   흔들리지 않는다 — 2열 그리드라 한쪽만 높으면 바로 어긋나 보인다. */
.fs-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 22px;
    margin-bottom: 8px;
}
.fs-card-meta .fs-eta,
.fs-card-meta .fs-soldout { margin-bottom: 0; }
.fs-card-meta .fs-badges { margin-bottom: 0; flex: 0 0 auto; }

/* 카드 안 상품명·가격은 가운데 정렬 (2026-08-14 클라이언트 지시).
   ⚠️ `.fs-name` 은 상세 화면에서 상품 제목(h1)으로도 쓰인다 — 거기서는 왼쪽
      정렬이어야 하므로 **카드 안쪽으로 한정**한다. */
.fs-card .fs-name { text-align: center; }
.fs-card .fs-price { justify-content: center; }

@media (max-width: 380px) {
    .fs-list { gap: 8px; }
    .fs-card { padding: 10px; }
    .fs-thumb { height: 150px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   반입 제한 상품 (2026-08-19)

   장례식장마다 못 들이는 화환이 있다. 조문객이 모르고 결제하면 화환은 못 들어가고
   사장님이 전화로 사과하며 환불해야 한다 — 그래서 **카드 단계에서** 보여 준다.

   ⛔ 카드를 목록에서 지우지 않는다. 지우면 조문객은 "이 상품은 원래 없나 보다"로
      읽고, 왜 못 사는지 알 수 없다. **보여 주되 이유를 함께 적는다.**
   ══════════════════════════════════════════════════════════════════════════ */

/* 썸네일과 안내문을 겹치기 위한 상자. **제한 상품 카드에만** 생긴다
   (정상 카드의 마크업은 손대지 않아 기존 레이아웃이 그대로다). */
.fs-thumb-wrap {
    position: relative;
    display: block;
}

/* 사진은 회색으로 죽인다 — 색이 남아 있으면 안내문이 사진에 묻힌다. */
.fs-card.is-restricted .fs-thumb {
    filter: grayscale(1);
    opacity: .45;
}

/* 안내문은 썸네일 **위에** 덮는다. `.fs-thumb-wrap` 이 기준이라
   썸네일 높이(180px / 380px 미만 150px)가 바뀌어도 따라간다. */
.fs-restricted-note {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 10px;
    background: rgba(90, 90, 96, .58);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    text-align: center;
    /* ⚠️ 한글은 `keep-all` 이 없으면 단어 한가운데서 잘린다
          ('제한되는' → '제한되' / '는'). 읽는 사람이 장례 중이다 — 문장이 깨지면 안 된다. */
    word-break: keep-all;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* 상품명·가격은 남기되 한 단계 죽인다 — 무엇이 제한됐는지는 읽혀야 한다. */
.fs-card.is-restricted .fs-name,
.fs-card.is-restricted .fs-price { opacity: .5; }

/* 카드가 `<div>` 라 눌리지 않는다. 커서·호버도 그에 맞춘다 —
   그림자가 뜨면 눌러도 되는 것처럼 보인다. */
.fs-card.is-restricted { cursor: default; }
.fs-card.is-restricted:hover {
    box-shadow: none;
    border-color: var(--color-border);
}

/* 배송시간 자리를 비워 두되 줄 높이는 유지한다(카드 높이 정렬용). */
.fs-eta.is-hidden { visibility: hidden; }

@media (max-width: 380px) {
    .fs-restricted-note { font-size: 13.5px; padding: 8px; }
}



.fs-eta {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-accent-text);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-soft-border);
    border-radius: 999px;
    padding: 2px 8px;
    margin-bottom: 6px;
}
.fs-name { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0 0 6px; line-height: 1.4; }

/* [상세] 상품명 + 뱃지를 한 줄에 — 뱃지는 이름 오른쪽에 한 칸 띄워 붙는다
   (2026-08-15 클라이언트 지시).
   ⚠️ `baseline` 정렬이라 19px 제목과 11px 뱃지의 글자 밑선이 맞는다.
      `center` 로 바꾸면 뱃지가 제목 한가운데에 떠서 따로 노는 것처럼 보인다.
   ⚠️ 상품명이 길면 뱃지가 아랫줄로 내려간다(`flex-wrap`). 줄바꿈을 막으면
      좁은 화면에서 제목이 잘린다 — 잘리는 쪽이 더 나쁘다. */
.fs-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 10px;
}
.fs-title-row .fs-name   { font-size: 19px; margin: 0; }
.fs-title-row .fs-badges { margin: 0; flex: 0 0 auto; }

.fs-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.fs-badge {
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 6px;
    background: var(--color-primary);
    color: var(--color-white);
}
.fs-badge.is-sale { background: var(--color-accent); color: var(--color-primary); }

/* 가격 — 정가와 판매가가 같으면 PHP 쪽에서 취소선·할인율을 아예 출력하지 않는다 */
.fs-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fs-price .fs-off    { font-size: 14px; font-weight: 800; color: var(--color-danger); }
.fs-price .fs-was    { font-size: 12px; color: var(--color-text-muted); text-decoration: line-through; }
.fs-price .fs-now    { font-size: 17px; font-weight: 800; color: var(--color-primary); }
.fs-price .fs-won    { font-size: 13px; font-weight: 600; color: var(--color-primary); }

.fs-soldout {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-sold);
    background: var(--color-disabled-bg);
    border-radius: 4px;
    padding: 2px 8px;
}

/* ── 상세 ─────────────────────────────────────────────────────────────────── */

.fs-detail-img {
    width: 100%;
    border-radius: 14px;
    background: var(--color-surface-soft);
    display: block;
    margin-bottom: 16px;
}

.fs-section {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
}
.fs-section h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
}
.fs-section p,
.fs-section li { font-size: 14px; line-height: 1.75; color: var(--color-text); }
.fs-section ul { margin: 0; padding-left: 18px; }
.fs-section .fs-muted { color: var(--color-text-muted); font-size: 13px; }

/* 이미지 한 장만 들어가는 칸 — 안쪽 여백을 없애 이미지가 카드에 꽉 차게 한다. */
.fs-section--plain { padding: 0; overflow: hidden; }
.fs-delivery-img { display: block; width: 100%; height: auto; }

/* ── 배송비 추가 지역 (접이식) ─────────────────────────────────────────────
   목록을 다 펼치면 화면이 세 배로 길어져 「구매하기」가 아래로 밀린다.
   기본은 접어 두고 자기 지역이 궁금한 사람만 펴 보게 한다. */
.fs-zone {
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--color-surface-soft);
}
.fs-zone > summary {
    cursor: pointer;
    list-style: none;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 700;
    /* ⛔ 색을 못박는다 — theme-hyobugo.css 의 `a:hover` 함정과 같은 이유로,
       색을 지정하지 않은 대화형 요소는 테마 규칙에 끌려가 배경에 묻힐 수 있다. */
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.fs-zone > summary::-webkit-details-marker { display: none; }
.fs-zone > summary::after {
    content: "▾";
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-muted);
}
.fs-zone[open] > summary::after { content: "▴"; }
.fs-zone[open] > summary { border-bottom: 1px solid var(--color-border-light); }

.fs-zone-tag {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 999px;
    padding: 3px 9px;
}

.fs-zone-list { margin: 0; padding: 12px 14px 12px 30px; }
.fs-zone-list li { font-size: 13px; line-height: 1.8; }
.fs-zone-list b { color: var(--color-primary); font-weight: 700; margin-right: 4px; }

.fs-zone-sub {
    margin: 0;
    padding: 0 14px 12px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--color-text-muted);
}
.fs-zone-sub b { color: var(--color-primary); font-weight: 700; margin-right: 4px; }

/* ── 폼 ───────────────────────────────────────────────────────────────────── */

.fs-field { margin-bottom: 14px; }
.fs-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}
.fs-req { color: var(--color-danger); }

/* 입력칸 — **세 가지 상태**로 구분한다 (2026-08-15 클라이언트 지시:
   "전체가 흰색이라 어디를 입력하는 곳인지, 어디를 못 채웠는지 모르겠다").

     ① 기본        : 회색 바탕 + 또렷한 테두리  → "여기가 입력하는 곳"
     ② 안 채운 필수칸: 금색 테두리 + 크림 바탕    → "여기를 아직 안 채웠다"
     ③ 채운 칸      : 흰 바탕 + 회색 테두리      → "여기는 끝났다"

   ⭐ ②는 **CSS 만으로** 판정한다 — `:required:placeholder-shown` 은
      "필수인데 아직 아무것도 안 쳤다"와 정확히 같은 뜻이다. JS 로 지키면
      입력칸을 새로 넣을 때마다 스크립트도 같이 고쳐야 한다.
   ⚠️ 그래서 **필수 입력칸에는 반드시 `placeholder` 를 준다.** 없으면 금색 표시가
      영영 안 뜬다(브라우저가 `:placeholder-shown` 을 판정할 수 없다).
   ⚠️ 반대로 `ribbon_message` 처럼 **기본값이 채워져 나오는 칸에는 placeholder 를
      주지 않는다** — 주면 이미 값이 있는데도 "안 채움"으로 보인다.
   ⚠️ 빨강이 아니라 금색인 이유 — 아직 아무 시도도 안 한 사람에게 처음부터 오류를
      들이대는 꼴이 된다. 금색은 "채워 주세요"로 읽힌다. */
.fs-field input[type="text"],
.fs-field input[type="tel"],
.fs-field select,
.fs-field textarea {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    font-size: 15px;
    color: var(--color-text);
    background: var(--color-surface-soft);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    box-sizing: border-box;
}

/* ② 아직 안 채운 필수칸 */
.fs-field input[type="text"]:required:placeholder-shown,
.fs-field input[type="tel"]:required:placeholder-shown {
    background: var(--color-primary-soft);
    border-color: var(--color-accent);
}

/* ③ 채운 칸 — 흰 바탕으로 가라앉힌다.
   ⚠️ `:not(:placeholder-shown)` 은 placeholder 가 **있는** 칸에만 의미가 있다.
      placeholder 가 없는 칸(리본 문구 등)에는 항상 참이라 흰 바탕이 되는데,
      그런 칸은 값이 미리 들어 있으므로 그것이 맞는 표시다. */
.fs-field input[type="text"]:not(:placeholder-shown),
.fs-field input[type="tel"]:not(:placeholder-shown) {
    background: var(--color-white);
    border-color: var(--color-border);
}
.fs-field textarea { height: auto; padding: 10px 12px; line-height: 1.6; }
.fs-field input:focus,
.fs-field select:focus,
.fs-field textarea:focus {
    outline: none;
    border-color: var(--color-primary-border);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.fs-field .fs-hint { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; line-height: 1.5; }

.fs-readonly {
    background: var(--color-surface-soft);
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
}

/* 수량 — − / + 가 붙은 한 덩어리(2026-08-15 클라이언트 지시) */
.fs-qty { display: flex; align-items: center; gap: 10px; }

.fs-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
}
.fs-stepper .fs-step {
    width: 40px;
    /* ⛔ 높이를 입력칸과 같은 값으로 **직접** 준다. bugo-common.css 의 전역
       `input{padding:12px 13px;margin-top:7px}` 이 안쪽 칸에 걸려 있어서,
       버튼을 auto 로 두면 세 칸의 높이가 어긋나 계단처럼 보인다. */
    height: 44px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    background: var(--color-surface-soft);
    border: none;
    cursor: pointer;
}
.fs-stepper .fs-step:hover:not(:disabled) { background: var(--color-primary-soft); }
/* 한계(1개·10개)에 닿으면 JS 가 잠근다 — 눌리지 않는다는 것이 보여야 한다 */
.fs-stepper .fs-step:disabled {
    color: var(--color-text-muted);
    background: var(--color-surface-mute);
    cursor: default;
}

.fs-stepper input {
    width: 54px;
    height: 44px;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-white);
    /* 테두리는 바깥 `.fs-stepper` 가 하나로 두른다 — 안쪽에 또 두르면 이중선이 된다 */
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-radius: 0;
    box-sizing: border-box;
}
.fs-stepper input:focus { outline: none; background: var(--color-primary-soft); }

/* 브라우저 기본 위·아래 화살표를 없앤다 — 우리 ± 와 겹쳐 조작 수단이 두 벌이 된다 */
.fs-stepper input::-webkit-outer-spin-button,
.fs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fs-stepper input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ⛔ 체크박스·라디오를 원래 크기로 되돌린다.
   `bugo-common.css` 의 `input,select,textarea{width:100%;padding:12px 13px;margin-top:7px}`
   이 **체크박스에도 걸려** 상자가 화면 폭만큼 늘어나고 글자가 멀리 밀려난다.
   그 규칙은 부고장 작성 폼 전체가 쓰고 있어 손댈 수 없으므로 여기서 되돌린다. */
.fs-wrap input[type="checkbox"],
.fs-wrap input[type="radio"] {
    width: auto;
    margin: 0;
    padding: 0;
    border-radius: 4px;
}

/* ── 약관 동의 ────────────────────────────────────────────────────────────── */

.fs-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* 전역 `label{font-weight:800}` 을 되돌린다 — 동의문은 본문이지 라벨이 아니다 */
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-text);
    cursor: pointer;
    margin: 0;
}
.fs-agree input[type="checkbox"] {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 2px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.fs-agree a {
    color: var(--color-link);
    text-decoration: underline;
    font-weight: 600;
}
.fs-agree a:hover { color: var(--color-primary); }

/* ── 조의 문구 선택 칩 ────────────────────────────────────────────────────── */

.fs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.fs-chip {
    font-size: 13px;
    line-height: 1.4;
    padding: 9px 12px;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
}
.fs-chip:hover { border-color: var(--color-primary-border); background: var(--color-primary-soft); }

/* 선택된 문구 — 입력칸의 값과 항상 일치한다 (직접 입력하면 풀린다) */
.fs-chip.is-on {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 600;
}

/* ⚠️ 추천 문구 강조(`.fs-chip.is-star` — ★ + 크림색)는 2026-08-15 클라이언트 지시로
      **없앴다.** 조의 문구는 상가의 종교와 보내는 분의 뜻에 따라 고르는 것이지
      무엇이 더 낫다고 권할 성질이 아니다. 되살릴 일이 생기면 ★ 글자와 이 색을
      **함께** 되살릴 것 — 한쪽만 두면 "이 셋은 왜 색이 다른가"만 남는다. */

/* 종교 탭 — **분절 스위치**(회색 트랙 위 흰 알약)
   2026-08-15 클라이언트 지적: "탭이 너무 복잡하고 모두 검은색이라 구분이 안 된다".

   ⛔ 예전에는 선택된 탭도 **검은 알약**이었다. 선택된 문구 칩(`.fs-chip.is-on`)도
      검은색이라, 화면에 검은 덩어리가 둘·셋 동시에 떠서 **무엇이 내가 고른 문구인지**
      읽히지 않았다.
   ⛔ 그래서 이 화면의 규칙은 하나다 — **검은색은 「지금 고른 문구」 하나뿐.**
      탭은 색을 채우지 않고 흰 알약 + 그림자로 '지금 보고 있는 칸'만 나타낸다.
      새 상태를 추가할 때 검은색을 다시 쓰지 말 것. */
.fs-segmented {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--color-surface-mute);
    border-radius: 10px;
    margin-bottom: 12px;
}
.fs-segmented button {
    flex: 1;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-light);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.fs-segmented button:hover { color: var(--color-primary); }
.fs-segmented button.is-on {
    color: var(--color-primary);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

/* ── 금액 요약 ────────────────────────────────────────────────────────────── */

.fs-sum { margin-top: 4px; }
.fs-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--color-text);
    padding: 7px 0;
}
.fs-sum-row.is-sub { color: var(--color-text-light); font-size: 13px; }
.fs-sum-row.is-total {
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
    padding-top: 14px;
    font-size: 17px;
    font-weight: 800;
    color: var(--color-primary);
}
.fs-sum-row .fs-free { color: var(--color-success); font-weight: 700; }

.fs-sum-row.is-discount span:last-child { color: var(--color-danger); font-weight: 700; }

/* ── 주문서 2단 배치 ───────────────────────────────────────────────────────
   2026-08-15 클라이언트가 준 참고 이미지대로 넓은 화면에서 좌우로 나눈다.
     왼쪽 = 입력(수령하실 분 · 주문하시는 분 · 문구 작성)
     오른쪽 = 주문 요약 카드 — 스크롤을 따라오게 붙여 둔다(`position: sticky`)

   ⚠️ **1040px 이 경계다.** 이 아래로는 한 줄로 쌓이고, 결제 버튼은 하단 고정 바가
      맡는다. 조문객 대부분이 휴대폰이라 좁은 화면의 동선을 바꾸지 않는 것이 중요하다.
   ⚠️ 결제 버튼은 DOM 에 둘 있고 **여기서 한 번에 하나만 보이게** 한다.
      두 규칙(`.fs-summary-actions` 숨김 / `.fs-sticky` 숨김)은 서로 반대 방향이라
      한쪽만 고치면 버튼이 둘 다 보이거나 둘 다 사라진다. */
.fs-checkout { display: grid; grid-template-columns: minmax(0, 1fr); }

/* 좁은 화면 — 요약 카드 안의 결제 버튼을 감추고 하단 고정 바를 쓴다 */
@media (max-width: 1039px) {
    .fs-summary-actions { display: none; }
}

@media (min-width: 1040px) {
    /* 2단일 때만 넓힌다. `.fs-wrap` 기본값(720px)은 다른 상점 화면이 그대로 쓴다.

       ⛔ **오른쪽에 자리를 비워 둬야 한다.** 화면 우하단에 `.floating-menu`(전화 상담·
          문의하기·카카오 채널)가 `position: fixed; right: 18px` 로 떠 있다. 실측 폭이
          121px 라 오른쪽 139px 는 늘 가려진다 — 폭을 1040px 로 고정하면 노트북
          해상도(1100~1280)에서 **총 결제금액과 결제 버튼이 그 밑에 깔린다.**
          그래서 화면 폭에서 320px 를 뺀 값과 1040px 중 **작은 쪽**을 쓴다.
       ⚠️ 300px 이 아니라 320px 인 이유 — `100vw` 는 스크롤바 폭(약 15px)을 포함하는데
          `position: fixed` 의 `right` 는 포함하지 않는다. 그 차이만큼 여유를 더 뒀다.
       ⚠️ `min()` 을 모르는 옛 브라우저를 위해 고정값을 먼저 쓴다(뒤 선언이 이긴다). */
    .fs-wrap--wide { max-width: 1040px; }
    .fs-wrap--wide { max-width: min(1040px, calc(100vw - 320px)); }

    .fs-checkout {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 20px;
        /* ⛔ `start` 가 없으면 오른쪽 칸이 왼쪽 높이만큼 늘어나 sticky 가 동작하지 않는다 */
        align-items: start;
    }
    .fs-checkout-side { position: sticky; top: 16px; }
    .fs-checkout-side .fs-section { margin-bottom: 0; }

    /* 넓은 화면에서는 요약 카드 안 버튼을 쓰므로 **주문서의** 하단 고정 바만 감춘다.
       ⛔ **`.fs-sticky` 를 그냥 감추면 안 된다.** 이 클래스는 상품 상세의
          「구매하기」도 쓴다 — 2026-08-15 실제로 범위를 안 좁혀서 넓은 화면에서
          상세의 구매 버튼이 통째로 사라졌다(대체 버튼이 없어 구매 동선이 끊겼다).
          주문서에만 있는 `--checkout` 을 반드시 함께 건다. */
    .fs-sticky--checkout { display: none; }
}

/* 요약 카드 — 상품 한 줄(썸네일 · 이름 · 도착 보장 · 가격) */
.fs-summary-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--color-border-light);
}
/* ⛔ `cover` 로 자르지 않는다 — 화환은 세로로 길어 리본·받침이 잘린다(목록 썸네일과 같은 이유) */
.fs-summary-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--color-surface-soft);
}
/* min-width:0 이 없으면 긴 상품명이 칸을 밀어 카드가 넘친다 */
.fs-summary-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fs-summary-name  { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--color-text); }
.fs-summary-eta   { font-size: 12px; font-weight: 700; color: var(--color-accent-text); }
.fs-summary-price { font-size: 15px; font-weight: 800; color: var(--color-primary); }

.fs-summary .fs-qty { margin: 12px 0; }
.fs-summary-agree { margin-top: 14px; }
.fs-summary-actions { margin-top: 14px; }

/* ── 계좌 이체 안내 ────────────────────────────────────────────────────────
   ⚠️ 카드 결제와 **다른 경로**다. 계좌 입금은 이 사이트에 기록이 남지 않아
      사장님이 전화로 주문을 받아야 한다. 그래서 계좌번호만 크게 보여 주고
      끝내지 않고, "연락해야 접수된다"를 같은 상자 안에서 못박는다. */
/* 기본은 **접어 둔다**(2026-08-14 클라이언트 지시). 계좌번호는 필요한 사람만
   펴 보면 되고, 늘 펼쳐 두면 카드 결제 동선보다 눈에 먼저 들어온다. */
.fs-bank {
    margin-top: 14px;
    border: 1px solid var(--color-cream-border);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-cream-start), var(--color-cream-end));
    overflow: hidden;
}
.fs-bank > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    /* ⛔ 색을 못박는다 — 지정하지 않은 대화형 요소는 테마 규칙에 끌려간다. */
    color: var(--color-primary);
}
.fs-bank > summary::-webkit-details-marker { display: none; }

.fs-bank-ico {
    flex: 0 0 auto;
    width: 22px;
    height: 16px;
    border: 2px solid var(--color-primary);
    border-radius: 3px;
    position: relative;
}
/* 카드 모양 — 위쪽 자기띠 한 줄로 '입금계좌'를 표현한다(아이콘 파일을 늘리지 않는다). */
.fs-bank-ico::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 3px;
    height: 2px;
    background: var(--color-primary);
}

.fs-bank-title { font-size: 14px; font-weight: 700; }

/* 「펼치기 / 접기」 — details 의 열림 상태를 글자로 알려 준다.
   화살표만 두면 눌러야 하는 자리인지 알기 어렵다. */
.fs-bank > summary::after {
    content: "▼ 펼치기";
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    margin-left: 4px;
}
.fs-bank[open] > summary::after { content: "▲ 접기"; }
.fs-bank[open] > summary { border-bottom: 1px solid var(--color-cream-border); }

.fs-bank-body { padding: 14px 16px 16px; }

.fs-bank-rows { margin: 0; }
.fs-bank-rows > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
}
.fs-bank-rows dt {
    flex: 0 0 62px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
}
.fs-bank-rows dd {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}
/* 계좌번호는 자릿수를 눈으로 세게 되므로 폭이 일정한 글꼴로 둔다. */
.fs-bank-no { font-family: Consolas, "Courier New", monospace; letter-spacing: .01em; }

/* ⛔ 부의금 오입금 경고 — 부고장에서 넘어온 조문객이 이 계좌를 **상주 계좌로
   오해**하기 딱 좋다. 놓치면 안 되는 문구라 흰 바탕에 붉은 테두리로 따로 세운다. */
.fs-bank-warn {
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--color-danger);
    border-radius: 8px;
    background: var(--color-white);
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text);
    text-align: center;
}
.fs-bank-warn strong { color: var(--color-primary); font-weight: 700; }
.fs-bank-warn em {
    display: inline-block;
    margin-top: 4px;
    font-style: normal;
    font-weight: 800;
    color: var(--color-danger);
}

.fs-bank-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.65;
    color: var(--color-text-muted);
}
.fs-bank-note strong { color: var(--color-primary); }

.fs-notice {
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text-muted);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-primary-soft-border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 10px;
}

/* ── 버튼 ─────────────────────────────────────────────────────────────────── */

.fs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 52px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-primary);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}
/* ⛔ 이 버튼은 <a> 로도 쓰인다(구매하기·홈으로·다시 주문하기…).
   theme-*.css 의 `a:hover { color: var(--color-link-dark) }` 가 걸리는데 그 값이
   버튼 배경과 같은 네이비라, 색을 못박지 않으면 호버 시 글자가 사라진다. */
.fs-btn:hover { background: var(--color-primary-light); }
.fs-btn,
.fs-btn:hover,
.fs-btn:focus,
.fs-btn:active,
.fs-btn:visited { color: var(--color-white); text-decoration: none; }

.fs-btn.is-ghost,
.fs-btn.is-ghost:hover,
.fs-btn.is-ghost:focus,
.fs-btn.is-ghost:visited { color: var(--color-primary); }

.fs-btn.is-gold,
.fs-btn.is-gold:hover,
.fs-btn.is-gold:focus,
.fs-btn.is-gold:visited { color: var(--color-primary); }

.fs-btn.is-disabled,
.fs-btn[disabled] { color: var(--color-disabled-text); }
.fs-btn[disabled],
.fs-btn.is-disabled {
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    cursor: not-allowed;
}
.fs-btn.is-ghost {
    background: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}
.fs-btn.is-gold { background: var(--color-accent); color: var(--color-primary); }
.fs-btn.is-gold:hover { background: var(--color-accent-dark); }

.fs-actions { display: grid; gap: 10px; margin-top: 18px; }

/* ── NICEPAY PC 결제창 전체 표시 ─────────────────────────────────────────────
   카드·약관·결제 버튼이 모두 iframe 안에 들어오도록 충분한 viewport를 제공한다.
   실제 화면이 이 크기보다 작을 때에는 JS가 계산한 비율로 레이어 전체를 축소한다. */
#nice_layer.nicepay-fit-layer {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: var(--nicepay-frame-width, 660px) !important;
    height: var(--nicepay-frame-height, 900px) !important;
    max-height: none !important;
    overflow: visible !important;
    transform: translate(-50%, -50%) scale(var(--nicepay-fit-scale, 1)) !important;
    transform-origin: center center !important;
}

#nice_layer.nicepay-fit-layer #nice_frame {
    display: block;
    width: var(--nicepay-frame-width, 660px) !important;
    height: var(--nicepay-frame-height, 900px) !important;
}

#bg_layer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* 모바일에서 결제 버튼을 항상 보이게 (참고 사이트와 같은 동선) */
/* ── 하단 고정 구매 버튼 ───────────────────────────────────────────────────
   ⛔ **흰 배경이 화면 끝까지 닿지 않아 어색했다**(2026-08-14 클라이언트 지적).
      `.fs-wrap` 안쪽에 있어서 좌우로 여백만큼 들어와 있었고, 회색 페이지 배경 위에
      흰 네모가 떠 있는 것처럼 보였다. 바깥 여백만큼 **음수 마진으로 밀어내** 좌우
      끝까지 닿게 하고, 그만큼을 안쪽 padding 으로 돌려준다.

   ⚠️ 음수 마진 값은 `.fs-wrap` 의 좌우 padding 과 **반드시 같아야 한다.**
      한쪽만 고치면 바가 화면 밖으로 삐져나가거나 다시 안쪽으로 들어온다.
      (지금: 기본 16px / 480px 이하 10px)

   배경을 없애지 않는 이유 — 이 바는 본문 위에 겹쳐 떠 있다. 투명하게 두면 글자
   위에 버튼이 얹혀 둘 다 읽을 수 없게 된다. */
.fs-sticky {
    position: sticky;
    bottom: 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    margin: 18px -16px 0;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .05);
    z-index: 20;
}

@media (max-width: 480px) {
    .fs-sticky {
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ── 알림 / 결과 ──────────────────────────────────────────────────────────── */

.fs-alert {
    max-width: 560px;
    margin: 32px auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
}
.fs-alert h2 { font-size: 18px; color: var(--color-primary); margin: 0 0 10px; }
.fs-alert p  { font-size: 14px; line-height: 1.7; color: var(--color-text); margin: 0 0 10px; }
.fs-alert ul { text-align: left; font-size: 14px; line-height: 1.8; color: var(--color-danger); }
.fs-alert .fs-muted { color: var(--color-text-muted); font-size: 13px; }

.fs-done-mark {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-accent-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700;
}

.fs-kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; font-size: 14px; }
.fs-kv dt { color: var(--color-text-muted); }
.fs-kv dd { margin: 0; color: var(--color-text); word-break: break-all; }

/* ── 안내 탭 ──────────────────────────────────────────────────────────────── */

.fs-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.fs-tabs a {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-light);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    text-decoration: none;
}
.fs-tabs a:hover { color: var(--color-primary); }
.fs-tabs a.is-on,
.fs-tabs a.is-on:hover,
.fs-tabs a.is-on:focus,
.fs-tabs a.is-on:visited {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* 안내 표 */
.fs-guide-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fs-guide-table th,
.fs-guide-table td {
    border-bottom: 1px solid var(--color-border-light);
    padding: 11px 8px;
    text-align: left;
    line-height: 1.7;
    vertical-align: top;
}
.fs-guide-table th {
    width: 116px;
    color: var(--color-primary);
    font-weight: 700;
    white-space: nowrap;
}

/* ── 푸터 법정 표시 ───────────────────────────────────────────────────────── */

/* ── 푸터 ─────────────────────────────────────────────────────────────────
   2026-08-14 클라이언트 지시로 **가운데 정렬**로 다시 짰다. 링크 줄 → 구분선 →
   사업자 정보 → 저작권 순으로 모아 "여기서 내용이 끝난다"를 눈에 잡히게 한다. */
.fs-legal {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-text-muted);
}

.fs-legal-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-bottom: 18px;
}
/* ⛔ 상태를 전부 못박는다 — theme-hyobugo.css 의 `a:hover` 가 색을 바꾸고
   **밑줄까지 긋는다.** 지정하지 않으면 링크마다 호버에서 밑줄이 생긴다. */
.fs-legal-nav a,
.fs-legal-nav a:link,
.fs-legal-nav a:visited {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}
.fs-legal-nav a:hover,
.fs-legal-nav a:focus,
.fs-legal-nav a:active {
    color: var(--color-primary);
    text-decoration: none;
}

.fs-legal-info { font-size: 12px; line-height: 1.9; }
.fs-legal-info p { margin: 0; font-size: 12px; color: var(--color-text-muted); }
/* 구분자는 항목보다 한 톤 흐리게 — 글자와 같은 무게면 목록이 촘촘해 보인다. */
.fs-legal-sep { color: var(--color-border); margin: 0 2px; }

.fs-legal-copy {
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

@media (max-width: 480px) {
    .fs-legal-nav { gap: 8px 14px; }
    .fs-legal-nav a { font-size: 12px; }
}

/* ⛔ **이 화면 전체에서 호버 밑줄을 없앤다**(2026-08-14 클라이언트 지시).
   theme-hyobugo.css 의 `a:hover { text-decoration: underline }` 이 상점 안의
   모든 링크에 걸린다. 링크마다 따로 막으면 새 링크를 넣을 때마다 빠뜨리게 되므로
   상점 화면(.page--store)에 한 번만 건다.

   ⚠️ 우선순위: `.page--store a:hover`(0,2,1) > `a:hover`(0,1,1) 이라 이긴다.
   ⚠️ 다른 화면(홈·부고장)의 밑줄은 그대로 둔다 — 여기만 한정한 이유다. */
.page--store a,
.page--store a:link,
.page--store a:visited,
.page--store a:hover,
.page--store a:focus,
.page--store a:active { text-decoration: none; }

@media (max-width: 480px) {
    .fs-thumb { flex: 0 0 84px; width: 84px; height: 84px; }
    .fs-kv { grid-template-columns: 82px 1fr; }
    .fs-guide-table th { width: 92px; }
}

/* ── 수령하실 분 — 선택 팝업 ────────────────────────────────────────────────
   부고장 만들기의 「상주 관계 선택」 팝업(`.sj-rel-modal`, bugo-create.css)과
   **같은 모양**으로 맞춘다(2026-08-15 클라이언트 지시) — 왼쪽 관계 / 오른쪽 이름.

   ⛔ **그 CSS 를 재사용하지 않고 여기에 다시 쓴 이유** — `bugo-create.css` 는
      부고장 만들기 화면 전용이라 상점 화면이 로드하지 않는다. 로드하면 폼·카드
      규칙까지 딸려 들어와 주문서 레이아웃이 흔들린다. 그래서 필요한 값만 옮겼다.
   ⚠️ 모양을 바꿀 일이 생기면 **두 곳을 함께** 봐야 한다. 한쪽만 고치면 같은 팝업이
      화면마다 달라 보인다.
   ⚠️ 색은 토큰만 쓴다 — 여기에 색을 박으면 사이트마다 테마가 어긋난다. */

/* 팝업을 여는 버튼 — 입력칸처럼 보이되 누르는 것임이 드러나야 한다 */
.fs-recip-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    color: var(--color-text);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: .15s ease;
}

.fs-recip-trigger:hover { border-color: var(--color-primary); }

.fs-recip-trigger__val { font-weight: 700; }

/* 관계는 이름보다 한 단계 작고 흐리게 — 이름이 주인공이다 */
.fs-recip-trigger__val em {
    margin-left: 6px;
    color: var(--color-text-light);
    font-size: 12.5px;
    font-style: normal;
    font-weight: 600;
}

.fs-recip-trigger__act {
    flex: none;
    color: var(--color-text-light);
    font-size: 12.5px;
    font-weight: 700;
}

/* 팝업 본체 */
.fs-recip-modal { display: none; position: fixed; inset: 0; z-index: 1000; }
.fs-recip-modal.is-open { display: block; }

.fs-recip-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }

.fs-recip-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(440px, calc(100% - 24px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    margin: 24px auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.fs-recip-modal__header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 12px 12px 0 0;
}

.fs-recip-modal__header h3 { margin: 0; font-size: 15px; }

.fs-recip-modal__header button {
    padding: 5px 9px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}

.fs-recip-modal__body { padding: 4px 12px 12px; }

/* 관계명과 이름을 같은 줄에 흘려보낸다 — 관계 전용 줄을 없애 세로를 줄인다 */
.fs-recip-modal__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 7px 0;
    border-top: 1px solid var(--color-border-light);
}

.fs-recip-modal__row:first-child { border-top: 0; }

.fs-recip-modal__group {
    flex: none;
    min-width: 52px;
    color: var(--color-text-light);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.fs-recip-modal__item {
    padding: 5px 9px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fff;
    color: var(--color-text);
    font-size: 12.5px;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: .15s ease;
}

.fs-recip-modal__item:hover { border-color: var(--color-primary); color: var(--color-primary); }

.fs-recip-modal__item.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 700;
}

/* 좁은 화면에선 관계명이 이름을 밀어내지 않도록 자기 줄을 갖게 둔다 */
@media (max-width: 400px) {
    .fs-recip-modal__group { width: 100%; }
}