/* 아아뜨아 — 귀여운 카페 순위 */
:root{
  --brown:#4A3728; --brown-2:#7A5C48; --muted:#9C8677;
  --aa:#7CC4F0; --aa-soft:#DDF1FF; --tt:#F4A261; --tt-soft:#FFE3C7;
  --pink:#FFB3C6; --gold:#F6C453;
  --card:#fff; --line:#F0E4D6;
  --radius:22px; --shadow:0 6px 0 rgba(74,55,40,.08);
  --font-h:'Jua',sans-serif; --font-b:'Gowun Dodum',system-ui,sans-serif;
}
[data-theme="aa"]{ --bg:#F3FAFF; --bg-2:#E4F3FF; --accent:var(--aa); --accent-soft:var(--aa-soft); --accent-deep:#3F9FD8; }
[data-theme="tt"]{ --bg:#FFF8EF; --bg-2:#FFEEDB; --accent:var(--tt); --accent-soft:var(--tt-soft); --accent-deep:#D9782F; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--brown);font-family:var(--font-b);line-height:1.6;font-size:16px;transition:background .3s}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-h);font-weight:400;letter-spacing:-.01em;margin:0}
h1{font-size:2rem}
h2{font-size:1.45rem;margin:0 0 .6rem}
section{margin:2.2rem 0}
.wrap{max-width:860px;margin:0 auto;padding:0 16px 3rem}
.muted{color:var(--muted)}
.sub{color:var(--brown-2);margin:-.3rem 0 .8rem;font-size:.95rem}

/* header */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,white);backdrop-filter:blur(8px);border-bottom:2px dashed var(--line);display:flex;align-items:center;justify-content:space-between;padding:8px 16px;max-width:100%}
.logo{display:flex;align-items:center;gap:2px;font-family:var(--font-h);font-size:1.5rem}
.logo span{margin-left:6px}
.cup.mini{width:26px;height:32px}
.top nav{display:flex;align-items:center;gap:14px;font-family:var(--font-h);font-size:1.05rem}
.top nav a:hover{color:var(--accent-deep)}
.toggle{position:relative;display:flex;align-items:center;gap:0;border:2px solid var(--brown);background:#fff;border-radius:999px;padding:3px;cursor:pointer;font:inherit;font-family:var(--font-h);height:34px}
.toggle .opt{position:relative;z-index:1;padding:0 10px;font-size:.9rem;color:var(--brown);transition:color .2s}
.toggle .knob{position:absolute;top:2px;bottom:2px;width:calc(50% - 3px);border-radius:999px;background:var(--accent);transition:left .25s cubic-bezier(.6,-.2,.4,1.3);left:2px}
[data-theme="tt"] .toggle .knob{left:calc(50% + 1px)}
[data-theme="aa"] .toggle .opt.aa,[data-theme="tt"] .toggle .opt.tt{color:#fff}

.sample-bar{background:var(--gold);color:var(--brown);text-align:center;font-size:.9rem;padding:6px 12px}

/* hero */
.hero{text-align:center;padding:1.2rem 0 .4rem}
.hero-cups{display:flex;justify-content:center;gap:12px;margin-bottom:.4rem}
.cup.big{width:118px;height:148px}
.cup.aa.big{animation:bob 3.2s ease-in-out infinite}
.cup.tt.big{animation:bob 3.2s ease-in-out .6s infinite}
.cup .steam{animation:steam 2.4s ease-in-out infinite;transform-origin:center bottom}
.cup .straw{transform-origin:78px 8px;animation:sway 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes steam{0%,100%{opacity:.35;transform:translateY(2px) scaleY(.92)}50%{opacity:.8;transform:translateY(-3px) scaleY(1.04)}}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
[data-theme="aa"] .cup.tt.big{opacity:.55;filter:saturate(.7)}
[data-theme="tt"] .cup.aa.big{opacity:.55;filter:saturate(.7)}
.hero h1{font-size:2.6rem;line-height:1.2}
.hero h1 em{font-style:normal;padding:0 .2em;border-radius:14px}
.c-aa{background:var(--aa-soft);color:#2F8CC7}.c-tt{background:var(--tt-soft);color:#D9782F}
.lead{color:var(--brown-2);font-size:1.05rem;margin:.6rem 0 0}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:.4rem 0 1rem}
.chip{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-family:var(--font-h);font-size:1rem;cursor:pointer;color:var(--brown);transition:transform .15s,background .15s}
.chip:hover{transform:translateY(-2px)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.soon{color:var(--muted);background:transparent;border-style:dashed;cursor:default}
.chip.soon small{font-size:.65rem;margin-left:2px;background:var(--bg-2);border-radius:6px;padding:0 5px}
.chip.soon:hover{transform:none}

/* tiles */
.grid.districts{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.grid.regions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.tile-emoji{font-size:1.5rem;line-height:1}
.tile.off{background:transparent;border-style:dashed;color:var(--muted);box-shadow:none;cursor:default}
.tile.off .tile-name{color:var(--muted)}
.counts{margin:.7rem 0 0;font-size:.85rem;color:var(--muted)}
.tile{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--card);border-radius:20px;border:2px solid var(--line);box-shadow:var(--shadow);transition:transform .15s,border-color .15s,background .15s}
.tile:hover{transform:translateY(-3px) rotate(-1.5deg);border-color:var(--accent);background:var(--accent-soft)}
.tile.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tile-name{font-family:var(--font-h);font-size:1.15rem}
.tile-sub{font-size:.75rem;color:var(--muted)}
.tile.on .tile-sub{color:rgba(255,255,255,.85)}

/* cafe list */
.cafes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cafe{display:flex;gap:12px;background:var(--card);border-radius:var(--radius);border:2px solid var(--line);padding:14px 16px 12px 12px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.cafe:hover{transform:translateY(-2px);border-color:var(--accent)}
.cafe[hidden]{display:none}
.rank{flex:none;width:44px;height:44px;border-radius:50%;background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:1.15rem;color:var(--brown-2);margin-top:2px}
.rank.r1,.rank.r2,.rank.r3{font-size:1.7rem;background:transparent}
.cafe-body{flex:1;min-width:0}
.cafe-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cafe h3{font-size:1.25rem;line-height:1.3;overflow-wrap:anywhere}
.score{flex:none;font-family:var(--font-h);font-size:1.05rem;background:var(--accent);color:#fff;border-radius:999px;padding:2px 12px;min-width:56px;text-align:center}
.score::before{content:"☕ ";font-size:.85em}
.addr{margin:2px 0 0;font-size:.88rem;color:var(--muted)}
.meta{margin:4px 0 0;font-size:.95rem}
.meta small{color:var(--muted)}
.star{color:var(--gold)}
.dot{color:var(--line);margin:0 4px}
.tags{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:.78rem;background:var(--accent-soft);color:var(--brown-2);border-radius:8px;padding:2px 8px}
.links{margin:8px 0 0;display:flex;gap:8px}
.btn{display:inline-block;font-family:var(--font-h);font-size:.9rem;border-radius:12px;padding:5px 12px;border:2px solid;transition:transform .1s}
.btn:active{transform:scale(.96)}
.btn.k{border-color:#FADA0A;background:#FEE500;color:#3C1E1E}.btn.k:hover{background:#F5DC00;border-color:#F5DC00}
.btn.g{border-color:#4285F4;color:#4285F4}.btn.g:hover{background:#4285F4;color:#fff}
.btn.big{border-color:var(--accent);background:var(--accent);color:#fff;font-size:1.1rem;padding:10px 22px;border-radius:999px}
.more{text-align:center;margin:1.2rem 0 0}

/* how */
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.how-grid>div{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.how-grid b{font-family:var(--font-h);font-weight:400;font-size:1.1rem;color:var(--accent-deep)}
.how-grid p{margin:.3rem 0 0;font-size:.92rem;color:var(--brown-2)}

/* misc */
.crumb{font-size:.88rem;color:var(--muted);margin:1rem 0 .4rem}
.crumb a:hover{color:var(--accent-deep)}
.page-head{margin:.4rem 0 1.2rem}
.pager{display:flex;justify-content:space-between;gap:8px;margin:1.6rem 0;font-family:var(--font-h)}
.pager a{background:var(--card);border:2px solid var(--line);border-radius:999px;padding:8px 16px}
.pager a:hover{border-color:var(--accent);background:var(--accent-soft)}
.doc{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:24px 22px;margin-top:.6rem}
.doc h1{margin-bottom:.8rem}.doc h2{margin-top:1.4rem;font-size:1.2rem}
.doc li{margin:.3rem 0}
.big-mail{font-size:1.4rem;font-family:var(--font-h);text-align:center;background:var(--accent-soft);border-radius:16px;padding:14px}
.big-mail a{color:var(--accent-deep)}
.ad{margin:1.4rem 0;min-height:90px}
.foot{border-top:2px dashed var(--line);padding:1.6rem 16px 2.4rem;text-align:center;font-size:.82rem;color:var(--muted);max-width:860px;margin:0 auto}
.foot-links{display:flex;justify-content:center;gap:16px;font-family:var(--font-h);font-size:.95rem;color:var(--brown-2);margin-bottom:.6rem}
.foot p{margin:.3rem 0}

@media (max-width:520px){
  .hero h1{font-size:2.05rem}
  .cup.big{width:92px;height:116px}
  .top nav{gap:10px;font-size:.95rem}
  .toggle .opt{padding:0 8px;font-size:.82rem}
  .cafe{padding:12px 12px 10px 10px;gap:8px}
  .rank{width:36px;height:36px;font-size:1rem}
  .rank.r1,.rank.r2,.rank.r3{font-size:1.4rem}
  .cafe h3{font-size:1.1rem}
  .score{font-size:.95rem;min-width:50px;padding:2px 9px}
  .grid.districts{grid-template-columns:repeat(4,1fr);gap:8px}
  .chips.regions{gap:6px}
  .chips.regions .chip{padding:4px 10px;font-size:.9rem}
  .chip.soon{padding:3px 8px;font-size:.8rem;border-width:1.5px}
  .chip.soon small{display:none}
  .tile-name{font-size:1rem}
  .pager a{padding:7px 12px;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){.cup.big,.cup .steam,.cup .straw{animation:none}}