/* ===================
   링크 페이지 — 공개 화면
   1. Fonts & Variables  2. Reset & Base  3. Layout  4. Blocks  5. Overlay(공유·배경음악)  6. Responsive
   테마 색·둥글기·글꼴은 페이지가 <head> 에 넣는 :root{--fxl-*} 가 덮어쓴다(아래는 기본값).
   =================== */

/* ---------- 1. Fonts & Variables ---------- */
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Pretendard-Regular.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Pretendard-Bold.woff2") format("woff2"); }
/* 0.7.0 추가 글꼴 3종 — 플러그인 안 파일만(assets/fonts/LICENSES.md). 600 은 굵은 쪽(700)으로 보인다. */
@font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Paperlogy-Regular.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Paperlogy-Bold.woff2") format("woff2"); }
@font-face { font-family: "MaruBuri"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/MaruBuri-Regular.woff2") format("woff2"); }
@font-face { font-family: "MaruBuri"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/MaruBuri-Bold.woff2") format("woff2"); }
@font-face { font-family: "NanumSquareNeo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/NanumSquareNeo-Regular.woff2") format("woff2"); }
@font-face { font-family: "NanumSquareNeo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/NanumSquareNeo-Bold.woff2") format("woff2"); }

:root {
	--fxl-bg: #ffffff;
	--fxl-text: #0b0b0b;
	--fxl-muted: #545454;
	--fxl-accent: #c8102e;
	--fxl-btn-bg: #0b0b0b;
	--fxl-btn-text: #ffffff;
	--fxl-btn-line: #0b0b0b;
	--fxl-surface: #f0f0f0;
	--fxl-line: #d4d4d4;
	--fxl-radius: 0;
	--fxl-overlay: 0;
	--fxl-font: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
	--fxl-r-card: min(var(--fxl-radius), 18px);
	--fxl-r-sm: min(var(--fxl-radius), 12px);
	--fxl-ease: cubic-bezier(0.23, 1, 0.32, 1);
	/* 링크 블록(인포크 개편 0.7.0) — 값은 PHP(FXL_Theme::block_colors)가 테마 색에서 계산해 덮어쓴다. */
	--fxl-face: #ffffff;
	--fxl-thumb-bg: #f5f5f5;
	--fxl-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.2), 0 3px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 3px -2px rgba(0, 9, 50, 0.12);
	--fxl-chip-solid-bg: #111111;
	--fxl-chip-solid-fg: #c8f05a;
	--fxl-chip-soft-bg: #e7e7e7;
	--fxl-chip-soft-fg: #111111;
	--fxl-chip-line: #d8d8d8;
}

/* ---------- 2. Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html.fxl-html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--fxl-bg); }
.fxl-body { overflow-x: clip; margin: 0; background: var(--fxl-bg); color: var(--fxl-text); font-family: var(--fxl-font); font-size: 16px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
.fxl-body img, .fxl-body svg, .fxl-body iframe, .fxl-body video { max-width: 100%; }
:where(.fxl-body) a { color: var(--fxl-accent); text-underline-offset: 3px; }
.fxl-body h1, .fxl-body h2, .fxl-body p, .fxl-body ul, .fxl-body ol, .fxl-body figure { margin: 0; padding: 0; }
.fxl-body ul, .fxl-body ol { list-style: none; }
.fxl-body :focus-visible { outline: 3px solid var(--fxl-accent); outline-offset: 3px; }
.fxl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fxl-skip { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 16px; background: var(--fxl-btn-bg); color: var(--fxl-btn-text); border-radius: var(--fxl-r-sm); text-decoration: none; }
.fxl-skip:focus { top: 12px; }
.fxl-bgimg { position: fixed; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.fxl-bgimg::after { content: ""; position: absolute; inset: 0; background: var(--fxl-bg); opacity: var(--fxl-overlay); }

/* ---------- 3. Layout ---------- */
.fxl-page { position: relative; z-index: 1; max-width: 440px; min-height: 100vh; margin: 0 auto; padding: 56px 16px 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.fxl-block { min-width: 0; }
.fxl-block + .fxl-block { margin-top: 16px; }
.fxl-block--header + .fxl-block { margin-top: 32px; }
.fxl-block--spacer + .fxl-block, .fxl-block + .fxl-block--spacer { margin-top: 0; }
.fxl-block[hidden] { display: none; }
.fxl-block.is-selected { outline: 2px dashed var(--fxl-accent); outline-offset: 6px; border-radius: 4px; }
.fxl-empty { padding: 56px 0; text-align: center; color: var(--fxl-muted); }
.fxl-empty p + p { margin-top: 4px; }
.fxl-empty .fxl-chip { margin-top: 18px; }

/* 상단 아이콘 버튼 — 40x40 원형, 글자는 화면에서만 숨긴다(스크린리더는 aria-label). */
.fxl-sharebtn { position: absolute; top: 8px; right: 16px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--fxl-text) 8%, transparent); color: var(--fxl-text); font: 600 13px/1 var(--fxl-font); cursor: pointer; transition: background-color 0.2s ease; }
.fxl-sharebtn::after { content: ""; position: absolute; inset: -2px; }
.fxl-sharebtn__t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.fxl-sharebtn:hover { background: color-mix(in srgb, var(--fxl-text) 16%, transparent); }
.fxl-foot { margin-top: 48px; text-align: center; font-size: 13px; color: var(--fxl-muted); }
.fxl-foot__name { margin: 0; }
.fxl-foot__edit { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0 12px; }
.fxl-biz { margin: 8px 0 0; font-size: 12px; font-weight: 400; line-height: 1.6; color: var(--fxl-muted); }
.fxl-biz--warn a { font-weight: 600; }

/* ---------- 4. Blocks ---------- */
/* 프로필 */
.fxl-profile { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.fxl-profile__img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 1px solid var(--fxl-line); }
.fxl-profile__name { font-size: 22px; font-weight: 700; line-height: 30.8px; letter-spacing: -0.4px; }
.fxl-profile__tag { margin-top: 8px; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; color: var(--fxl-muted); }
.fxl-profile__bio { margin-top: 8px; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: var(--fxl-muted); }
.fxl-layout--left .fxl-profile { flex-direction: row; align-items: center; gap: 16px; text-align: left; }
.fxl-layout--left .fxl-profile__img { flex: none; }
.fxl-layout--card .fxl-profile { padding: 28px 16px 24px; background: var(--fxl-surface); border: 1.5px solid var(--fxl-text); border-radius: var(--fxl-r-card); box-shadow: 4px 4px 0 var(--fxl-text); }
.fxl-layout--cover .fxl-profile { position: relative; margin: -56px -16px 0; padding: 80px 16px 8px; }
.fxl-layout--cover .fxl-profile::before { content: ""; position: absolute; left: 50%; width: 100vw; margin-left: -50vw; top: 0; height: 120px; background: var(--fxl-surface); border-bottom: 1px solid var(--fxl-line); }
.fxl-layout--cover .fxl-profile__img, .fxl-layout--cover .fxl-profile__text { position: relative; }
.fxl-layout--cover .fxl-sharebtn { z-index: 2; }
/* 커버 이미지(3차, 인포크 cover_profile) — 커버 168 전체 폭 + 80 프로필 사진이 걸침. 커버 이미지가 없으면 위 120 띠 그대로. */
.fxl-layout--cover .fxl-profile--hascover { gap: 0; padding: 0 0 8px; }
.fxl-layout--cover .fxl-profile--hascover::before { display: none; }
.fxl-profile__cover { display: block; flex: none; align-self: stretch; width: 100%; max-width: none; height: 168px; object-fit: cover; object-position: center; background: var(--fxl-surface); }
.fxl-layout--cover .fxl-profile--hascover .fxl-profile__img { margin-top: -40px; box-shadow: 0 0 0 3px var(--fxl-bg); z-index: 1; }
.fxl-layout--cover .fxl-profile--hascover .fxl-profile__text { margin-top: 16px; padding: 0 16px; }

/* 링크 버튼 */
.fxl-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 20px; border: 2px solid transparent; border-radius: var(--fxl-radius); background: var(--fxl-btn-bg); color: var(--fxl-btn-text); font: 600 16px/1.4 var(--fxl-font); text-align: center; text-decoration: none; cursor: pointer; position: relative; transition: transform 0.2s var(--fxl-ease), box-shadow 0.2s var(--fxl-ease), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.fxl-btn__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.fxl-btn__title { display: block; }
.fxl-btn__desc { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; opacity: 0.85; }
.fxl-btn__ico { flex: none; width: 40px; height: 40px; border-radius: var(--fxl-r-sm); object-fit: cover; }
.fxl-btn .fxl-ico { flex: none; }
.fxl-badge { flex: none; padding: 2px 9px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.5; }
.fxl-layout--left .fxl-btn { justify-content: flex-start; text-align: left; }
.fxl-btn--featured { min-height: 68px; font-size: 17px; border-color: var(--fxl-accent); }
.fxl-btn--outline { background: transparent; color: var(--fxl-text); border-color: var(--fxl-btn-line); }
.fxl-btnstyle--outline .fxl-btn { background: transparent; color: var(--fxl-text); border-color: var(--fxl-btn-line); }
.fxl-btnstyle--soft .fxl-btn { background: var(--fxl-surface); color: var(--fxl-text); border-color: var(--fxl-line); }
.fxl-btnstyle--offset .fxl-btn { border-color: var(--fxl-text); box-shadow: 4px 4px 0 var(--fxl-text); }
.fxl-btnstyle--offset .fxl-btn--outline { box-shadow: 4px 4px 0 var(--fxl-text); }
.fxl-affnote { margin: 6px 4px 0; font-size: 12px; color: var(--fxl-muted); }

.fxl-click--lift .fxl-btn:hover, .fxl-click--lift .fxl-btn:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16); }
.fxl-click--lift .fxl-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); }
.fxl-click--press .fxl-btn:hover { transform: translate(-1px, -1px); }
.fxl-click--press .fxl-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.fxl-click--invert .fxl-btn:hover, .fxl-click--invert .fxl-btn:focus-visible { background: var(--fxl-btn-text); color: var(--fxl-btn-bg); border-color: var(--fxl-btn-bg); }
.fxl-click--invert.fxl-btnstyle--outline .fxl-btn:hover, .fxl-click--invert.fxl-btnstyle--outline .fxl-btn:focus-visible { background: var(--fxl-btn-line); color: var(--fxl-bg); }
.fxl-click--none .fxl-btn { transition: none; }
@media (hover: none) { .fxl-click--lift .fxl-btn:hover, .fxl-click--press .fxl-btn:hover { transform: none; box-shadow: none; } .fxl-btnstyle--offset .fxl-btn:hover { box-shadow: 4px 4px 0 var(--fxl-text); } }

/* 링크 블록 — 흰 면 + 3겹 그림자 + 둥글기 12, 테두리 없음(인포크 실측). 모양 프리셋(각진·알약)과 무관하게 12 고정. */
.fxl-lk { display: flex; width: 100%; min-width: 0; color: var(--fxl-text); background: var(--fxl-face); border-radius: 12px; box-shadow: var(--fxl-shadow); text-align: center; text-decoration: none; font-family: var(--fxl-font); -webkit-tap-highlight-color: transparent; transition: transform 0.2s var(--fxl-ease); }
.fxl-lk:active { transform: scale(0.99); }
.fxl-lk__title { display: block; min-width: 0; padding: 0 12px; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: -0.28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxl-lk__sub { display: block; min-width: 0; padding: 0 12px; font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: -0.24px; color: var(--fxl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxl-lk--simple { flex-direction: column; align-items: stretch; justify-content: center; min-height: 76px; padding: 16px 20px; }
.fxl-lk--thumb { flex-direction: row; align-items: center; min-height: 76px; padding: 8px; }
.fxl-lk--thumb .fxl-lk__img { flex: none; width: 60px; height: 60px; border-radius: 8px; object-fit: cover; background: var(--fxl-thumb-bg); }
.fxl-lk__body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 8px; }
.fxl-lk--card { flex-direction: column; overflow: hidden; }
.fxl-lk--card .fxl-lk__img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; background: var(--fxl-thumb-bg); }
.fxl-lk__cap { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 16px; }
.fxl-lk--card .fxl-lk__title { padding: 0; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.fxl-lk--card .fxl-lk__sub { padding: 0; white-space: normal; }
/* 카드 버튼 문구(CTA) — 인포크 실측: 캡션 아래 높이 48·둥글기 10·14px w700, 캡션 안 간격 12 */
.fxl-lk__cap--cta { gap: 12px; align-items: stretch; }
.fxl-lk__cta { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 12px; border-radius: 10px; background: var(--fxl-chip-solid-bg); color: var(--fxl-chip-solid-fg); font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: -0.28px; text-align: center; }
.fxl-lk--cell { flex-direction: column; overflow: hidden; height: 100%; }
.fxl-lk--cell .fxl-lk__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--fxl-thumb-bg); }
.fxl-lk--cell .fxl-lk__cap { flex: 1; padding: 8px; gap: 0; }
.fxl-lk--cell .fxl-lk__title { padding: 0; font-size: 13px; font-weight: 700; letter-spacing: -0.26px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* 배경형 링크(3차, 인포크 값) — 높이 76, 이미지 cover·가운데, 위에 rgba(0,0,0,.4) 덮개, 제목 흰색 3줄(태그 칩이 있으면 1줄). 이미지가 없으면 PHP 가 심플형으로 그린다. */
.fxl-body .fxl-lk.fxl-lk--background, .fxl-body .fxl-lk.fxl-lk--background:hover, .fxl-body .fxl-lk.fxl-lk--background:focus-visible { position: relative; flex-direction: column; justify-content: center; height: 76px; min-height: 76px; padding: 8px 20px; overflow: hidden; background-color: #333; background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; }
.fxl-lk--background::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4); border-radius: inherit; pointer-events: none; }
.fxl-lk--background .fxl-lk__body { position: relative; z-index: 1; flex: none; padding: 0; }
.fxl-lk--background .fxl-lk__title { padding: 0 12px; color: #fff !important; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.fxl-lk--background.fxl-lk--bg-tags .fxl-lk__title { -webkit-line-clamp: 1; line-clamp: 1; }
.fxl-lk--background .fxl-tags { margin-bottom: 4px; }
.fxl-lk--background .fxl-tag--line { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
/* 태그 칩 */
.fxl-tags { display: flex; justify-content: center; gap: 4px; margin: 0 0 4px; flex-wrap: nowrap; min-width: 0; }
.fxl-tag { flex: none; max-width: 100%; height: 20px; padding: 0 8px; border: 1px solid transparent; border-radius: 40px; font-size: 10px; font-weight: 600; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxl-tag--solid { background: var(--fxl-chip-solid-bg); border-color: var(--fxl-chip-solid-bg); color: var(--fxl-chip-solid-fg); }
.fxl-tag--soft { background: var(--fxl-chip-soft-bg); border-color: var(--fxl-chip-soft-bg); color: var(--fxl-chip-soft-fg); }
.fxl-tag--line { background: transparent; border-color: var(--fxl-chip-line); color: var(--fxl-text); }
/* 링크 블록 스타일 4종 — 채움(solid)=기본 모습 그대로. 테두리·연하게·그림자는 면/선/그림자만 바꾼다. */
.fxl-btnstyle--outline .fxl-lk { background: transparent; border: 1px solid var(--fxl-btn-line); box-shadow: none; }
.fxl-btnstyle--soft .fxl-lk { background: var(--fxl-surface); background: color-mix(in srgb, var(--fxl-btn-bg) 10%, var(--fxl-bg)); box-shadow: none; }
.fxl-btnstyle--offset .fxl-lk { border: 1px solid var(--fxl-text); box-shadow: 4px 4px 0 var(--fxl-text); }
/* 누를 때 반응 — .fxl-btn 과 같은 규칙 */
.fxl-click--lift .fxl-lk:hover, .fxl-click--lift .fxl-lk:focus-visible { transform: translateY(-3px); }
.fxl-click--lift.fxl-btnstyle--solid .fxl-lk:hover, .fxl-click--lift.fxl-btnstyle--solid .fxl-lk:focus-visible { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16); }
.fxl-click--press .fxl-lk:hover { transform: translate(-1px, -1px); }
.fxl-click--press .fxl-lk:active { transform: translate(3px, 3px); box-shadow: none; }
.fxl-click--invert .fxl-lk:hover, .fxl-click--invert .fxl-lk:focus-visible { background: var(--fxl-btn-bg); color: var(--fxl-btn-text); }
.fxl-click--invert.fxl-btnstyle--outline .fxl-lk:hover, .fxl-click--invert.fxl-btnstyle--outline .fxl-lk:focus-visible { background: var(--fxl-btn-line); color: var(--fxl-bg); }
.fxl-click--invert .fxl-lk:hover .fxl-lk__sub, .fxl-click--invert .fxl-lk:focus-visible .fxl-lk__sub { color: inherit; }
.fxl-click--none .fxl-lk { transition: none; }
.fxl-click--none .fxl-lk:active { transform: none; }
@media (hover: none) { .fxl-click--lift .fxl-lk:hover, .fxl-click--press .fxl-lk:hover { transform: none; } .fxl-click--lift.fxl-btnstyle--solid .fxl-lk:hover { box-shadow: var(--fxl-shadow); } }
.fxl-click--lift .fxl-lk:active { transform: translateY(0); }

/* 링크 그룹 — 제목 14px w700 가운데, 목록은 세로 16, 격자는 2열 8 */
.fxl-body .fxl-group__title { display: block; margin: 0 0 8px; padding: 8px 0 0; font-size: 14px; font-weight: 700; line-height: 19.6px; text-align: center; color: var(--fxl-text); cursor: default; list-style: none; }
.fxl-group--fold > .fxl-group__title { cursor: pointer; min-height: 44px; }
.fxl-group--fold > .fxl-group__title::-webkit-details-marker { display: none; }
.fxl-group--fold > .fxl-group__title::after { content: "–"; margin-left: 8px; color: var(--fxl-muted); }
.fxl-group--fold:not([open]) > .fxl-group__title::after { content: "+"; }
.fxl-group__list { display: grid; gap: 16px; }
.fxl-group--grid .fxl-group__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fxl-group--grid .fxl-group__item { min-width: 0; display: flex; flex-direction: column; }

/* SNS */
.fxl-sns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fxl-layout--left .fxl-sns { justify-content: flex-start; }
.fxl-sns__a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 48px; height: 48px; border: 1.5px solid var(--fxl-btn-line); border-radius: min(var(--fxl-radius), 24px); background: transparent; color: var(--fxl-text); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
.fxl-sns__a:hover, .fxl-sns__a:focus-visible { background: var(--fxl-text); color: var(--fxl-bg); }
.fxl-sns__a--label { width: auto; padding: 0 16px; font-size: 14px; font-weight: 600; }

/* 임베드 */
.fxl-embed { margin: 0; }
.fxl-embed--ratio { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--fxl-r-card); background: var(--fxl-surface); }
.fxl-embed--ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fxl-embed--audio iframe, .fxl-embed--map iframe { display: block; width: 100%; border: 0; border-radius: var(--fxl-r-card); }
.fxl-embed--map { margin-bottom: 10px; }
.fxl-embed--map iframe { height: 240px; }
.fxl-embed--tiktok { display: flex; justify-content: center; }
.fxl-embed--tiktok blockquote, .fxl-ig { max-width: 100%; min-width: 0; margin: 0; }
.fxl-caption { margin-top: 8px; font-size: 14px; color: var(--fxl-muted); text-align: center; }

/* 갤러리 */
.fxl-gal__item { margin: 0; }
.fxl-gal__item a { display: block; }
.fxl-gal__img { display: block; width: 100%; height: auto; border-radius: var(--fxl-r-sm); }
.fxl-gal__cap { margin-top: 6px; font-size: 13px; color: var(--fxl-muted); }
.fxl-gal--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fxl-gal--grid.fxl-gal--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fxl-gal--grid .fxl-gal__img { aspect-ratio: 1 / 1; object-fit: cover; }
.fxl-gal--masonry { column-count: 2; column-gap: 8px; }
.fxl-gal--one, .fxl-gal--grid.fxl-gal--one { display: block; column-count: 1; }
.fxl-gal--one .fxl-gal__img { aspect-ratio: auto; }
.fxl-gal--masonry.fxl-gal--c3 { column-count: 3; }
.fxl-gal--masonry .fxl-gal__item { break-inside: avoid; margin-bottom: 8px; }
.fxl-gal--slider { position: relative; }
.fxl-gal__track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: var(--fxl-r-sm); }
.fxl-gal__track::-webkit-scrollbar { display: none; }
.fxl-gal--slider .fxl-gal__item { flex: 0 0 100%; scroll-snap-align: center; }
.fxl-gal--slider .fxl-gal__img { aspect-ratio: 4 / 3; object-fit: cover; }
.fxl-gal__nav { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--fxl-btn-line); border-radius: 50%; background: var(--fxl-bg); color: var(--fxl-text); cursor: pointer; }
.fxl-gal__nav--prev { left: 8px; }
.fxl-gal__nav--next { right: 8px; }

/* 텍스트·여백·구분선 */
.fxl-text p + p { margin-top: 0.9em; }
.fxl-text--center { text-align: center; }
.fxl-text--sm { font-size: 14px; }
.fxl-text--lg { font-size: 19px; line-height: 1.65; }
.fxl-text--sec { padding: 12px 0 8px; font-size: 14px; font-weight: 600; line-height: 21px; letter-spacing: -0.28px; text-align: center; color: var(--fxl-text); }
.fxl-text--sec p + p { margin-top: 0; }
.fxl-divider { border: 0; border-top: 1px solid var(--fxl-line); margin: 6px 0; }
.fxl-divider--dashed { border-top: 1.5px dashed var(--fxl-btn-line); }
.fxl-divider--dots { border-top: 4px dotted var(--fxl-line); }
.fxl-divider--label { display: flex; align-items: center; gap: 12px; margin: 6px 0; font-size: 13px; font-weight: 700; color: var(--fxl-muted); }
.fxl-divider--label::before, .fxl-divider--label::after { content: ""; flex: 1; height: 1px; background: var(--fxl-line); }

/* 지도 */
.fxl-map__card { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--fxl-line); border-radius: var(--fxl-r-card); background: var(--fxl-surface); }
.fxl-map__card .fxl-ico { flex: none; margin-top: 2px; color: var(--fxl-accent); }
.fxl-map__text { display: flex; flex-direction: column; min-width: 0; }
.fxl-map__name { font-size: 17px; }
.fxl-map__addr { font-size: 15px; }
.fxl-map__tel { display: inline-block; margin-top: 4px; padding: 8px 0; min-height: 44px; font-weight: 600; }
.fxl-map__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fxl-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--fxl-btn-line); border-radius: var(--fxl-radius); background: transparent; color: var(--fxl-text); font: 600 14px/1.2 var(--fxl-font); text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.fxl-chip:hover, .fxl-chip:focus-visible { background: var(--fxl-text); color: var(--fxl-bg); }
.fxl-chip--solid { background: var(--fxl-btn-bg); border-color: var(--fxl-btn-bg); color: var(--fxl-btn-text); }
.fxl-chip--solid:hover, .fxl-chip--solid:focus-visible { background: var(--fxl-text); border-color: var(--fxl-text); color: var(--fxl-bg); }
.fxl-chip[hidden] { display: none; }

/* 공지 */
.fxl-notice { padding: 14px 16px; border: 1px solid var(--fxl-line); background: var(--fxl-surface); border-radius: var(--fxl-r-sm); }
.fxl-notice--important { border: 2px solid var(--fxl-text); padding: 13px 15px; }
.fxl-notice__label { display: inline-block; margin-bottom: 6px; padding: 1px 9px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--fxl-muted); }
.fxl-notice--important .fxl-notice__label { border-color: var(--fxl-text); background: var(--fxl-text); color: var(--fxl-bg); }
.fxl-notice__msg { font-size: 15px; font-weight: 600; }
.fxl-notice__more { display: inline-block; margin-top: 4px; padding: 10px 0; min-height: 44px; font-size: 14px; font-weight: 600; }

/* D-day */
.fxl-dday { padding: 18px 0; border-top: 2px solid var(--fxl-text); border-bottom: 1px solid var(--fxl-line); }
.fxl-dday__title { font-size: 15px; font-weight: 600; }
.fxl-dday__num { margin-top: 4px; font-size: 52px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fxl-dday__date { margin-top: 6px; font-size: 14px; color: var(--fxl-muted); }
.fxl-dday__live { min-height: 1.6em; margin-top: 2px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fxl-dday__after { margin-top: 6px; font-size: 14px; }

/* 일정 · 캘린더 (0.8.0): 리스트 / 캘린더 두 보기, 진행 상태 배지 */
.fxl-sched__title { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--fxl-muted); }
.fxl-evcard { overflow: hidden; border-radius: 12px; background: var(--fxl-face); box-shadow: var(--fxl-shadow); color: var(--fxl-text); text-align: left; }
.fxl-evl-wrap--scroll { max-height: 200px; overflow-y: auto; overscroll-behavior: contain; }
.fxl-body .fxl-evl { margin: 0; padding: 16px 0 0; list-style: none; }
.fxl-ev { display: flex; padding: 0 16px 16px; }
.fxl-ev[hidden] { display: none; }
.fxl-ev__badgebox { flex: none; width: 48px; margin-right: 12px; }
.fxl-ev__badge { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 44px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fxl-ev__badge--open { background: var(--fxl-btn-bg); color: var(--fxl-btn-text); }
.fxl-ev__badge--soon, .fxl-ev__badge--dday { background: var(--fxl-surface); color: var(--fxl-text); box-shadow: inset 0 0 0 1px var(--fxl-line); }
.fxl-ev__badge--closed { border: 1px dashed var(--fxl-line); color: var(--fxl-muted); }
.fxl-ev__main { position: relative; display: flex; flex: 1; min-width: 0; }
.fxl-ev__line { position: absolute; top: 6px; bottom: -16px; left: 0; width: 4px; }
.fxl-ev__line::before { content: ""; position: absolute; top: 6px; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: var(--fxl-line); }
.fxl-ev__line::after { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--fxl-muted); }
.fxl-ev:last-child .fxl-ev__line::before { display: none; }
.fxl-ev--open .fxl-ev__line::after { background: var(--fxl-accent); }
.fxl-ev__body { flex: 1; min-width: 0; margin-left: 16px; }
.fxl-body .fxl-ev__when { margin: 0 0 4px; font-size: 12px; line-height: 1.4; color: var(--fxl-muted); font-variant-numeric: tabular-nums; }
.fxl-ev__name { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--fxl-text); overflow-wrap: anywhere; word-break: keep-all; white-space: pre-wrap; }
.fxl-sched__name a { display: inline-flex; align-items: center; min-height: 44px; margin: -15px 0; color: var(--fxl-text); text-decoration: underline; text-underline-offset: 3px; }
.fxl-ev__meta { margin: 2px 0 0; font-size: 12px; color: var(--fxl-muted); }
.fxl-ev--closed .fxl-ev__name { color: var(--fxl-muted); }
.fxl-ev__none { margin: 0; padding: 16px; font-size: 13px; text-align: center; color: var(--fxl-muted); }
.fxl-ev__none[hidden] { display: none; }
.fxl-cal__nav { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 0 0; }
.fxl-cal__label { min-width: 64px; font-size: 14px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.fxl-cal__arrow { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 12px; opacity: 0.6; cursor: pointer; }
.fxl-cal__arrow:hover, .fxl-cal__arrow:focus-visible { opacity: 1; }
.fxl-cal { width: 100%; margin: 0; table-layout: fixed; border-collapse: collapse; text-align: center; }
.fxl-cal th { padding: 8px 0; font-size: 10px; font-weight: 600; color: var(--fxl-muted); }
.fxl-cal td { height: 44px; padding: 0; border-top: 1px solid var(--fxl-line); vertical-align: middle; font-size: 12px; font-variant-numeric: tabular-nums; }
.fxl-cal__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.fxl-cal__d { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 999px; font-size: 12px; }
.fxl-cal__today .fxl-cal__d { box-shadow: inset 0 0 0 1.5px var(--fxl-text); font-weight: 700; }
.fxl-cal__btn[aria-pressed="true"] .fxl-cal__d { background: var(--fxl-btn-bg); color: var(--fxl-btn-text); box-shadow: none; }
.fxl-cal__dot { display: block; width: 4px; height: 4px; margin: 1px auto 0; border-radius: 50%; background: var(--fxl-accent); }
.fxl-sched--cal .fxl-evl-wrap { border-top: 1px solid var(--fxl-line); }

/* 한 줄 공지 띠 (0.8.0): 페이지 맨 위 전체 폭, 글이 오른쪽에서 왼쪽으로 흐른다 */
.fxl-bar { position: relative; z-index: 2; height: 36px; overflow: hidden; background: var(--fxl-bar-bg, #111111); color: var(--fxl-bar-fg, #c8f05a); font-size: 13px; font-weight: 600; line-height: 36px; }
.fxl-bar__run { display: flex; width: max-content; animation: fxl-bar-run 30s linear infinite; will-change: transform; }
.fxl-bar__g { display: flex; flex: none; }
.fxl-bar__t { flex: none; padding-right: 48px; white-space: nowrap; }
@keyframes fxl-bar-run { to { transform: translateX(-50%); } }

/* 방문자 검색칸 (0.8.0, 설정의 「검색 기능」) */
.fxl-search--bar .fxl-search__in { padding-right: 44px; }
.fxl-search__x { position: absolute; top: 2px; right: 4px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--fxl-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.fxl-body .fxl-search__count { margin: 8px 2px 0; font-size: 12px; text-align: right; color: var(--fxl-muted); font-variant-numeric: tabular-nums; }
.fxl-body .fxl-search__count[hidden] { display: none; }
.fxl-search__in::-webkit-search-cancel-button, .fxl-search__in::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.fxl-search--bar .fxl-search__none { padding: 24px 0 8px; }
.fxl-search--bar .fxl-search__none p { margin: 0; }
.fxl-search__none-t { margin-bottom: 2px; font-weight: 600; color: var(--fxl-text); }

/* 스마트스토어 블록 (0.8.0): 상품을 옆으로 넘겨 본다 */
.fxl-ss { display: flex; flex-direction: column; align-items: center; padding: 16px 12px 12px; overflow: hidden; border-radius: 12px; background: var(--fxl-face); box-shadow: var(--fxl-shadow); color: var(--fxl-text); }
.fxl-ss__head { display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 10px; }
.fxl-ss__brand { font-size: 12px; font-weight: 500; color: #038929; }
.fxl-body .fxl-ss__title { margin: 4px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--fxl-text); text-align: center; }
.fxl-ss__track { display: flex; gap: 12px; width: calc(100% + 24px); margin: 0 -12px; padding: 0 12px; overflow-x: auto; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.fxl-ss__track::-webkit-scrollbar { display: none; }
.fxl-ss__track.is-drag { cursor: grabbing; user-select: none; }
.fxl-ss__item { flex: none; display: block; width: 108px; color: inherit; text-decoration: none; }
.fxl-ss__img { display: block; width: 108px; height: 108px; overflow: hidden; border-radius: 12px; background: #f5f5f5; }
.fxl-ss__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fxl-ss__name { display: block; margin-top: 6px; overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.fxl-ss__price { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--fxl-muted); font-variant-numeric: tabular-nums; }
.fxl-ss__rate { margin-right: 4px; color: #c04f00; font-weight: 700; }
.fxl-ss__won small { font-size: 10px; font-weight: 500; }
.fxl-ss__foot { width: 120px; height: 20px; margin: 16px auto 0; font-size: 11px; font-weight: 500; line-height: 20px; letter-spacing: 0.08em; text-align: center; color: var(--fxl-muted); }

/* 폼 */
.fxl-formblock__title, .fxl-gb__title { margin-bottom: 8px; font-size: 20px; font-weight: 700; line-height: 1.35; }
.fxl-formblock__intro { margin-bottom: 14px; font-size: 15px; color: var(--fxl-muted); }
.fxl-field { margin: 0 0 14px; }
.fxl-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.fxl-input { display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--fxl-btn-line); border-radius: var(--fxl-r-sm); background: var(--fxl-surface); color: var(--fxl-text); font: 400 16px/1.5 var(--fxl-font); }
.fxl-input--area { min-height: 104px; resize: vertical; }
.fxl-input::placeholder, .fxl-search__in::placeholder { color: var(--fxl-muted); opacity: 1; }
.fxl-input[aria-invalid="true"] { border-width: 3px; padding: 8px 12px; border-color: var(--fxl-text); }
.fxl-check input[aria-invalid="true"] { outline: 3px solid var(--fxl-text); outline-offset: 2px; }
.fxl-field__err { display: flex; gap: 6px; margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.fxl-field__err::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--fxl-text); color: var(--fxl-bg); font-size: 12px; line-height: 18px; text-align: center; }
.fxl-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; font-size: 15px; cursor: pointer; }
.fxl-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--fxl-accent); }
.fxl-check em { font-style: normal; color: var(--fxl-muted); font-size: 13px; }
.fxl-consent { margin: 4px 0 12px; padding: 4px 0; border-top: 1px solid var(--fxl-line); border-bottom: 1px solid var(--fxl-line); }
.fxl-consent .fxl-field { margin-bottom: 4px; }
.fxl-consent__more { padding: 0 0 8px 32px; font-size: 13px; color: var(--fxl-muted); }
.fxl-consent__more summary { display: flex; align-items: center; cursor: pointer; min-height: 44px; }
.fxl-consent__more p { margin-top: 4px; white-space: normal; }
.fxl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fxl-form__msg { min-height: 1.5em; margin: 4px 0 10px; font-size: 14px; font-weight: 600; }
.fxl-form__msg[data-state] { display: flex; gap: 8px; padding: 8px 12px; border: 1px solid var(--fxl-line); border-radius: var(--fxl-r-sm); background: var(--fxl-surface); }
.fxl-form__msg[data-state]::before { content: "✓"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--fxl-accent); color: var(--fxl-bg); font-size: 12px; line-height: 18px; text-align: center; }
.fxl-form__msg[data-state="error"] { border: 2px solid var(--fxl-text); padding: 7px 11px; }
.fxl-form__msg[data-state="error"]::before { content: "!"; background: var(--fxl-text); }
.fxl-btn--submit { justify-content: center; }
.fxl-btn[disabled] { opacity: 0.6; cursor: wait; }
.fxl-gb__list { margin-top: 18px; }
.fxl-gb__item { padding: 12px 0; border-top: 1px solid var(--fxl-line); }
.fxl-gb__msg { font-size: 15px; }
.fxl-gb__by { margin-top: 4px; font-size: 13px; color: var(--fxl-muted); }
.fxl-gb__by strong { color: var(--fxl-text); }
.fxl-gb__empty { padding: 16px 0; font-size: 14px; color: var(--fxl-muted); }
.fxl-morebtn { width: 100%; min-height: 44px; margin-top: 8px; border: 1.5px solid var(--fxl-btn-line); border-radius: var(--fxl-radius); background: transparent; color: var(--fxl-text); font: 600 14px var(--fxl-font); cursor: pointer; }

/* 폼 블록이 이어질 때 구획 */
.fxl-block--guestbook, .fxl-block--inquiry, .fxl-block--lead { padding-top: 28px; border-top: 2px solid var(--fxl-text); }
.fxl-block + .fxl-block--guestbook, .fxl-block + .fxl-block--inquiry, .fxl-block + .fxl-block--lead { margin-top: 36px; }

/* 연락처(명함) */
.fxl-card { padding: 22px 20px; border: 1.5px solid var(--fxl-text); border-radius: var(--fxl-r-card); background: var(--fxl-surface); }
.fxl-card__top { display: flex; align-items: center; gap: 16px; }
.fxl-card__photo { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; }
.fxl-card__init { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--fxl-btn-bg); color: var(--fxl-btn-text); font-size: 30px; font-weight: 700; }
.fxl-card__name { font-size: 22px; font-weight: 700; line-height: 1.3; }
.fxl-card__sub { font-size: 14px; color: var(--fxl-muted); }
.fxl-card__rows { display: grid; gap: 2px; margin: 16px 0; }
.fxl-card__rows li { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.fxl-card__rows .fxl-ico { flex: none; color: var(--fxl-muted); }
.fxl-card__rows a { display: inline-flex; align-items: center; min-height: 44px; }
.fxl-card__note { margin-bottom: 14px; font-size: 14px; color: var(--fxl-muted); }
.fxl-inapp { display: none; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--fxl-line); border-radius: var(--fxl-r-sm); background: var(--fxl-bg); font-size: 13px; line-height: 1.6; }
.fxl-inapp[data-on] { display: block; }

/* 검색 */
.fxl-search { position: relative; }
.fxl-search .fxl-ico { position: absolute; left: 14px; top: 14px; color: var(--fxl-muted); pointer-events: none; }
.fxl-search__in { display: block; width: 100%; min-height: 48px; padding: 10px 14px 10px 44px; border: 1.5px solid var(--fxl-btn-line); border-radius: var(--fxl-radius); background: var(--fxl-surface); color: var(--fxl-text); font: 400 16px/1.5 var(--fxl-font); }
.fxl-search__none { margin-top: 10px; font-size: 14px; color: var(--fxl-muted); text-align: center; }
.fxl-search__none[hidden] { display: none; }
.fxl-search__none .fxl-chip { margin-top: 10px; }

/* 판매 카드(상품·강의·멤버십) — 색은 전부 테마 변수(--fxl-*). 배치 3종은 서로 다르게 생겼다: 큰 카드(면) · 목록(줄) · 격자(타일). */
.fxl-shop__title { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.35; }
.fxl-shop__list { display: grid; gap: 14px; }
.fxl-shop__item { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fxl-shop__media { display: block; overflow: hidden; }
.fxl-shop__img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--fxl-surface); transition: transform 0.3s var(--fxl-ease); }
.fxl-shop__body { min-width: 0; }
.fxl-shop__flag, .fxl-shop__badge { display: inline-block; margin: 0 6px 6px 0; padding: 1px 9px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; }
.fxl-shop__flag { border-color: var(--fxl-text); background: var(--fxl-text); color: var(--fxl-bg); }
.fxl-shop__badge { color: var(--fxl-accent); }
.fxl-shop__name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.fxl-shop__desc { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--fxl-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.fxl-shop__meta { display: flex; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--fxl-muted); }
.fxl-shop__meta li + li::before { content: "·"; margin: 0 6px; }
.fxl-shop__perks { display: grid; gap: 4px; margin-top: 10px; font-size: 14px; }
.fxl-shop__benefit { position: relative; padding-left: 16px; }
.fxl-shop__benefit::before { content: ""; position: absolute; left: 1px; top: 0.7em; width: 6px; height: 6px; border-radius: 1px; background: var(--fxl-accent); }
.fxl-shop__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 8px 0 0; }
.fxl-shop__now { font-size: 20px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.fxl-shop__per { font-size: 14px; font-weight: 600; color: var(--fxl-muted); }
.fxl-shop__was { font-size: 14px; color: var(--fxl-muted); font-variant-numeric: tabular-nums; }
.fxl-shop__pct { order: -1; font-size: 14px; font-weight: 700; color: var(--fxl-accent); }
.fxl-shop__cta { min-height: 44px; }
.fxl-shop__cta:focus-visible { outline-offset: 3px; }
.fxl-shop__soldout { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1.5px dashed var(--fxl-muted); border-radius: var(--fxl-radius); color: var(--fxl-muted); font-size: 14px; font-weight: 700; }
.fxl-shop__item.is-soldout .fxl-shop__img { filter: grayscale(1); opacity: 0.55; }
.fxl-shop__item.is-soldout .fxl-shop__name, .fxl-shop__item.is-soldout .fxl-shop__now { color: var(--fxl-muted); }

/* 큰 카드: 면 하나에 사진·설명·가격·버튼 */
.fxl-shop--card .fxl-shop__item { gap: 14px; padding: 0 0 16px; border: 1px solid var(--fxl-line); border-radius: var(--fxl-r-card); background: var(--fxl-surface); overflow: hidden; }
.fxl-shop--card .fxl-shop__img { aspect-ratio: 4 / 3; }
.fxl-shop--card .fxl-shop__body, .fxl-shop--card .fxl-shop__soldout { margin: 0 16px; }
.fxl-shop--card .fxl-shop__item:not(.has-img) .fxl-shop__body { margin-top: 16px; }
.fxl-shop--card .fxl-shop__cta { min-height: 52px; margin: 0 16px; width: auto; }
.fxl-shop--card .fxl-shop__item.is-featured { border: 2px solid var(--fxl-text); padding-bottom: 15px; }
.fxl-btnstyle--offset .fxl-shop--card .fxl-shop__item { border-color: var(--fxl-text); box-shadow: 4px 4px 0 var(--fxl-text); }

/* 목록: 상자 없이 가는 줄로 나눈 행. 좁은 화면에서도 버튼이 옆이 아니라 아래로 내려간다 */
.fxl-shop--list .fxl-shop__list { gap: 0; border-top: 2px solid var(--fxl-text); }
.fxl-shop--list .fxl-shop__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--fxl-line); }
.fxl-shop--list .fxl-shop__item.has-img { grid-template-columns: 88px minmax(0, 1fr); }
.fxl-shop--list .fxl-shop__item.has-img .fxl-shop__media { grid-row: 1 / span 2; border-radius: var(--fxl-r-sm); }
.fxl-shop--list .fxl-shop__img { width: 88px; height: 88px; }
.fxl-shop--list .fxl-shop__name { font-size: 16px; }
.fxl-shop--list .fxl-shop__now { font-size: 18px; }
.fxl-shop--list .fxl-shop__cta, .fxl-shop--list .fxl-shop__soldout { justify-self: start; grid-column: 2; }
.fxl-shop--list .fxl-shop__item:not(.has-img) .fxl-shop__cta, .fxl-shop--list .fxl-shop__item:not(.has-img) .fxl-shop__soldout { grid-column: 1; }
.fxl-shop--list .fxl-shop__item.is-featured { padding-left: 12px; padding-right: 12px; outline: 2px solid var(--fxl-text); outline-offset: -2px; }

/* 격자: 사진 타일 2열 */
.fxl-shop--grid .fxl-shop__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
.fxl-shop--grid .fxl-shop__item { gap: 8px; }
.fxl-shop--grid .fxl-shop__img { aspect-ratio: 1 / 1; border-radius: var(--fxl-r-sm); }
.fxl-shop--grid .fxl-shop__media { border-radius: var(--fxl-r-sm); }
.fxl-shop--grid .fxl-shop__name { font-size: 15px; min-height: 2.8em; } /* 2줄 자리를 늘 잡아 가격·버튼 위치가 카드마다 같다 */
.fxl-shop--grid .fxl-shop__now { font-size: 17px; }
.fxl-shop--grid .fxl-shop__desc { display: none; }
.fxl-shop--grid .fxl-shop__cta, .fxl-shop--grid .fxl-shop__soldout { width: 100%; margin-top: auto; padding: 0 8px; }

/* 예약·후원 위젯 / 광고 자리 — 제공자가 그린 HTML 을 담는 칸 */
.fxl-shop__widget { min-width: 0; overflow-x: clip; overflow-wrap: anywhere; color: var(--fxl-text); }
.fxl-shop__widget img, .fxl-shop__widget iframe, .fxl-shop__widget video, .fxl-shop__widget table { max-width: 100%; }
.fxl-shop--ad .fxl-shop__widget { display: flow-root; }
.fxl-shop--widget .fxl-shop__title { margin-bottom: 14px; }

@media (hover: hover) { .fxl-shop__media:hover .fxl-shop__img { transform: scale(1.03); } }

/* ---------- 5. Overlay: 공유 시트 · 배경음악 ---------- */
.fxl-share { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.55); }
.fxl-share[hidden] { display: none; }
.fxl-share__sheet { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--fxl-bg); color: var(--fxl-text); animation: fxl-up 0.32s var(--fxl-ease); }
.fxl-share__head { display: flex; align-items: center; justify-content: space-between; }
.fxl-share__title { font-size: 18px; font-weight: 700; }
.fxl-share__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--fxl-text); cursor: pointer; }
.fxl-share__qr { width: 208px; height: 208px; margin: 10px auto 6px; padding: 0; background: #ffffff; line-height: 0; }
.fxl-share__qr svg, .fxl-share__qr img { width: 100%; height: 100%; }
.fxl-share__url { margin: 6px 0 14px; font-size: 13px; color: var(--fxl-muted); text-align: center; word-break: break-all; }
.fxl-share__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fxl-share__msg { min-height: 1.4em; margin-top: 10px; font-size: 13px; font-weight: 600; text-align: center; }
@keyframes fxl-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fxl-share__sheet { animation: none; } }
.fxl-bgm { position: fixed; left: 16px; bottom: 16px; z-index: 40; bottom: calc(16px + env(safe-area-inset-bottom)); }
.fxl-bgm__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--fxl-btn-line); border-radius: var(--fxl-radius); background: var(--fxl-bg); color: var(--fxl-text); font: 600 13px/1 var(--fxl-font); cursor: pointer; }
.fxl-bgm__btn[aria-pressed="true"] { background: var(--fxl-btn-bg); color: var(--fxl-btn-text); }

/* ---------- 5b. 배경 사진 — 글자는 항상 반투명 받침 위 ----------
   --fxl-panel 은 PHP(FXL_Theme::panel)가 사진의 최악 픽셀(흑·백 양극단)에서도 글자 4.5:1 이 나오도록 계산한 rgba 다.
   사진은 프로필 사진·블록 사이·양옆 여백·구분선·여백 블록에서 그대로 보인다. 자체 불투명 면이 있는 블록(연락처·공지)은 받침이 필요 없다. */
.fxl-has-bg .fxl-block:not(.fxl-block--spacer):not(.fxl-block--divider):not(.fxl-block--header):not(.fxl-block--link):not(.fxl-block--file):not(.fxl-block--contact):not(.fxl-block--notice) { padding: 16px; background: var(--fxl-panel); border-radius: var(--fxl-r-card); }
.fxl-has-bg .fxl-block--file { background: var(--fxl-panel); border-radius: var(--fxl-radius); }
.fxl-has-bg:not(.fxl-layout--card) .fxl-profile__text { padding: 14px 18px; background: var(--fxl-panel); border-radius: var(--fxl-r-card); }
.fxl-has-bg .fxl-divider--label, .fxl-has-bg .fxl-empty, .fxl-has-bg .fxl-foot { padding: 10px 16px; background: var(--fxl-panel); border-radius: var(--fxl-r-card); }
.fxl-has-bg .fxl-affnote { margin: 6px 0 0; padding: 6px 12px; background: var(--fxl-panel); border-radius: var(--fxl-r-sm); } /* 알약 링크 받침의 모서리 밖으로 나가지 않게 자체 받침 */
.fxl-has-bg .fxl-block--guestbook, .fxl-has-bg .fxl-block--inquiry, .fxl-has-bg .fxl-block--lead { border-top-width: 0; }
.fxl-has-bg .fxl-shop--card .fxl-shop__item { background: transparent; } /* 판매 블록도 받침(위 규칙)이 덮는다 — 카드는 자체 면을 빼서 글자가 받침 위에만 놓인다 */
.fxl-has-bg .fxl-shop--list .fxl-shop__item.is-featured { outline-color: var(--fxl-text); }
.fxl-has-bg .fxl-foot { margin-top: 48px; }

/* ---------- 6. Responsive ---------- */
@media (min-width: 768px) {
	.fxl-share { align-items: center; }
	.fxl-share__sheet { border-radius: 20px; }
}
/* 넓은 화면 페이지의 공통 모양(모든 화면 폭) — 리틀리형 수치(설계서 §1). 480 페이지는 .fxl-wide 가 없어 그대로다. */
.fxl-wide .fxl-sharebtn { top: 20px; right: 20px; width: 38px; min-width: 38px; min-height: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; }
.fxl-wide .fxl-sharebtn__t { display: none; }
.fxl-wide .fxl-sharebtn::after { content: ""; position: absolute; inset: -3px; } /* 터치 영역 44 */
.fxl-wide .fxl-profile__img { width: 90px; height: 90px; border-radius: 20px; box-shadow: none; }
.fxl-wide .fxl-profile__name { font-size: 18px; font-weight: 600; line-height: 28px; }
.fxl-wide .fxl-profile__tag { font-size: 14px; font-weight: 500; line-height: 22px; }
.fxl-wide .fxl-profile__bio { margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 22px; }
.fxl-wide .fxl-sched__title, .fxl-wide .fxl-shop__title { font-size: 18px; font-weight: 600; line-height: 28px; color: var(--fxl-text); }
.fxl-wide .fxl-shop--grid .fxl-shop__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
.fxl-wide .fxl-shop--grid .fxl-shop__img, .fxl-wide .fxl-shop--grid .fxl-shop__media { border-radius: 14px; }
.fxl-wide .fxl-shop--grid .fxl-shop__name { min-height: 0; font-size: 14px; font-weight: 500; line-height: 22px; }
.fxl-wide .fxl-shop--grid .fxl-shop__badge { margin: 0; padding: 2px 10px; border: 0; border-radius: 4px; background: var(--fxl-line); color: var(--fxl-text); font-size: 12px; font-weight: 500; line-height: 18px; }
.fxl-wide .fxl-shop--grid .fxl-shop__flag { display: none; }

/* 라이브 블록 — 새 규칙은 .fxl-live 아래라 다른 블록·페이지는 바뀌지 않는다. */
.fxl-live__title { margin-bottom: 10px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.fxl-live__pane[hidden] { display: none; }
.fxl-live__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: var(--fxl-r-card); background: var(--fxl-surface); padding: 0; }
.fxl-live__link, .fxl-live__play { cursor: pointer; text-decoration: none; }
.fxl-live__play { display: block; width: 100%; height: 100%; border: 0; background: none; padding: 0; color: inherit; }
.fxl-live__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fxl-live__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fxl-live__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--fxl-text); color: var(--fxl-bg); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.fxl-live__ph--youtube { background: #b3261e; color: #fff; }
.fxl-live__ph--instagram { background: #9f2d6b; color: #fff; }
.fxl-live__ph--tiktok { background: #111; color: #fff; }
.fxl-live__ph--naver { background: #03843c; color: #fff; }
.fxl-live__badge { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 4px; background: #d3232f; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; letter-spacing: 0.04em; }
.fxl-live__playicon { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); transition: transform 0.2s ease; }
.fxl-live__playicon::after { content: ""; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.fxl-live__media:hover .fxl-live__playicon { transform: scale(1.08); }
.fxl-live__when { margin-top: 10px; font-size: 14px; color: var(--fxl-muted); }
.fxl-live__count { margin-top: 2px; font-size: 28px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.fxl-live__ended { margin-top: 10px; font-size: 14px; color: var(--fxl-muted); }
.fxl-live__go { margin-top: 10px; }
.fxl-live__extra { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .fxl-live__playicon { transition: none; } }

/* PC 넓은 화면(페이지 설정 「PC 화면 폭 1000」 → body.fxl-wide) — 6칸 격자, 블록마다 「PC 배치」(.fxl-pc--*).
   모든 규칙이 .fxl-wide 아래라 480 페이지는 바뀌지 않는다. 1023 이하는 한 줄 쌓기 그대로. */
@media (min-width: 1024px) {
	.fxl-wide .fxl-page { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 16px; max-width: 1000px; }
	.fxl-wide .fxl-page > * { grid-column: 1 / -1; }
	.fxl-wide .fxl-block + .fxl-block, .fxl-wide .fxl-block--header + .fxl-block { margin-top: 0; }
	.fxl-wide .fxl-page > .fxl-pc--half { grid-column: span 3; }
	.fxl-wide .fxl-page > .fxl-pc--third { grid-column: span 2; }
	.fxl-wide .fxl-page > .fxl-pc--narrow { justify-self: center; width: 100%; max-width: 640px; }
	.fxl-wide .fxl-page > .fxl-pc--half_tall { grid-column: span 3; grid-row: span 3; }
	.fxl-wide .fxl-foot { margin-top: 32px; }
	.fxl-wide .fxl-profile { flex-direction: row; align-items: center; gap: 32px; text-align: left; }
	.fxl-wide .fxl-profile__img { width: 120px; height: 120px; flex: none; }
	.fxl-wide .fxl-sharebtn { top: 24px; }
	.fxl-wide .fxl-profile__name { font-size: 24px; font-weight: 700; line-height: 1.35; }
	.fxl-wide .fxl-profile__tag, .fxl-wide .fxl-profile__bio { font-size: 16px; line-height: 26px; }
	.fxl-wide .fxl-shop--grid .fxl-shop__list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 380px) {
	.fxl-dday__num { font-size: 44px; }
}


/* ---------- 9b. 떠 있는 버튼 (3차, 인포크 값) ----------
   링크 하나를 화면 아래에 고정. 맨 아래 내용이 가리지 않게 페이지 아래 여백을 늘린다. */
.fxl-floatwrap { position: fixed; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom)); max-width: 440px; margin: 0 auto; padding: 0 16px; z-index: 9999; pointer-events: none; }
.fxl-float { display: block; height: 56px; padding: 0 20px; border-radius: 12px; background: var(--fxl-btn-bg); color: var(--fxl-btn-text); font-family: var(--fxl-font); font-size: 15px; font-weight: 600; line-height: 56px; letter-spacing: -0.4px; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 16px 36px -20px rgba(0, 6, 46, 0.2), 0 16px 64px 0 rgba(0, 0, 85, 0.02), 0 12px 60px 0 rgba(0, 0, 0, 0.15); pointer-events: auto; animation: fxl-floating 2.5s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
@keyframes fxl-floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.fxl-has-float .fxl-page { padding-bottom: calc(24px + 56px + 20px + 16px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .fxl-float { animation: none; } }

/* ---------- 10. 페이지 단위 디자인 값 (0.7.0) ----------
   값이 기본이면 body 에 클래스가 붙지 않는다 — 아래 규칙은 고객이 고른 페이지에만 닿는다. */
/* 블록 정렬: 왼쪽 */
.fxl-balign--left .fxl-lk, .fxl-balign--left .fxl-group__title, .fxl-balign--left .fxl-text--sec, .fxl-balign--left .fxl-caption { text-align: left; }
.fxl-balign--left .fxl-tags { justify-content: flex-start; }
.fxl-balign--left .fxl-btn { justify-content: flex-start; text-align: left; }
.fxl-balign--left .fxl-lk--card .fxl-lk__cta { text-align: center; }
/* 블록 정렬: 가운데(왼쪽 정렬 레이아웃에서도 가운데) */
.fxl-balign--center .fxl-btn { justify-content: center; text-align: center; }
.fxl-balign--center .fxl-lk, .fxl-balign--center .fxl-group__title, .fxl-balign--center .fxl-text--sec { text-align: center; }
.fxl-balign--center .fxl-tags { justify-content: center; }

/* 블록 애니메이션 */
@keyframes fxl-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes fxl-bounce { 0%, 40%, 100% { transform: translateY(0); } 10% { transform: translateY(-7px); } 20% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
.fxl-anim--wave .fxl-lk, .fxl-anim--wave .fxl-btn { animation: fxl-wave 2.6s ease-in-out infinite; }
.fxl-anim--bounce .fxl-lk, .fxl-anim--bounce .fxl-btn { animation: fxl-bounce 3.2s ease-in-out infinite; }
.fxl-anim--wave .fxl-block:nth-of-type(8n+2) .fxl-lk, .fxl-anim--wave .fxl-block:nth-of-type(8n+2) .fxl-btn { animation-delay: -0.3s; }
.fxl-anim--wave .fxl-block:nth-of-type(8n+3) .fxl-lk, .fxl-anim--wave .fxl-block:nth-of-type(8n+3) .fxl-btn { animation-delay: -0.6s; }
.fxl-anim--wave .fxl-block:nth-of-type(8n+4) .fxl-lk, .fxl-anim--wave .fxl-block:nth-of-type(8n+4) .fxl-btn { animation-delay: -0.9s; }
.fxl-anim--wave .fxl-block:nth-of-type(8n+5) .fxl-lk, .fxl-anim--wave .fxl-block:nth-of-type(8n+5) .fxl-btn { animation-delay: -1.2s; }
.fxl-anim--wave .fxl-block:nth-of-type(8n+6) .fxl-lk, .fxl-anim--wave .fxl-block:nth-of-type(8n+6) .fxl-btn { animation-delay: -1.5s; }
.fxl-anim--wave .fxl-block:nth-of-type(8n+7) .fxl-lk, .fxl-anim--wave .fxl-block:nth-of-type(8n+7) .fxl-btn { animation-delay: -1.8s; }
.fxl-anim--wave .fxl-block:nth-of-type(8n+8) .fxl-lk, .fxl-anim--wave .fxl-block:nth-of-type(8n+8) .fxl-btn { animation-delay: -2.1s; }

/* 프로필: 정렬(레이아웃과 분리) · 글자 크기 · SNS 위치 */
.fxl-palign--left .fxl-profile { flex-direction: row; align-items: center; gap: 16px; text-align: left; }
.fxl-palign--left .fxl-profile__img { flex: none; }
.fxl-palign--center .fxl-profile { flex-direction: column; align-items: center; text-align: center; }
.fxl-psize--sm .fxl-profile__name { font-size: 18px; line-height: 25px; }
.fxl-psize--sm .fxl-profile__tag, .fxl-psize--sm .fxl-profile__bio { font-size: 12px; line-height: 17px; }
.fxl-psize--lg .fxl-profile__name { font-size: 26px; line-height: 36px; }
.fxl-psize--lg .fxl-profile__tag, .fxl-psize--lg .fxl-profile__bio { font-size: 16px; line-height: 24px; }
.fxl-spos--profile .fxl-block--header + .fxl-block--insns { margin-top: 16px; }
.fxl-spos--profile .fxl-block--insns + .fxl-block:not(.fxl-block--insns) { margin-top: 32px; }
.fxl-spos--profile .fxl-block--insns + .fxl-block--insns { margin-top: 8px; }
.fxl-palign--left .fxl-block--insns .fxl-sns { justify-content: flex-start; }
.fxl-palign--center .fxl-block--insns .fxl-sns { justify-content: center; }

/* 움직임 줄이기 — 다른 모든 선언보다 뒤에 둔다(앞에 두면 뒤의 전환 선언이 덮는다). */
@media (prefers-reduced-motion: reduce) {
	.fxl-btn, .fxl-sharebtn, .fxl-chip, .fxl-sns__a, .fxl-lk { transition: none; }
	.fxl-click--lift .fxl-btn:hover, .fxl-click--press .fxl-btn:hover, .fxl-click--press .fxl-btn:active, .fxl-click--lift .fxl-btn:active { transform: none; }
	.fxl-lk:active, .fxl-click--lift .fxl-lk:hover, .fxl-click--lift .fxl-lk:focus-visible, .fxl-click--press .fxl-lk:hover, .fxl-click--press .fxl-lk:active { transform: none; }
	.fxl-share__sheet { animation: none; }
	.fxl-shop__img { transition: none; }
	.fxl-shop__media:hover .fxl-shop__img { transform: none; }
	html.fxl-html { scroll-behavior: auto; }
	.fxl-anim--wave .fxl-lk, .fxl-anim--wave .fxl-btn, .fxl-anim--bounce .fxl-lk, .fxl-anim--bounce .fxl-btn,
	.fxl-anim--wave .fxl-block .fxl-lk, .fxl-anim--wave .fxl-block .fxl-btn { animation: none; }
	/* 0.8.0: 공지 띠는 흐르지 않고 글이 멈춘 채 보인다(복제한 글은 숨김) */
	.fxl-bar { height: auto; min-height: 36px; }
	.fxl-bar__run { width: auto; animation: none; will-change: auto; }
	.fxl-bar__g:nth-child(2), .fxl-bar__t:nth-child(n+2) { display: none; }
	.fxl-bar__t { display: block; padding: 8px 16px; line-height: 1.5; text-align: center; white-space: normal; }
}