* { box-sizing: border-box; }
body { margin: 0; padding: 32px 16px 60px; font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  background: #0f1117; color: #eef0f6; line-height: 1.5; }
main { max-width: 860px; margin: 0 auto; }
a { color: #8ab4ff; }
header h1 { margin: 0; font-size: 2rem; letter-spacing: -.5px; }
.sub { margin: 6px 0 20px; color: #a6abbd; }
.card { background: #181b24; border: 1px solid #262a36; border-radius: 16px; padding: 18px; margin-bottom: 16px; }
h2 { margin: 0 0 12px; font-size: 1.1rem; }
.count { color: #a6abbd; font-weight: 400; font-size: .9rem; }
input[type=search] { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid #333849; background: #0f1117; color: inherit; font: inherit; font-size: 1rem; }
input[type=search]:focus { outline: 2px solid #5b8cff; border-color: transparent; }
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 14px; }
.item { background: #0f1117; border: 1px solid #262a36; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.item img, .item .noimg { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: #222633; display: grid; place-items: center; color: #555b6e; font-size: .8rem; }
.item .t { padding: 8px 8px 0; font-size: .85rem; font-weight: 600; }
.item .y { padding: 0 8px; font-size: .75rem; color: #8b90a3; }
.item button { margin: 8px; padding: 7px; border: none; border-radius: 8px; background: #5b8cff; color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.item button:disabled { background: #2d3242; color: #8b90a3; cursor: default; }
.list { display: flex; flex-direction: column; gap: 8px; }
.empty { margin: 0; color: #8b90a3; }
.row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: #0f1117; }
.row img, .row .noimg { width: 36px; height: 54px; border-radius: 6px; object-fit: cover; background: #222633; flex-shrink: 0; }
.row .info { flex: 1; min-width: 0; }
.row .t { font-weight: 600; font-size: .95rem; }
.row .where { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tag { font-size: .72rem; padding: 2px 8px; border-radius: 999px; color: #fff; white-space: nowrap; }
.tag.none { background: #2d3242; color: #a6abbd; }
.row .x { border: none; background: none; color: #8b90a3; font-size: 1.1rem; cursor: pointer; padding: 4px 8px; }
.best { font-size: 1.25rem; font-weight: 800; margin: 0 0 4px; }
.best b { color: #7ee2a8; }
.bars { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.bar { display: grid; grid-template-columns: 84px 1fr 92px; align-items: center; gap: 10px; font-size: .9rem; }
.bar .track { height: 10px; border-radius: 999px; background: #262a36; overflow: hidden; }
.bar .fill { height: 100%; border-radius: 999px; }
.bar .num { text-align: right; color: #a6abbd; }
.plan { margin-top: 16px; padding: 14px; border-radius: 12px; background: #0f1117; }
.plan h3 { margin: 0 0 8px; font-size: 1rem; }
.plan ol { margin: 0; padding-left: 20px; }
.plan li { margin-bottom: 6px; }
.save { color: #7ee2a8; font-weight: 700; }
.prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.price { padding: 10px 12px; border-radius: 10px; background: #0f1117; border-left: 4px solid; font-size: .9rem; }
.price b { display: block; }
.price span { color: #a6abbd; font-size: .8rem; }
.note { color: #8b90a3; font-size: .8rem; margin: 10px 0 0; }
footer { margin-top: 28px; color: #6d7286; font-size: .78rem; text-align: center; }
footer p { margin: 4px 0; }
@media (max-width: 560px) { header h1 { font-size: 1.6rem; } .bar { grid-template-columns: 70px 1fr 80px; } }
.share { margin-top: 14px; padding: 10px 16px; border: 1px solid #5b8cff; border-radius: 10px; background: none; color: #8ab4ff; font: inherit; font-weight: 700; cursor: pointer; }
.mine { display: flex; flex-wrap: wrap; gap: 8px; }
.mine button { padding: 8px 14px; border-radius: 999px; border: 1px solid #333849; background: #0f1117; color: #a6abbd; font: inherit; font-size: .9rem; cursor: pointer; }
.mine button.on { color: #fff; border-color: transparent; font-weight: 700; }
.good { margin: 0 0 6px; font-size: 1.05rem; }
.good b { color: #7ee2a8; }
.cancel { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #2a1d12; color: #ffcf99; }
.tabs { display: flex; gap: 6px; }
.tabs button { padding: 6px 14px; border-radius: 999px; border: 1px solid #333849; background: none; color: #a6abbd; font: inherit; font-size: .9rem; cursor: pointer; }
.tabs button.on { background: #eef0f6; color: #0f1117; font-weight: 700; }
.item .rank { position: absolute; margin: 6px; padding: 1px 8px; border-radius: 6px; background: rgba(0,0,0,.75); font-weight: 800; font-size: .85rem; }
.item { position: relative; }
header h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
header h1 .logo { width: 40px; height: 40px; }
header h1 .h1-sub { font-size: .55em; font-weight: 600; opacity: .6; letter-spacing: 0; }
footer a { color: #8f95ab; }
.doc { max-width: 720px; }
.doc h1 { font-size: 1.6rem; }
.doc h2 { font-size: 1.1rem; margin-top: 24px; }
.doc li { margin: 6px 0; }