/* 내가 찾음 — 스타일 (design-system.md v1.2)
   순서: 1 변수 · 2 기본 · 3 머리말·제목 · 4 자리 패턴 · 5 카드 · 6 손그림 · 7 다른 페이지 · 8 꼬리말
   크기 기준: 모바일 ~767px / 태블릿 768~1023px / PC 1024px~ */

/* ── 1. 변수 ─────────────────────────────────────────── */
:root {
  /* 컬러 */
  --bg: #FAF8F4;
  --text: #111111;
  --text-sub: #666666;
  --border: #DDDAD3;
  --accent: #CC3D18;
  --tape: rgba(232, 222, 196, 0.85);
  --placeholder: #E9E7E2;
  --btn-hover: #333333;

  /* 글씨 */
  --f-title: 'Do Hyeon', sans-serif;
  --f-num: 'Alfa Slab One', serif;
  --f-body: 'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --fs-logo: 24px;
  --fs-h1: 32px;
  --fs-h2: 22px;
  --fs-body: 15px;
  --fs-line1: 14px;
  --fs-lead-line1: 16px;
  --fs-comment: 14px;
  --fs-half-comment: 13px;
  --fs-lead-comment: 15px;
  --fs-link: 13px;
  --fs-cap: 12px;
  --fs-stamp: 12px;
  --fs-nf: 64px;

  /* 간격 */
  --side: 16px;
  --gap-x: 12px;
  --gap-y: 40px;
  --section: 64px;
  --max: 1200px;
  --photo-cap: 8px;
  --off-k: 1;          /* 자리 위 여백 배율 (태블릿 0.5) */

  /* 손맛 */
  --tape-h: 18px;
  --tape-top: -12px;   /* 회전해도 사진 안쪽으로 10px 이하 */
  --star-w: 44px;
  --star-h: 37px;
  --press: 80ms;

  /* 종이 결: fractalNoise, 흑백, 불투명도 7% */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
  :root { --gap-x: 16px; --off-k: 0.5; --tape-h: 22px; --tape-top: -17px; --star-w: 52px; --star-h: 44px; }
}
@media (min-width: 1024px) {
  :root {
    --side: 48px; --gap-x: 24px; --gap-y: 56px; --section: 96px; --off-k: 1; --photo-cap: 10px;
    --fs-logo: 28px; --fs-h1: 48px; --fs-h2: 26px; --fs-body: 16px;
    --fs-lead-line1: 18px; --fs-lead-comment: 16px; --fs-stamp: 13px; --fs-nf: 96px;
  }
}

/* ── 2. 기본 ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg) var(--grain);   /* 종이 결은 바탕에만. 사진은 위에 불투명하게 덮임 */
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  word-break: keep-all;        /* 한국어는 낱말 단위로 줄바꿈 */
  overflow-wrap: break-word;   /* 아주 긴 낱말만 쪼갬 */
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, ol, ul { margin: 0; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; z-index: 10; }
.skip:focus { left: var(--side); top: 8px; background: var(--bg); padding: 4px 8px; }

/* 눌림 효과 */
.photo-link, .go, .btn { transition: transform var(--press) ease-out; }
.photo-link:active, .go:active, .btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .photo-link, .go, .btn { transition: none; }
  .photo-link:active, .go:active, .btn:active { transform: none; }
}

/* ── 3. 머리말·제목 ───────────────────────────────────── */
.site-header, main, .site-footer { max-width: var(--max); margin: 0 auto; padding-left: var(--side); padding-right: var(--side); }
.site-header { padding-top: 20px; }
.site-header .top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.logo { font-family: var(--f-title); font-size: var(--fs-logo); line-height: 1; text-decoration: none; }
.logo .dot { font-family: var(--f-num); color: var(--accent); }
.nav { font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: flex-end; }
.nav:hover { text-decoration: underline; }
.intro { margin-top: 4px; }
.intro-cap, .meta, .line2 { font-size: var(--fs-cap); color: var(--text-sub); line-height: 1.5; }
.site-header::after { content: ""; display: block; border-top: 1px solid var(--text); margin-top: 16px; }

.h1 { font-family: var(--f-title); font-weight: 400; font-size: var(--fs-h1); line-height: 1.1; margin-top: 40px; }
.h2 { font-family: var(--f-title); font-weight: 400; font-size: var(--fs-h2); line-height: 1.3; }
.h1 .no { font-family: var(--f-num); color: var(--accent); font-size: 0.9em; position: relative; display: inline-block; padding: 0 10px; margin-left: 6px; }
.meta { margin-top: 10px; }

/* ── 4. 자리 패턴 v2 ─────────────────────────────────── */
/* 자리마다: 사진 비율(--ar), 위 여백(--off), 도장 기울기(--stamp-r),
   테이프 폭·각도·위치(--tape-w, --tape-r, 왼쪽/오른쪽). 테이프 없는 자리는 4, 8 */
.slot-1  { --ar: 4 / 5; --off: 0px;   --stamp-r: -4deg; --tape-w: 60px; --tape-r: 6deg; }
.slot-2  { --ar: 3 / 4; --off: 160px; --stamp-r: 3deg;  --tape-w: 48px; --tape-r: -8deg; }
.slot-3  { --ar: 1 / 1; --off: 24px;  --stamp-r: -2deg; --tape-w: 40px; --tape-r: 10deg; }
.slot-4  { --ar: 4 / 5; --off: 96px;  --stamp-r: 2deg; }
.slot-5  { --ar: 1 / 1; --off: 0px;   --stamp-r: -3deg; --tape-w: 44px; --tape-r: -5deg; }
.slot-6  { --ar: 4 / 5; --off: 40px;  --stamp-r: 4deg;  --tape-w: 50px; --tape-r: 7deg; }
.slot-7  { --ar: 4 / 3; --off: 0px;   --stamp-r: -2deg; --tape-w: 52px; --tape-r: -10deg; }
.slot-8  { --ar: 3 / 4; --off: 64px;  --stamp-r: 3deg; }
.slot-9  { --ar: 1 / 1; --off: 0px;   --stamp-r: -4deg; --tape-w: 44px; --tape-r: 4deg; }
.slot-10 { --ar: 4 / 5; --off: 120px; --stamp-r: 2deg;  --tape-w: 48px; --tape-r: -6deg; }
@media (min-width: 768px) {
  .slot-1 { --tape-w: 72px; }  .slot-2 { --tape-w: 56px; }  .slot-3 { --tape-w: 48px; }
  .slot-5 { --tape-w: 52px; }  .slot-6 { --tape-w: 60px; }  .slot-7 { --tape-w: 64px; }
  .slot-9 { --tape-w: 52px; }  .slot-10 { --tape-w: 56px; }
}

.grid { list-style: none; padding: 0; margin-top: 48px; display: grid; align-items: start; row-gap: var(--gap-y); column-gap: var(--gap-x); }

/* 모바일: 2칸 바탕. 한 줄 자리는 폭과 붙는 쪽으로 리듬을 만든다 */
@media (max-width: 767px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .slot-1, .slot-2, .slot-5, .slot-6, .slot-9, .slot-10 { grid-column: 1 / -1; }
  .slot-2, .slot-6 { width: 68%; margin-left: auto; }
  .slot-5, .slot-10 { width: 76%; }
  .slot-4, .slot-8 { margin-top: 48px; }
  /* 모바일에서 비율이 PC와 다른 자리 */
  .slot-7 { --ar: 4 / 5; }
  .slot-8 { --ar: 1 / 1; }
  .slot-9 { --ar: 4 / 3; }
  /* 방금 찾음: 2개 한 줄, 짝수 번째 엇갈림 */
  .quick-grid .card { grid-column: auto; width: auto; margin-top: 0; }
  .quick-grid .card:nth-child(even) { margin-top: 48px; }
}

/* PC·태블릿: 12칸. 자리마다 시작 칸과 폭, 위 여백 (태블릿은 절반) */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .card { margin-top: calc(var(--off) * var(--off-k)); }
  .slot-1  { grid-column: 1 / span 6; }
  .slot-2  { grid-column: 8 / span 4; }
  .slot-3  { grid-column: 2 / span 3; }
  .slot-4  { grid-column: 6 / span 3; }
  .slot-5  { grid-column: 10 / span 3; }
  .slot-6  { grid-column: 1 / span 4; }
  .slot-7  { grid-column: 7 / span 5; }
  .slot-8  { grid-column: 3 / span 3; }
  .slot-9  { grid-column: 7 / span 3; }
  .slot-10 { grid-column: 10 / span 3; }
}

/* ── 5. 카드 ─────────────────────────────────────────── */
.card { position: relative; min-width: 0; }
.photo { position: relative; aspect-ratio: var(--ar, 4 / 5); background: var(--placeholder); }
.photo-link { display: block; width: 100%; height: 100%; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* 사진이 깨질 때 */
.fallback { display: none; }
.card.img-failed .photo-link { display: none; }
.card.img-failed .fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 16px;
}
.fb-name { font-family: var(--f-title); font-size: 20px; line-height: 1.25; }
.fb-note { font-size: var(--fs-cap); color: var(--text-sub); line-height: 1.5; }

/* 마스킹테이프: 양 끝은 찢긴 모양 */
.tape {
  position: absolute; top: var(--tape-top); right: 14px;
  width: var(--tape-w, 0); height: var(--tape-h);
  background: var(--tape);
  transform: rotate(var(--tape-r, 0deg));
  clip-path: polygon(0 0, 100% 0, calc(100% - 2px) 20%, 100% 40%, calc(100% - 2px) 60%, 100% 80%, calc(100% - 1px) 100%, 0 100%, 2px 80%, 0 60%, 2px 40%, 0 20%);
  pointer-events: none;
}
.slot-2 .tape, .slot-5 .tape, .slot-7 .tape, .slot-10 .tape { right: auto; left: 22px; }
.slot-4 .tape, .slot-8 .tape { display: none; }

/* 도장 번호표 / 바로 올림 */
.stamp, .badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--bg); line-height: 1; padding: 3px 6px 2px;
  transform: rotate(var(--stamp-r, 0deg)); pointer-events: none;
}
.stamp { font-family: var(--f-num); font-size: var(--fs-stamp); letter-spacing: 0.5px; color: var(--accent); border: 2px solid var(--accent); }
.badge { font-size: 12px; font-weight: 700; border: 1.5px solid var(--text); padding: 4px 6px 3px; }

/* 캡션 */
.caption { margin-top: var(--photo-cap); }
.line1 { font-size: var(--fs-line1); line-height: 1.5; }
.line1 .name { font-weight: 700; }
.line2 { margin-top: 2px; }
.comment { font-size: var(--fs-comment); line-height: 1.6; margin-top: 4px; }
.card:not(.lead) .line1, .card:not(.lead) .comment {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.lead .line1 { font-size: var(--fs-lead-line1); }
.lead .comment { font-size: var(--fs-lead-comment); line-height: 1.7; margin-top: 6px; }

.go {
  display: inline-flex; align-items: flex-end; min-height: 44px;
  font-size: var(--fs-link); font-weight: 700; line-height: 1; text-decoration: none;
  padding-bottom: 6px; background: linear-gradient(var(--text), var(--text)) left bottom 4px / 100% 1px no-repeat;
}
.go:hover { background-size: 100% 2px; }

/* 모바일 2개 한 줄 자리: 상품명 / 가격 / (이베이 달러 안내) / 코멘트 2줄 / 링크 */
@media (max-width: 767px) {
  :is(.slot-3, .slot-4, .slot-7, .slot-8, .quick-grid .card) .line1 { display: block; -webkit-line-clamp: unset; overflow: visible; }
  :is(.slot-3, .slot-4, .slot-7, .slot-8, .quick-grid .card) .name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  :is(.slot-3, .slot-4, .slot-7, .slot-8, .quick-grid .card) .price { display: block; }
  :is(.slot-3, .slot-4, .slot-7, .slot-8, .quick-grid .card) .price .sep,
  :is(.slot-3, .slot-4, .slot-7, .slot-8, .quick-grid .card) .src-date { display: none; }
  :is(.slot-3, .slot-4, .slot-7, .slot-8, .quick-grid .card) .comment { font-size: var(--fs-half-comment); }
}

/* 판매완료 */
.sold .photo { opacity: 0.45; }
.sold .caption, .sold .go { color: var(--text-sub); }
.sold .go { background-image: linear-gradient(var(--text-sub), var(--text-sub)); }
.sold-label { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.5; }
.sold-tag { background: var(--text); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 6px; }
.sold-note { font-size: var(--fs-cap); }
.notice { border: 1px solid var(--text); padding: 8px 12px; font-size: 14px; margin-top: 16px; max-width: 560px; }

/* ── 6. 손그림 (빨간 펜) ─────────────────────────────── */
.mark { color: var(--accent); pointer-events: none; }
/* 회차 번호 동그라미: 좌우 10px, 위 16px, 아래 12px 바깥 */
.h1 .no .circle { position: absolute; left: -10px; top: -16px; width: calc(100% + 20px); height: calc(100% + 28px); }
/* 대표 별: 도장 오른쪽, 사진 위쪽 가장자리 밖 (안쪽 최대 10px) */
.star { position: absolute; width: var(--star-w); height: var(--star-h); top: calc(6px - var(--star-h)); left: 80px; transform: rotate(-10deg); }
/* 밑줄: 글자 폭 + 6px, 높이 8px, 글자 아래 7px */
.ul { position: relative; display: inline; }
.ul-mark { position: absolute; left: -3px; bottom: -7px; width: calc(100% + 6px); height: 8px; }
.lead .line1 .ul-mark { bottom: -6px; }
/* "방금 찾음" 느낌표: 제목 글자 높이의 약 1.3배, +10° */
.bang { width: 0.55em; height: 1.3em; display: inline-block; vertical-align: -0.35em; margin-left: 4px; transform: rotate(10deg); }

/* ── 7. 다른 페이지·상태 ─────────────────────────────── */
.quick { margin-top: var(--section); }
.quick .h2 { margin-bottom: -16px; }

/* 빈 화면 */
.empty .body { margin-top: 24px; max-width: 560px; }
.empty .wave { height: 12px; bottom: -14px; }
.empty .go { margin-top: 4px; }

/* 소개 */
.prose { max-width: 640px; }
.prose .h2 { margin-top: 40px; }
.prose p, .prose ul { margin-top: 8px; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 4px; }
.prose a { text-underline-offset: 3px; }

/* 404 */
.nf { padding-top: 40px; }
.nf-num { font-family: var(--f-num); color: var(--accent); font-size: var(--fs-nf); line-height: 1; }
.zigzag { display: block; width: 150px; height: 30px; margin-top: 8px; }
.nf .h2 { margin-top: 16px; }
.nf .body { margin-top: 4px; }
.btn {
  display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 24px; max-width: 360px;
  background: var(--text); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; border-radius: 2px;
}
.btn:hover { background: var(--btn-hover); }
@media (min-width: 1024px) { .zigzag { width: 220px; } }

/* ── 8. 꼬리말 ───────────────────────────────────────── */
.site-footer { margin-top: var(--section); padding-top: 16px; padding-bottom: 32px; font-size: var(--fs-cap); color: var(--text-sub); line-height: 1.5; }
.site-footer::before { content: ""; display: block; border-top: 1px solid var(--border); margin-bottom: 16px; }
.site-footer p + p { margin-top: 4px; }
.site-footer a { display: inline-block; padding: 12px 0; }