/* 회전반 레코드 — N24 번호 목록·색인(브루탈리스트)
   위계는 크기가 아니라 번호·색·대문자 고정폭으로. 카드·둥근 모서리·그림자 없음. */
:root {
  --ink: #111;
  --paper: #fffef8;
  --red: #d41c00;
  --blue: #0f33c9;
  --yellow: #ffe23d;
  --mono: 'Red Hat Mono', ui-monospace, Menlo, monospace;
  --kr: 'Stylish', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 19px/1.5 var(--kr); word-break: keep-all; overflow-wrap: break-word;
}
a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { background: var(--yellow); color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
h1, h2, p, ol, figure { margin: 0; padding: 0; }
ol { list-style: none; }
b { font-family: var(--mono); font-weight: 600; font-size: .82em; }
i { font-style: normal; }

/* ---- 한 줄 = 한 행. 모든 섹션이 같은 행 형식을 쓴다 ---- */
.top, main, .foot { border-top: 2px solid var(--ink); }
.r {
  display: grid;
  grid-template-columns: 4.2rem 10.5rem minmax(0, 1fr) 4.5rem 6.5rem;
  column-gap: 1rem; align-items: baseline;
  padding: .55rem 1rem; border-bottom: 1px solid var(--ink);
  font-size: 19px; font-weight: 400;
}
.r > .t { grid-column: 3 / -1; min-width: 0; }
.r--item > .t { grid-column: 3; }
.n { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.k { min-width: 0; }
.c, .p { font-family: var(--mono); font-size: 15px; text-align: right; }
.c { font-weight: 600; }

/* 머리 행 */
.r--brand .n { color: var(--red); }
.r--brand .k { font-weight: 400; }
.r--brand .t { font-family: var(--mono); font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
.r--line .n, .r--nav .n { color: var(--blue); }
.r--nav .t a { margin-right: 1.1rem; font-family: var(--mono); font-size: 15px; white-space: nowrap; }

/* 섹션 머리 = 검은 띠 */
.r--head { background: var(--ink); color: var(--paper); border-bottom: 0; margin-top: 0; }
.r--head .n { color: var(--yellow); }
.r--head .t { font-family: var(--mono); font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
section + section .r--head { border-top: 2px solid var(--ink); }

/* 장르 고르기 */
.r--filter .t { display: flex; flex-wrap: wrap; gap: .4rem; }
.r--filter button {
  appearance: none; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font: 600 14px/1 var(--mono); text-transform: uppercase; padding: .5rem .7rem; min-height: 36px; cursor: pointer;
}
.r--filter button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.r--filter button:hover { background: var(--yellow); color: var(--ink); }

/* 입고 목록 */
.r--item { transition: background-color .1s; }
.r--item:hover { background: var(--yellow); }
.r--item .g { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--blue); text-transform: uppercase; }
.r--item i { font-family: var(--mono); font-size: 14px; margin-left: .4rem; }
.r--item .p { font-weight: 600; }
.r--item.is-out .t { text-decoration: line-through; text-decoration-thickness: 1px; }
.r--item.is-out .p { color: var(--red); }
.r--item[hidden] { display: none; }

.r--note .k { font-family: var(--kr); }
.r--note time { font-family: var(--mono); font-size: 15px; font-weight: 600; }

/* 사진 행 — 사진도 같은 줄 형식 안에 끼운다 */
.r--photo img {
  display: block; width: 100%; max-width: 400px; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--ink); filter: saturate(.85);
}
.r--photo figcaption { margin-top: .35rem; }
#store .r--photo { align-items: start; }
#store .r--photo .t { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: 1.2rem; align-items: start; }
#store .r--photo figcaption { margin: 0; }

/* 연락 행 */
.r--info .k { font-weight: 400; color: var(--red); }
.r--info .big { font-family: var(--mono); font-size: 22px; font-weight: 600; margin-right: .6rem; }
.hrs { display: grid; grid-template-columns: max-content max-content; gap: .1rem 1.4rem; font-family: var(--mono); font-size: 15px; }
.today { display: block; margin-top: .45rem; font-family: var(--mono); font-size: 14px; font-weight: 600; }
.today:empty { display: none; }
.today b { font-size: 1em; background: var(--yellow); padding: 0 .3rem; }

.foot .r { font-size: 16px; }
.foot .t { font-family: var(--mono); font-size: 14px; }

/* ---- 퀵메뉴: PC 오른쪽 세로 ---- */
.quick { position: fixed; z-index: 50; display: flex; font-family: var(--mono); }
.quick a {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px;
  background: var(--paper); color: var(--ink); text-decoration: none; border: 1px solid var(--ink);
  font-size: 13px; font-weight: 600; text-transform: uppercase;
}
.quick a span { font-family: var(--kr); font-size: 17px; font-weight: 400; text-transform: none; }
.quick a:hover { background: var(--yellow); }
.quick__tel { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
.quick__tel b { font-size: 12px; font-weight: 600; }

@media (min-width: 1024px) {
  .top, main, .foot { margin-right: 112px; border-right: 2px solid var(--ink); }
  .quick { right: 14px; top: 50%; transform: translateY(-50%); flex-direction: column; width: 84px; }
  .quick a { min-height: 58px; padding: .4rem .2rem; margin-top: -1px; }
  .quick__tel b { font-size: 10.5px; }
}

/* ---- 1023px 이하: 하단 바 ---- */
@media (max-width: 1023px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .quick { left: 0; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--ink); border-top: 2px solid var(--ink); }
  .quick a { flex: 1; min-height: 58px; border-width: 0 1px 0 0; }
  .quick__tel { flex: 1.5 !important; }
  .quick__top { display: none !important; }
  .r { grid-template-columns: 3.6rem 9rem minmax(0, 1fr) 4rem 6rem; }
}

/* ---- 720px 이하: 글자는 그대로, 줄을 짧게 끊는다 ---- */
@media (max-width: 720px) {
  .r {
    grid-template-columns: 3.3rem minmax(0, 1fr) auto;
    grid-template-areas: "n k c" "n t t" "n p p";
    column-gap: .6rem; row-gap: .15rem; padding: .6rem 12px; font-size: 18px;
  }
  .r > .n { grid-area: n; }
  .r > .k { grid-area: k; }
  .r > .t, .r--item > .t { grid-area: t; grid-column: auto; }
  .r > .c { grid-area: c; }
  .r > .p { grid-area: p; text-align: left; }
  .r--item i { display: block; margin: .1rem 0 0; }
  .r--brand .t, .r--head .t { font-size: 14px; }
  .r--nav .t { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
  .r--nav .t a { margin: 0; }
  #store .r--photo .t { display: block; }
  .r--photo figcaption { margin-top: .4rem !important; }
  .r--info .big { display: block; }
  .quick a span { font-size: 16px; }
  .quick__tel b { display: none; }
}