/* Gangnam Finds — portal stylesheet */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --brand:352 72% 52%;
  --brand-dark:352 68% 42%;
  --ink:222 22% 12%;
  --body:220 9% 38%;
  --muted:220 9% 55%;
  --line:220 14% 90%;
  --surface:0 0% 100%;
  --bg:220 20% 98%;
  --soft:220 33% 96%;
  --gold:38 92% 50%;
  --r:14px;--r-sm:9px;--r-lg:22px;
  --shadow:0 1px 2px hsl(var(--ink)/.05),0 8px 24px -12px hsl(var(--ink)/.18);
  --shadow-lg:0 24px 60px -22px hsl(var(--ink)/.28);
  --wrap:0 clamp(1rem,3.2vw,2.75rem);
}

html{-webkit-text-size-adjust:100%}
body{
  font-family:'Pretendard','Noto Sans KR',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:hsl(var(--ink));background:hsl(var(--bg));line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* content area spans the full viewport width */
.wrap{width:100%;padding:var(--wrap)}

/* ---------- header ---------- */
.topbar{background:hsl(var(--ink));color:#fff;font-size:.8125rem}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:var(--wrap);min-height:38px}
.topbar__tag{opacity:.72;display:none}
@media(min-width:640px){.topbar__tag{display:block}}

.langbar{position:relative;margin-inline-start:auto}
.langbar__btn{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem;border-radius:999px;
  background:hsl(0 0% 100%/.12);font-size:.8125rem;transition:background .15s}
.langbar__btn:hover{background:hsl(0 0% 100%/.2)}
.langbar__menu{position:absolute;inset-inline-end:0;top:calc(100% + .45rem);z-index:60;
  background:hsl(var(--surface));color:hsl(var(--ink));border:1px solid hsl(var(--line));
  border-radius:var(--r);box-shadow:var(--shadow-lg);padding:.4rem;
  display:none;grid-template-columns:repeat(2,minmax(140px,1fr));gap:.15rem;min-width:310px}
.langbar.open .langbar__menu{display:grid}
.langbar__item{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border-radius:var(--r-sm);
  font-size:.8125rem;white-space:nowrap;transition:background .12s}
.langbar__item:hover{background:hsl(var(--soft))}
.langbar__item[aria-current="true"]{background:hsl(var(--brand)/.1);color:hsl(var(--brand));font-weight:700}
.langbar__flag{font-size:1.05rem;line-height:1}

.header{position:sticky;top:0;z-index:50;background:hsl(var(--surface)/.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid hsl(var(--line))}
.header__in{display:flex;align-items:center;gap:1.25rem;padding:var(--wrap);min-height:66px}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.2rem;letter-spacing:-.02em;flex-shrink:0}
.logo__mark{width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,hsl(var(--brand)),hsl(var(--gold)));
  display:grid;place-items:center;color:#fff;font-weight:900;font-size:1rem}
.logo__sub{display:block;font-size:.625rem;font-weight:600;color:hsl(var(--muted));letter-spacing:.09em;text-transform:uppercase}

.nav{display:none;align-items:center;gap:.15rem;margin-inline-start:.5rem}
@media(min-width:960px){.nav{display:flex}}
.nav a{padding:.55rem .85rem;border-radius:var(--r-sm);font-weight:600;font-size:.9375rem;color:hsl(var(--body));transition:.15s}
.nav a:hover{background:hsl(var(--soft));color:hsl(var(--ink))}
.nav a.is-active{color:hsl(var(--brand));background:hsl(var(--brand)/.08)}

.search{margin-inline-start:auto;display:flex;align-items:center;gap:.5rem;
  background:hsl(var(--soft));border:1px solid transparent;border-radius:999px;
  padding:.5rem .95rem;min-width:min(320px,38vw);transition:.15s}
.search:focus-within{border-color:hsl(var(--brand)/.5);background:hsl(var(--surface));box-shadow:0 0 0 4px hsl(var(--brand)/.09)}
.search input{border:none;background:none;outline:none;width:100%;font-size:.875rem;color:hsl(var(--ink))}
.search input::placeholder{color:hsl(var(--muted))}
@media(max-width:719px){.search{display:none}}

.burger{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);margin-inline-start:auto}
@media(min-width:960px){.burger{display:none}}
.mobnav{display:none;border-top:1px solid hsl(var(--line));background:hsl(var(--surface));padding:.6rem clamp(1rem,3.2vw,2.75rem) 1rem}
.mobnav.open{display:block}
.mobnav a{display:block;padding:.7rem .3rem;font-weight:600;border-bottom:1px solid hsl(var(--line))}
.mobnav a:last-child{border-bottom:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,hsl(var(--ink)) 0%,hsl(340 45% 22%) 55%,hsl(var(--brand-dark)) 100%)}
.hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 15% 20%,hsl(var(--gold)/.22),transparent 60%),
             radial-gradient(50% 70% at 85% 30%,hsl(var(--brand)/.3),transparent 60%)}
.hero__in{position:relative;z-index:1;padding:clamp(3.5rem,9vw,6.5rem) clamp(1rem,3.2vw,2.75rem)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;background:hsl(0 0% 100%/.14);
  padding:.4rem .8rem;border-radius:999px;margin-bottom:1.1rem}
.hero h1{font-size:clamp(1.9rem,5vw,3.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;max-width:20ch}
.hero p{margin-top:.9rem;font-size:clamp(.95rem,1.6vw,1.15rem);opacity:.9;max-width:60ch}
.hero__search{margin-top:2rem;display:flex;gap:.5rem;max-width:640px;
  background:hsl(0 0% 100%/.13);border:1px solid hsl(0 0% 100%/.22);border-radius:999px;padding:.4rem .4rem .4rem 1.2rem}
.hero__search input{flex:1;border:none;background:none;outline:none;color:#fff;font-size:1rem;min-width:0}
.hero__search input::placeholder{color:hsl(0 0% 100%/.65)}
.hero__search button{background:#fff;color:hsl(var(--ink));font-weight:700;
  padding:.7rem 1.5rem;border-radius:999px;white-space:nowrap;transition:.15s}
.hero__search button:hover{background:hsl(var(--gold));color:hsl(var(--ink))}
.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.5rem}
.hero__stat b{display:block;font-size:clamp(1.4rem,3vw,2rem);font-weight:800;line-height:1.1}
.hero__stat span{font-size:.8125rem;opacity:.75}

/* ---------- sections ---------- */
.band{padding:clamp(2.5rem,5vw,4rem) 0}
.band--soft{background:hsl(var(--surface));border-block:1px solid hsl(var(--line))}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  padding:var(--wrap);margin-bottom:1.5rem;flex-wrap:wrap}
.shead h2{font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:800;letter-spacing:-.02em}
.shead p{color:hsl(var(--muted));font-size:.9375rem;margin-top:.15rem}
.shead a{font-size:.875rem;font-weight:700;color:hsl(var(--brand));white-space:nowrap}
.shead a:hover{text-decoration:underline}

.grid{display:grid;gap:1.15rem;padding:var(--wrap)}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid--6{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}

/* section shortcut tiles */
.tile{background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:var(--r);
  padding:1.4rem 1.1rem;text-align:center;transition:.18s;box-shadow:var(--shadow)}
.tile:hover{transform:translateY(-3px);border-color:hsl(var(--brand)/.4);box-shadow:var(--shadow-lg)}
.tile__ico{font-size:1.9rem;line-height:1;margin-bottom:.6rem}
.tile b{display:block;font-size:.9375rem;font-weight:700}

/* place card */
.card{background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:.18s;box-shadow:var(--shadow)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:hsl(var(--brand)/.35)}
.card__img{aspect-ratio:4/3;background:linear-gradient(135deg,hsl(var(--soft)),hsl(220 20% 90%));
  position:relative;overflow:hidden;display:grid;place-items:center;color:hsl(var(--muted));font-size:2rem}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__badge{position:absolute;top:.6rem;inset-inline-start:.6rem;background:hsl(var(--brand));color:#fff;
  font-size:.6875rem;font-weight:700;padding:.25rem .55rem;border-radius:999px;z-index:1}
.card__body{padding:.95rem 1.05rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card__meta{font-size:.75rem;color:hsl(var(--brand));font-weight:700;letter-spacing:.02em}
.card__title{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.card__desc{font-size:.8438rem;color:hsl(var(--body));line-height:1.55}
.card__foot{margin-top:auto;padding-top:.6rem;display:flex;gap:.7rem;font-size:.75rem;color:hsl(var(--muted))}

/* neighborhood tile */
.nb{position:relative;border-radius:var(--r);overflow:hidden;min-height:150px;display:flex;
  align-items:flex-end;padding:1.1rem;color:#fff;box-shadow:var(--shadow);
  background:linear-gradient(140deg,hsl(var(--ink)),hsl(340 40% 30%));transition:.18s}
.nb:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.nb b{font-size:1.05rem;font-weight:800;display:block}
.nb span{font-size:.75rem;opacity:.8}

/* itinerary card */
.itin{background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:var(--r);
  padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;transition:.18s;box-shadow:var(--shadow)}
.itin:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:hsl(var(--brand)/.35)}
.itin__dur{font-size:.6875rem;font-weight:700;color:hsl(var(--brand));background:hsl(var(--brand)/.1);
  padding:.25rem .6rem;border-radius:999px;align-self:flex-start}
.itin b{font-size:1.05rem;font-weight:700;line-height:1.4}
.itin p{font-size:.8438rem;color:hsl(var(--body))}

/* page heading + filters */
.phead{background:hsl(var(--surface));border-bottom:1px solid hsl(var(--line));padding:clamp(1.8rem,4vw,3rem) 0 0}
.phead__in{padding:var(--wrap)}
.crumb{font-size:.8125rem;color:hsl(var(--muted));margin-bottom:.5rem}
.crumb a:hover{color:hsl(var(--brand))}
.phead h1{font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:800;letter-spacing:-.025em}
.phead p{color:hsl(var(--muted));margin-top:.35rem}
.chips{display:flex;gap:.45rem;overflow-x:auto;padding:1.25rem clamp(1rem,3.2vw,2.75rem) 1.1rem;scrollbar-width:thin}
.chip{flex-shrink:0;padding:.45rem .95rem;border-radius:999px;border:1px solid hsl(var(--line));
  font-size:.8438rem;font-weight:600;color:hsl(var(--body));background:hsl(var(--surface));transition:.15s;white-space:nowrap}
.chip:hover{border-color:hsl(var(--brand)/.5);color:hsl(var(--brand))}
.chip.is-active{background:hsl(var(--brand));border-color:hsl(var(--brand));color:#fff}

/* detail */
.detail{padding:var(--wrap);padding-block:clamp(1.75rem,4vw,2.75rem)}
.detail__hero{aspect-ratio:21/9;border-radius:var(--r-lg);overflow:hidden;margin-bottom:1.75rem;
  background:linear-gradient(135deg,hsl(var(--soft)),hsl(220 20% 88%));display:grid;place-items:center;font-size:3rem;color:hsl(var(--muted))}
.detail__hero img{width:100%;height:100%;object-fit:cover}
.detail h1{font-size:clamp(1.6rem,4vw,2.5rem);font-weight:800;letter-spacing:-.025em}
.detail__lead{font-size:1.05rem;color:hsl(var(--body));margin-top:.6rem;max-width:75ch}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin:1.75rem 0;
  padding:1.25rem;background:hsl(var(--surface));border:1px solid hsl(var(--line));border-radius:var(--r)}
.fact dt{font-size:.75rem;font-weight:700;color:hsl(var(--muted));letter-spacing:.04em;text-transform:uppercase}
.fact dd{font-size:.9375rem;margin-top:.2rem}
.prose{max-width:78ch;font-size:1rem;color:hsl(var(--body))}
.prose p{margin-bottom:1rem}
.prose h2,.prose h3{color:hsl(var(--ink));font-weight:700;margin:1.75rem 0 .6rem}

/* empty state */
.empty{padding:4rem 1rem;text-align:center;color:hsl(var(--muted))}
.empty__ico{font-size:2.5rem;margin-bottom:.75rem}

/* footer */
.footer{background:hsl(var(--ink));color:hsl(0 0% 100%/.72);margin-top:auto;padding:clamp(2.5rem,5vw,3.5rem) 0 1.5rem}
.footer__in{padding:var(--wrap);display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.footer h4{color:#fff;font-size:.8125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.8rem}
.footer a{display:block;padding:.22rem 0;font-size:.875rem;transition:.15s}
.footer a:hover{color:#fff}
.footer__brand p{font-size:.875rem;max-width:36ch;margin-top:.6rem}
.footer__langs{display:flex;flex-wrap:wrap;gap:.4rem}
.footer__langs a{padding:.28rem .6rem;border:1px solid hsl(0 0% 100%/.16);border-radius:999px;font-size:.75rem}
.footer__langs a:hover{background:hsl(0 0% 100%/.1);color:#fff}
.footer__bar{padding:1.5rem clamp(1rem,3.2vw,2.75rem) 0;margin-top:2rem;border-top:1px solid hsl(0 0% 100%/.12);
  font-size:.8125rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

.page{display:flex;flex-direction:column;min-height:100vh}

/* RTL */
[dir="rtl"] .hero h1,[dir="rtl"] .hero p{margin-inline-start:0}
[dir="rtl"] .hero__search{padding:.4rem 1.2rem .4rem .4rem}