:root { --paper:#eeebe8; --card:#f6f4f2; --ink:#1a1625; --muted:#7d7588; --dot:#7d6aa6; --line:#ddd8d3; }
* { box-sizing:border-box; margin:0; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--paper); color:var(--ink); font-family:"Gowun Dodum", -apple-system, "Apple SD Gothic Neo", sans-serif; line-height:1.55; }
a { color:inherit; }
.wrap { max-width:720px; margin:0 auto; padding:40px 16px 64px; }
.logo { display:flex; flex-direction:column; align-items:center; text-decoration:none; }
.logo .the { font-family:"Bodoni Moda", serif; font-size:13px; letter-spacing:.6em; margin-right:-.6em; }
.logo .name { font-family:"Bodoni Moda", serif; font-style:italic; font-size:44px; line-height:1.1; display:flex; align-items:baseline; }
.logo .name i { width:7px; height:7px; border-radius:50%; background:var(--dot); margin-left:3px; display:inline-block; }
.tagline { text-align:center; color:var(--muted); font-size:15px; margin-top:10px; }
.rule { width:40px; height:2px; background:var(--dot); margin:26px auto; }
.find { display:flex; gap:8px; align-items:center; }
.search { flex:1; min-width:0; font:inherit; font-size:16px; padding:12px 18px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); }
.search:focus-visible, .all:focus-visible, .go:focus-visible { outline:2px solid var(--dot); outline-offset:2px; }
.all { font:inherit; font-size:14px; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:11px 14px; cursor:pointer; white-space:nowrap; }
.hint { text-align:center; color:var(--muted); font-size:14px; margin:0 0 10px; }
.grid { list-style:none; padding:0; margin-top:20px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width:640px) { .grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
/* 셀럽 사진 위에 번호. 무슨 제품인지는 눌러봐야 안다 */
.card { position:relative; aspect-ratio:1; background:var(--card); border-radius:16px; overflow:hidden; cursor:pointer; }
.card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.card .shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%); }
.card .num { position:absolute; left:12px; bottom:8px; color:#fff; font-family:"Bodoni Moda", serif; font-size:34px; line-height:1; text-shadow:0 0 2px rgba(0,0,0,.6), 0 2px 12px rgba(0,0,0,.4); }
.card .num em { font-size:.55em; margin-right:4px; color:#e7e0f5; }
/* 사진이 없으면 번호만 가운데 */
.card.noimg { display:flex; align-items:center; justify-content:center; }
.card.noimg .num { position:static; color:var(--ink); text-shadow:none; }
.card.noimg .num em { color:var(--dot); }
/* 마우스를 올리면(휴대폰은 탭하면) 카드 위에 뿌연 막 + 버튼. 카드 내용은 그대로 비쳐 보인다 */
.veil { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:8px;
  background:rgba(238,235,232,.45); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; }
.card:hover .veil, .card:focus-within .veil, .card.open .veil { opacity:1; visibility:visible; }
.go { display:inline-flex; align-items:center; justify-content:center; gap:4px; text-decoration:none; background:var(--ink); color:#fff; border-radius:999px; padding:10px 16px; font-size:14px; line-height:1.3; text-align:center; word-break:keep-all; box-shadow:0 8px 24px rgba(26,22,37,.18); }
.go[aria-disabled="true"] { background:transparent; color:var(--muted); box-shadow:none; border:1px dashed var(--muted); }
.empty { text-align:center; color:var(--muted); padding:30px 0; }
.note { font-size:12px; color:var(--muted); text-align:center; margin-top:28px; }