/* 먹꼬싶따: 크림 · 케첩 레드 · 치즈 옐로, 프리텐다드 굵은 글씨 (먹꼬싶따 영상과 같다) */
:root { --bg:#fff4e0; --soft:#ffe7a8; --ink:#3a1d0e; --muted:#9a7a5c; --line:#f0dcb8; --pink:#e8392c; --cheese:#ffc93c; }
* { box-sizing:border-box; margin:0; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--ink); font-family:"Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif; line-height:1.5; letter-spacing:-.01em; }
a { color:inherit; }
.wrap { max-width:720px; margin:0 auto; padding:36px 16px 64px; }
.logo { display:flex; align-items:center; justify-content:center; gap:12px; text-decoration:none; color:var(--ink); font-weight:800; font-size:40px; letter-spacing:-.05em; line-height:1; }
.logo svg { width:52px; height:52px; flex:none; }
.tagline { text-align:center; color:var(--muted); font-size:15px; font-weight:600; margin-top:8px; }
.tagline mark { background:linear-gradient(transparent 55%, var(--cheese) 55%); color:var(--ink); padding:0 2px; }
.disclosure { text-align:center; color:var(--muted); font-size:12px; line-height:1.6; margin:16px auto 0; padding:8px 14px; background:var(--soft); border-radius:12px; max-width:380px; word-break:keep-all; }
.hint { display:block; text-align:center; color:var(--muted); font-size:14px; font-weight:600; margin:28px 0 10px; }
.hint b { color:var(--ink); }
.find { display:flex; gap:8px; align-items:center; }
.search { flex:1; min-width:0; font:inherit; font-size:17px; font-weight:700; padding:13px 20px; border:2px solid var(--ink); border-radius:999px; background:#fff; color:var(--ink); }
.search::placeholder { color:#aaa; font-weight:600; }
.search:focus-visible { outline:none; border-color:var(--pink); box-shadow:0 0 0 4px rgba(232,57,44,.18); }
.all:focus-visible, .go:focus-visible { outline:2px solid var(--pink); outline-offset:2px; }
.all { font:inherit; font-size:14px; font-weight:700; border:0; background:var(--soft); color:var(--ink); border-radius:999px; padding:13px 16px; cursor:pointer; white-space:nowrap; }
.grid { list-style:none; padding:0; margin-top:22px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px 10px; }
@media (min-width:640px) { .grid { grid-template-columns:repeat(4, minmax(0,1fr)); } }
/* 셀럽 사진 위에 핑크 번호, 아래에 짧은 문구(셀럽 + 품목) */
.card { cursor:pointer; }
.tile { position:relative; aspect-ratio:1; background:var(--soft); border-radius:14px; overflow:hidden; }
.tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.tile .shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%); }
.tile .num { position:absolute; left:6px; bottom:6px; background:var(--pink); color:#fff; font-weight:800; font-size:13px; letter-spacing:-.02em; line-height:1; padding:5px 8px 4px; border-radius:7px; }
.tile.noimg { display:flex; align-items:center; justify-content:center; }
.tile.noimg .num { position:static; font-size:16px; }
.label { font-size:13px; font-weight:700; line-height:1.35; margin-top:7px; text-align:center; word-break:keep-all; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
/* 마우스를 올리면(휴대폰은 탭하면) 흰 막 + 버튼 */
.veil { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:6px;
  background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s; }
/* 키보드로 고를 때만 포커스로 띄운다 (마우스로 눌러 새 창이 열린 뒤 돌아와도 막이 남지 않게) */
.card:hover .veil, .card:has(:focus-visible) .veil { opacity:1; visibility:visible; }
/* 휴대폰: 막 없이 탭하면 바로 이동 */
@media (hover: none) { .veil { display:none; } }
.go { display:inline-flex; align-items:center; justify-content:center; gap:3px; text-decoration:none; background:var(--ink); color:#fff; border-radius:999px; padding:8px 11px; font-size:12px; font-weight:700; line-height:1.3; text-align:center; word-break:keep-all; }
.go[aria-disabled="true"] { background:transparent; color:var(--muted); border:1px dashed var(--muted); }
.solo-go { display:none; }
/* 번호로 하나만 찾았을 때: 크게 + 버튼은 항상 보이게 */
.grid.solo { grid-template-columns:minmax(0, 360px); justify-content:center; }
.grid.solo .card { cursor:default; }
.grid.solo .tile { border-radius:22px; }
.grid.solo .tile .num { left:14px; bottom:14px; font-size:26px; padding:9px 14px 7px; border-radius:12px; }
.grid.solo .veil { display:none; }
.grid.solo .label { font-size:18px; margin-top:12px; }
.grid.solo .solo-go { display:flex; margin-top:14px; padding:16px 20px; font-size:16px; background:var(--pink); box-shadow:0 8px 0 var(--ink); }
.empty { text-align:center; color:var(--muted); font-weight:600; padding:30px 0; }
.contact { text-align:center; font-size:13px; font-weight:600; color:var(--muted); margin-top:40px; }
.contact a { color:var(--ink); font-weight:700; text-decoration:none; border-bottom:2px solid var(--pink); }
.note { font-size:11px; color:#aaa; text-align:center; margin-top:10px; }
.note a { color:#aaa; text-decoration:none; }
/* 아이템 여러 개: 카드 뱃지 */
.tile .count { position:absolute; right:6px; top:6px; background:var(--ink); color:#fff; font-size:11px; font-weight:800; padding:4px 8px 3px; border-radius:999px; }
button.go { border:0; cursor:pointer; font:inherit; font-size:12px; font-weight:700; }
/* 아이템 목록 화면 (/0007): 휴대폰은 꽉 차게, PC는 가운데 480px */
.detail { max-width:480px; margin:22px auto 0; }
.dhead { display:flex; gap:12px; align-items:center; }
.dhead img { width:64px; height:64px; border-radius:14px; object-fit:cover; object-position:50% 18%; flex:none; }
.dno { display:inline-block; background:var(--pink); color:#fff; font-weight:800; font-size:13px; padding:4px 8px 3px; border-radius:6px; }
.dlabel { font-weight:800; font-size:17px; letter-spacing:-.02em; margin-top:6px; word-break:keep-all; }
.dsub { font-size:12px; font-weight:600; color:var(--muted); }
.dlist { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px; }
.ditem { display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:16px; }
.dimg { position:relative; width:96px; height:96px; border-radius:12px; background:var(--soft); overflow:hidden; }
.dimg img { width:100%; height:100%; object-fit:cover; }
.didx { position:absolute; left:5px; top:5px; width:22px; height:22px; border-radius:50%; background:var(--pink); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.dbody { display:grid; gap:8px; min-width:0; }
.dname { font-weight:800; font-size:16px; letter-spacing:-.02em; word-break:keep-all; }
.dgo { display:flex; align-items:center; justify-content:center; gap:3px; text-decoration:none; background:var(--ink); color:#fff; border-radius:999px; padding:11px 12px; font-size:14px; font-weight:700; }
.dgo:hover { background:var(--pink); }
.dgo.off { background:transparent; color:var(--muted); border:1px dashed var(--muted); }