/* What you want? — 사이트 공통 스타일 (메인 · 목록 · 글 · 후기 · 404)
   색·글꼴은 맨 위 :root 값만 바꾸면 전체에 적용됩니다. */

/* Pretendard 글꼴 정의는 fonts.css 에 있어요 (조각으로 나눈 가벼운 글꼴) */

:root {
  --cream: #fffbe6;
  --brown: #351810;
  --pale: color-mix(in srgb, var(--brown) 9%, var(--cream));
  --paper: color-mix(in srgb, var(--brown) 4.5%, var(--cream));
  --muted: color-mix(in srgb, var(--brown) 62%, var(--cream));
  --line: color-mix(in srgb, var(--brown) 18%, var(--cream));
  --page-bg: var(--cream);   /* 글별로 바뀔 수 있는 페이지 배경색 */
  --font-body: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-en: 'Roboto Condensed', Arial, sans-serif;
  /* scooping! 커서 (assets/img/ui/scoop-cursor.png 를 넣으면 자동으로 그 이미지로 바뀜) */
  --scoop-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M26 26 40 40' stroke='%23351810' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M5 18a13 13 0 0 1 26 0c0 4-2 7-5 9H10c-3-2-5-5-5-9z' fill='%23fffbe6' stroke='%23351810' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M12 20h12' stroke='%23351810' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 14 16, auto;
}

* { box-sizing: border-box; }
html { background: var(--page-bg); }
body {
  background: var(--page-bg);
  color: var(--brown);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
}
a { color: inherit; text-decoration: none; }
html { -webkit-tap-highlight-color: transparent; }
a, button, label, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }

/* -- 1차 복사 방지: 글자 선택·이미지 끌어가기·길게 눌러 저장 막기 (입력칸은 예외) -- */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
img, svg { -webkit-user-drag: none; user-drag: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.shell { max-width: 600px; margin: 0 auto; container-type: inline-size; }

/* 스크립트가 준비될 때까지 애니메이션 대상만 잠깐 가림 (2.5초 뒤에는 자동 해제) */
.js-wait .post-list, .js-wait .tiles .sq { visibility: hidden; }

/* -- 페이지별 바깥 여백·폭 -- */
.page-list, .page-note, .page-404 { padding-inline: 20px; padding-block: 64px 80px; }
.page-list { font-weight: 600; }
.page-main .shell { max-width: 1600px; }
.clip-x { overflow-x: clip; }   /* 화면 폭 100vw 배경이 가로 스크롤을 만들지 않게(메인 화면을 감싸는 칸에서만) */
@supports not (overflow: clip) { .clip-x { overflow-x: hidden; } }
.page-detail .shell { background: var(--page-bg); }

/* -- 로고 + 메뉴 (목록·후기·404) -- */
.logo-fill { fill: var(--brown); }
.logo-area { display: flex; justify-content: center; }
.logo-area a { display: contents; }
.page-list .logo-area, .page-404 .logo-area { aspect-ratio: 975 / 453; align-items: center; }
.page-list .logo-area svg, .page-404 .logo-area svg { height: 85%; width: auto; max-width: 100%; display: block; }
.page-note .logo-area svg { width: 29cqw; height: auto; display: block; }
@container (max-width: 480px) {
  .page-list .logo-area svg, .page-404 .logo-area svg { height: 65%; }
}

.board-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 62%;
  margin: 7cqw auto 0;
  text-align: center;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(14px, 2.8cqw, 20px);
}
.board-nav a { justify-self: center; padding: 0.15em 0.6em; color: var(--brown); }
.board-nav a[aria-current="page"] { background: var(--brown); color: var(--cream); }

/* -- ART 분류 탭 -- */
.sub-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4em 1.8em;
  margin-top: 8cqw;
  font-family: var(--font-en);
  font-size: clamp(12px, 2.3cqw, 16px);
}
.sub-nav button {
  font: inherit;
  padding: 0.3em 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.sub-nav button[aria-pressed="true"] { color: var(--brown); border-bottom-color: var(--brown); }
.sub-nav + .post-list { margin-top: 6cqw; }

/* -- 글 목록 -- */
.post-list {
  list-style: none;
  margin: 18cqw 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: max(4px, 1cqw);
}
.row {
  --box: #f9dfe4;
  --box-text: var(--brown);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5cqw;
  aspect-ratio: 975 / 224;
  padding: 4.2cqw 3.8cqw;
  font-size: clamp(13px, 2.7cqw, 19px);
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}
.row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--box);
  background-image: var(--img-d, none);
  background-size: cover;
  background-position: center;
}
.row-title, .author-box { position: relative; z-index: 2; }
.row-title { display: flex; align-items: stretch; gap: 0.55em; }
.title-box {
  flex: 0 0 auto;
  padding: 0.45em 0.7em;
  background: var(--box);
  color: var(--box-text);
  white-space: nowrap;
}
.badge-e {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  background: var(--brown);
  color: var(--cream);
  font-family: var(--font-en);
  font-weight: 700;
}
.author-box {
  align-self: flex-end;
  padding: 0.45em 0.6em;
  background: var(--box);
  color: var(--box-text);
  white-space: nowrap;
}
@container (min-width: 480px) {
  .post-list { margin-top: 18cqw; }
}
@container (max-width: 480px) {
  .row { aspect-ratio: 975 / 300; }
  .row::before { background-image: var(--img-m, var(--img-d, none)); }
}
.sub-nav + .post-list { margin-top: 6cqw; }

/* 호버·터치·키보드 포커스: 제목·작성자 박스 반전 */
.title-box, .author-box { transition: background-color 0.2s ease, color 0.2s ease; }
.row:focus-visible .title-box, .row:focus-visible .author-box,
.row:active .title-box, .row:active .author-box { background: var(--brown); color: var(--cream); }
@media (hover: hover) {
  .row:hover .title-box, .row:hover .author-box { background: var(--brown); color: var(--cream); }
}

/* 목록 첫 로딩: 행이 화면에 들어올 때 아래에서 올라오며 나타남 */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: var(--delay, 0s); }
@media (prefers-reduced-motion: reduce) {
  .title-box, .author-box { transition: none; }
}

.empty-note, .notfound-note {
  margin: 12cqw 0 0;
  text-align: center;
  font-size: clamp(13px, 2.3cqw, 15.5px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--muted);
}
.notfound-note:first-of-type { margin-top: 8cqw; }
.notfound-note + .notfound-note { margin-top: 1.4em; }
.notfound-note a { color: var(--brown); text-decoration: underline; text-underline-offset: 0.3em; }

/* -- 글 상세: 상단 이미지 + 제목/작성자 박스 -- */
.hero {
  --box: #f9dfe4;
  --box-text: var(--brown);
  aspect-ratio: 1293 / 756;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1.2cqw;
  padding: 0 3cqw 5cqw;
  background-color: var(--box);
  background-image: var(--hero-img, none);
  background-size: cover;
  background-position: center;
  font-size: clamp(13px, 2.7cqw, 19px);
  font-weight: 600;
  line-height: 1.35;
}
.hero .title-box, .hero .author-box {
  margin: 0;
  padding: 0.45em 0.7em;
  background: var(--box);
  color: var(--box-text);
  white-space: nowrap;
  font-size: inherit;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero .author-box { padding-inline: 0.6em; align-self: center; }

/* -- 글 본문 (에디터에서 만든 서식 포함) -- */
/* 줄 사이 간격 두 가지를 따로 조절해요.
   --line-height : 한 문단 안에서 줄이 넘어갈 때의 줄 사이 간격 (글자 크기의 몇 배)
   --para-gap    : 엔터로 문단을 나눌 때 문단 사이에 더해지는 간격 (글자 크기의 몇 배) */
.post-body {
  --line-height: 1.9;
  --para-gap: 1.1em;
  padding: 8cqw 5cqw 16cqw;
  font-size: clamp(13px, 2.3cqw, 15.5px);
  font-weight: 400;
  line-height: var(--line-height);
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.post-body p, .post-body h1, .post-body h2, .post-body h3, .post-body h4,
.post-body blockquote, .post-body ul, .post-body ol { margin: 0; }
.post-body p:empty { min-height: calc(var(--line-height) * 1em); }
/* 문단 사이 간격: 글이 있는 문단 바로 다음에 글이 있는 문단이 올 때만 더함.
   빈 줄로 띄운 곳, 이미지 문단, 상자 문단은 건드리지 않아서 글마다 띄우는 방식이 달라도 이중으로 벌어지지 않음 */
.post-body p:not(.ql-box-true):not(:empty):not(:has(> br:only-child)):not(:has(img)) + p:not(.ql-box-true):not(:empty):not(:has(> br:only-child)):not(:has(img)) { margin-top: var(--para-gap); }
.post-body h1 { font-size: 1.8em; line-height: 1.4; font-weight: 600; }
.post-body h2 { font-size: 1.5em; line-height: 1.4; font-weight: 600; }
.post-body h3 { font-size: 1.25em; line-height: 1.5; font-weight: 600; }
.post-body h4 { font-size: 1.1em; line-height: 1.6; font-weight: 600; }
.post-body strong, .post-body b { font-weight: 600; }
.post-body a { text-decoration: underline; text-underline-offset: 0.25em; }
.post-body blockquote { margin: 0.4em 0; padding-left: 1em; border-left: 3px solid var(--brown); }
.post-body ul, .post-body ol { padding-left: 1.6em; }
.post-body li { padding-left: 0.2em; }
.post-body img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.post-body iframe.ql-video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 0.6em 0; }
.post-body .ql-box-true { margin: 0.5em 0; padding: 0.9em 1em; border: 1px solid var(--brown); }
.post-body .ql-box-true:has(+ .ql-box-true) { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.post-body .ql-box-true + .ql-box-true { margin-top: 0; padding-top: 0; border-top: 0; }
.post-body .ql-align-center { text-align: center; }
.post-body .ql-align-right { text-align: right; }
.post-body .ql-align-justify { text-align: justify; }
.post-body .ql-indent-1 { padding-left: 3em; }
.post-body .ql-indent-2 { padding-left: 6em; }
.post-body .ql-indent-3 { padding-left: 9em; }
.post-body .ql-indent-4 { padding-left: 12em; }
.post-body .ql-indent-5 { padding-left: 15em; }
.post-body .ql-indent-6 { padding-left: 18em; }
.post-body .ql-indent-7 { padding-left: 21em; }
.post-body .ql-indent-8 { padding-left: 24em; }
.post-body .ql-align-center img { margin-inline: auto; }

/* -- 이미지 확대경 (글 화면에서 data-zoom 표시가 있는 이미지에만) -- */
.zoomable { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; }
.zoomable img { cursor: zoom-in; }
.zoomable.is-on img { cursor: none; }
.zoomable.is-on.touch-last img { cursor: default; }
.zoomable.is-on { touch-action: none; }
.zoom-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 0; background: var(--brown); color: var(--cream); cursor: pointer;
}
.zoom-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }
.zoom-btn .i-off { display: none; }
.zoomable.is-on .zoom-btn .i-on { display: none; }
.zoomable.is-on .zoom-btn .i-off { display: block; }
.zoom-lens {
  position: fixed; left: 0; top: 0; z-index: 60; width: var(--lens-w, 340px); height: var(--lens-h, 255px);
  pointer-events: none; visibility: hidden; background-color: var(--cream); background-repeat: no-repeat;
  border: 3px solid var(--brown); box-shadow: 0 0 0 2px var(--cream), 0 8px 22px rgba(53, 24, 16, 0.28);
  will-change: transform;
}
.zoom-lens.show { visibility: visible; }
.zoom-lens::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border: 1px solid var(--brown); background: var(--cream); border-radius: 50%; opacity: 0.85;
}

/* -- 비밀글 비밀번호 화면 -- */
.pw-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10cqw 5cqw 24cqw;
  font-size: clamp(13px, 2.3cqw, 15.5px);
  line-height: 1.8;
}
.pw-inner { display: grid; justify-items: stretch; width: fit-content; max-width: 100%; }
.pw-guide { margin: 0; font-weight: 400; }
.pw-link {
  justify-self: center;
  margin-top: 1.4em;
  padding: 0.3em 0.2em;
  color: var(--brown);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.35em;
}
.pw-form { display: flex; align-items: stretch; gap: 10px; margin-top: 2.2em; }
.pw-form input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 38px;
  padding: 0 0.5em;
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--brown), var(--brown)) left bottom / 100% var(--pw-line, 1.5px) no-repeat;
  color: var(--brown);
  font: inherit;
  font-size: 1.05em;
  font-weight: 400;
  text-align: center;
}
.pw-form input::placeholder { color: color-mix(in srgb, var(--brown) 30%, var(--cream)); }
.pw-form input:not(:placeholder-shown) { letter-spacing: 0.6em; text-indent: 0.6em; }
.pw-form input:focus-visible { outline: none; }
@keyframes pw-shake {
  0%, 100% { text-indent: 0.6em; }
  15% { text-indent: calc(0.6em - 9px); }
  30% { text-indent: calc(0.6em + 8px); }
  45% { text-indent: calc(0.6em - 6px); }
  60% { text-indent: calc(0.6em + 4px); }
  75% { text-indent: calc(0.6em - 2px); }
}
.pw-form input.shake { animation: pw-shake 0.5s ease; }
@media (prefers-reduced-motion: reduce) { .pw-form input.shake { animation: none; } }
.pw-form button {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 1.1em;
  border: 0;
  border-radius: 0;
  background: var(--brown);
  color: var(--cream);
  font: inherit;
  font-size: 0.92em;
  font-weight: 600;
  cursor: pointer;
}
.pw-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin: 0.9em 0 0;
  font-weight: 600;
  text-align: center;
}
.pw-error[hidden] { display: none; }
.pw-error .mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  background: var(--brown);
  color: var(--cream);
  font-size: 0.9em;
}

/* -- 후기 (영수증) -- */
.receipt {
  --r: clamp(5px, 2.1cqw, 14px);
  --pitch: clamp(18px, 7cqw, 46px);
  background: var(--paper);
  padding: 13cqw 0 9cqw;
  -webkit-mask-image:
    radial-gradient(circle at 50% 0, #0000 var(--r), #000 calc(var(--r) + 0.5px)),
    radial-gradient(circle at 50% 100%, #0000 var(--r), #000 calc(var(--r) + 0.5px));
  -webkit-mask-size: var(--pitch) 100%;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle at 50% 0, #0000 var(--r), #000 calc(var(--r) + 0.5px)),
    radial-gradient(circle at 50% 100%, #0000 var(--r), #000 calc(var(--r) + 0.5px));
  mask-size: var(--pitch) 100%;
  mask-repeat: repeat-x;
  mask-composite: intersect;
}
.reviews { list-style: none; margin: 18cqw 0 0; padding: 0 6cqw; }
.review { padding-top: 6cqw; }
.review-head {
  display: flex;
  justify-content: space-between;
  gap: 3cqw;
  font-size: clamp(13px, 2.4cqw, 16px);
  font-weight: 600;
  line-height: 1.4;
}
.review-text {
  margin: 2.5cqw 0 0;
  font-size: clamp(13px, 2.3cqw, 15.5px);
  font-weight: 400;
  line-height: 1.9;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.tear {
  height: 1.5px;
  margin-top: 5.5cqw;
  background: repeating-linear-gradient(90deg, var(--brown) 0 1.2cqw, transparent 1.2cqw 2.9cqw);
}
.receipt .empty-note { margin-top: 8cqw; }
/* 후기 위 안내 문구: 글자 크기는 후기 본문과 같고 색만 연하게. 위·아래 여백을 같게 해서 메뉴와 첫 후기 사이 가운데에 옴 */
.note-notice {
  margin: 12cqw 6cqw 0;
  text-align: center;
  font-size: clamp(13px, 2.3cqw, 15.5px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--muted);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.note-notice + .reviews { margin-top: 6cqw; }   /* 첫 후기에 있는 위 여백(6cqw)과 합쳐 문구 위·아래가 같아짐 */

/* -- 메인 -- */
.scene { position: relative; isolation: isolate; padding: 15cqw 6cqw 14cqw; }   /* 모바일: 위 여백과 로고~타일 간격을 같게(15cqw) → 로고가 위·아래 가운데에 옴 */
/* 메인 전체 배경(타일 뒤). 이미지는 크림색 바탕에 맞춰 만든 것: 데스크탑 bg, 모바일 bg-m */
/* 화면이 아무리 넓어도 배경이 양옆 끝까지 꽉 차도록 폭을 화면 전체(100vw)로 늘림. 장면은 가운데 기준 그대로 */
.scene-bg {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  z-index: -1; pointer-events: none;
  background-color: var(--cream); background-repeat: no-repeat; background-position: center; background-size: cover;
  background-image: var(--bg-m);
}
@container (min-width: 700px) { .scene-bg { background-image: var(--bg-d); } }
.logo-wrap { margin: 0; display: flex; justify-content: center; }
.logo-wrap a { display: block; width: 52cqw; }
.logo-wrap svg { width: 100%; height: auto; display: block; }

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 15cqw; gap: 5cqw 4cqw; }
.tile { display: block; color: var(--brown); }
.sq { display: block; position: relative; overflow: hidden; aspect-ratio: 1; background: var(--brown); }
.tile-pale .sq { background: var(--pale); }
.sq-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.label {
  display: block;
  margin-top: 0.7em;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}
@container (min-width: 700px) {
  .scene { position: relative; padding: 0; aspect-ratio: 2000 / 1414; }
  .logo-wrap { position: absolute; left: 39.5%; width: 21%; top: 9.76%; display: block; }
  .logo-wrap a { width: 100%; }
  .tiles { display: block; margin: 0; }
  .tile { position: absolute; width: 10.7%; left: var(--x); top: var(--y); }
  .label { margin-top: 0.6cqw; font-size: clamp(11px, 1cqw, 16px); }
}
/* 등장 순서(--i): 모바일(2열) / 데스크탑 */
.t-flavor { --i: 0; }
.t-fiction { --i: 1; }
.t-pale2 { --i: 2; }
.t-art { --i: 3; }
.t-note { --i: 4; }
.t-pale1 { --i: 5; }
@container (min-width: 700px) {
  .t-flavor { --i: 0; }
  .t-fiction { --i: 1; }
  .t-note { --i: 2; }
  .t-art { --i: 3; }
  .t-pale2 { --i: 4; }
  .t-pale1 { --i: 5; }
}
.t-pale1 { --x: 13.7%; --y: 47.8%; }
.t-art { --x: 25.2%; --y: 47.8%; }
.t-fiction { --x: 13.7%; --y: 64%; }
.t-flavor { --x: 50.85%; --y: 47.8%; }
.t-pale2 { --x: 64.15%; --y: 64%; }
.t-note { --x: 75.65%; --y: 64%; }

/* scooping! 버튼 — 데스크탑에서만 보이고, 위치·회전은 스크립트가 로드할 때마다 정함 */
.scoop {
  display: none;
  position: absolute;
  left: 80%;
  top: 20%;
  width: 9.5%;
  aspect-ratio: 2 / 1;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brown);
  color: var(--cream);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(12px, 1.5cqw, 24px);
  letter-spacing: -0.02em;
  cursor: pointer;
  z-index: 5;
}
.scoop[aria-pressed="true"] { background: var(--cream); color: var(--brown); box-shadow: inset 0 0 0 0.25cqw var(--brown); }
/* 이미지로 교체된 경우 */
.scoop.has-img { aspect-ratio: auto; border-radius: 0; background: none; box-shadow: none; }
.scoop.has-img[aria-pressed="true"] { background: none; box-shadow: none; }
.scoop.has-img img { display: block; width: 100%; height: auto; }
@container (min-width: 700px) { .scoop { display: flex; } }
/* 메인이 아닌 모든 페이지: 좌하단에 고정 (마우스를 쓰는 화면에서만 보임) */
.scoop-fixed {
  position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  top: auto; width: clamp(100px, 8.5vw, 140px); font-size: 15px; z-index: 30; animation: none;
}
.scoop-fixed[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--brown); }
.scoop-fixed.has-img[aria-pressed="true"] { box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .scoop-fixed { display: flex; } }
body.scooping, body.scooping * { cursor: var(--scoop-cursor) !important; }

/* 메인 첫 로딩: 디더링 디졸브 (타일을 덮은 칸들이 무작위로 사라지며 드러남) */
@keyframes a-fade { from { opacity: 0; } to { opacity: 1; } }
.dz { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); pointer-events: none; }
.dz i { background: var(--cream); box-shadow: 0 0 0 0.6px var(--cream); animation: dz-off 0.01s linear var(--d, 0s) forwards; }
@keyframes dz-off { to { opacity: 0; } }
.page-main .label { animation: a-fade 0.4s ease-out calc(var(--i) * 0.14s + 0.95s) both; }
.scoop { animation: a-fade 0.25s ease-out 1.8s both; }
@media (prefers-reduced-motion: reduce) {
  .page-main .label, .scoop { animation: none; }
  .dz { display: none; }
}

/* -- 플로팅 버튼 (글: 목록·홈 / 후기: 맨 위로) -- */
.fab-group {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  translate: 0 10px;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s 0.25s;
}
.page-detail.hero-passed .fab-group,
.page-detail.is-locked .fab-group,
.page-note.logo-passed .fab-group {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s;
}
.fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: var(--brown);
  color: var(--cream);
  cursor: pointer;
}
.fab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.fab-img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .fab-group { transition: none; }
}

/* -- 모든 페이지 공통 푸터 -- */
.site-footer {
  padding: clamp(56px, 12cqw, 120px) 20px clamp(32px, 6cqw, 64px);
  text-align: center;
  color: var(--brown);
}
.site-footer p { margin: 0; }
.site-footer .copy {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(10px, 1.3cqw, 12.5px);
  letter-spacing: -0.02em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* -- 스크롤바: 메인 갈색의 각진 사각형, 폭 8px (크롬·엣지·사파리 / 파이어폭스는 색과 얇은 굵기) -- */
html::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track { background: var(--page-bg); }
html::-webkit-scrollbar-thumb { background: var(--brown); border-radius: 0; }
@supports (-moz-appearance: none) { html { scrollbar-color: #351810 #fffbe6; scrollbar-width: thin; } }