:root{
  --paper:#fbfbf8;--ink:#101418;--sub:#43484d;--muted:#5b6065;
  --hair:#e4e5df;--gold:#86610a;--yellow:#ffd12e;--yellow-soft:#ffd94a;--tint:#f4f3ee;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Figtree,'Noto Sans KR',-apple-system,sans-serif;
  font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}
.container{max-width:760px;margin:0 auto;padding:0 24px}

/* ── Header ── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,251,248,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.site-header .inner{
  max-width:1200px;margin:0 auto;padding:0 24px;
  height:60px;display:flex;align-items:center;justify-content:space-between;
}
.wordmark{
  font-family:Jua,Figtree,sans-serif;font-weight:400;font-size:23px;
  color:var(--ink);text-decoration:none;letter-spacing:0;
}
.wordmark i{font-style:normal;color:var(--yellow)}
.wordmark small{
  font-family:Figtree,'Noto Sans KR',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.02em;color:var(--gold);margin-left:10px;
}
.site-nav{display:flex;align-items:center;gap:26px}
.site-nav a{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sub);text-decoration:none;padding:3px 0;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--gold)}
.site-nav a.on{color:var(--ink);border-bottom-color:var(--yellow)}

/* ── Hero ── */
.hero{padding:68px 0 52px}
.kicker{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:0 0 20px;display:flex;align-items:center;gap:9px;
}
.kicker::before{content:"";width:10px;height:10px;background:var(--yellow);display:inline-block;border-radius:2px}
h1{
  font-family:Jua,'Noto Sans KR',sans-serif;font-weight:400;
  font-size:clamp(36px,6.5vw,60px);line-height:1.22;
  letter-spacing:-.01em;margin:0 0 28px;
}
h1 i{font-style:normal;color:var(--yellow)}
.hero .lead{font-size:18px;line-height:1.85}
.lead strong,.hero .lead strong{
  background:linear-gradient(transparent 58%,var(--yellow-soft) 58%);
}

/* ── Type ── */
p{margin:0 0 18px;color:var(--sub)}
strong{color:var(--ink);font-weight:700}
.lead{font-size:17px}
h2{
  font-family:Jua,'Noto Sans KR',sans-serif;font-weight:400;
  font-size:clamp(24px,3.6vw,30px);line-height:1.35;margin:0 0 20px;
}
blockquote{
  margin:30px 0;padding:4px 0 4px 22px;border-left:3px solid var(--yellow);
  font-size:17px;line-height:1.8;font-weight:500;color:var(--ink);
}
blockquote p{color:var(--ink);margin:0}
main p a{color:var(--ink);text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
main p a:hover{color:var(--gold)}

/* ── Section frame ── */
section{padding:52px 0 36px;border-top:1px solid var(--hair)}
section.plain{border-top:0;padding-top:0}
.sec-head{display:flex;align-items:baseline;gap:14px;margin:0 0 24px}
.sec-no{font-size:12px;font-weight:800;color:var(--gold);letter-spacing:.06em}
.sec-label{
  font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
main{padding-bottom:100px}

/* ── Marquee ── */
.marquee{
  overflow:hidden;background:var(--ink);color:#e8e8e4;
  padding:13px 0;
}
.marquee .track{
  display:inline-flex;white-space:nowrap;
  animation:mq 30s linear infinite;
}
.marquee span{
  font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding-right:56px;
}
.marquee b{color:var(--yellow);font-weight:600}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── 홈 doors ── */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.door{
  border:1px solid var(--hair);border-radius:12px;background:#fff;
  padding:28px 26px 24px;
  text-decoration:none;display:flex;flex-direction:column;min-height:220px;
  transition:background .18s,color .18s,border-color .18s;
}
.door .d-no{font-size:12px;font-weight:800;color:var(--gold);margin:0 0 14px;letter-spacing:.06em;text-transform:uppercase}
.door h3{font-family:Jua,'Noto Sans KR',sans-serif;font-weight:400;font-size:21px;margin:0 0 10px;line-height:1.35;color:var(--ink)}
.door p{font-size:14.5px;margin:0 0 20px;flex:1}
.door .go{
  font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
.door:hover{background:var(--ink);border-color:var(--ink)}
.door:hover h3{color:#fff}
.door:hover p{color:#b9bcb6}
.door:hover .go,.door:hover .d-no{color:var(--yellow)}
@media(max-width:640px){.doors{grid-template-columns:1fr}.door{min-height:0}}

/* ── note ── */
.aside-note{background:var(--tint);border-radius:10px;padding:20px 24px;margin:36px 0}
.aside-note p{font-size:13.5px;margin:0 0 10px;color:var(--muted)}
.aside-note p:last-child{margin:0}
.aside-note .n-tag{
  font-size:10.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  display:block;margin:0 0 10px;
}

/* ── closing ── */
.closing{margin-top:52px}
.closing .big{
  font-family:Jua,'Noto Sans KR',sans-serif;font-weight:400;
  font-size:clamp(22px,3.6vw,29px);line-height:1.55;color:var(--ink);margin:0 0 26px;
}
.closing .latin{
  font-size:15px;font-weight:700;letter-spacing:.02em;
  color:var(--gold);margin:0;line-height:1.7;font-style:italic;
}
.closing .latin span{display:block;color:var(--muted);font-size:12.5px;font-weight:400;font-style:normal}

/* ── Footer ── */
.site-footer{background:var(--ink);color:#b9bcb6;padding:52px 0 60px}
.site-footer .inner{max-width:1200px;margin:0 auto;padding:0 24px}
.site-footer .brand{
  font-family:Jua,Figtree,sans-serif;font-weight:400;
  font-size:32px;color:#fff;margin:0 0 18px;
}
.site-footer .brand i{font-style:normal;color:var(--yellow)}
.site-footer p{font-size:13px;color:#b9bcb6;margin:0 0 6px;line-height:1.8}
.site-footer a{color:#d9dbd5;text-decoration-color:var(--yellow);text-underline-offset:3px}
.site-footer a:hover{color:#fff}
.site-footer .legal{
  margin-top:24px;padding-top:18px;border-top:1px solid #2a2e33;
}
.site-footer .legal p{font-size:11.5px;letter-spacing:.02em;color:#8b8f94}

/* ── 모임 카드 ── */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cards.small{grid-template-columns:repeat(3,1fr);gap:12px}
a.mcard{
  border:1px solid var(--hair);border-radius:12px;background:#fff;
  padding:22px 20px 18px;display:flex;flex-direction:column;
  min-height:190px;text-decoration:none;
  transition:background .16s,color .16s,border-color .16s;
}
.cards.small a.mcard{min-height:150px;padding:18px 16px 14px}
.mcard .c-no{font-size:11px;font-weight:800;color:var(--gold);margin:0 0 10px;letter-spacing:.06em}
.mcard h3{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.4;margin:0 0 6px;color:var(--ink)}
.cards.small .mcard h3{font-size:15.5px}
.mcard .meta{
  font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px;
}
.mcard p{font-size:13.5px;line-height:1.65;margin:0;flex:1;color:var(--sub)}
.cards.small .mcard p{font-size:12.5px}
.mcard .go{
  font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:14px;
}
a.mcard:hover{background:var(--ink);border-color:var(--ink)}
a.mcard:hover h3{color:#fff}
a.mcard:hover p{color:#b9bcb6}
a.mcard:hover .meta{color:#8b8f94}
a.mcard:hover .go,a.mcard:hover .c-no{color:var(--yellow)}
@media(max-width:860px){.cards.small{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards,.cards.small{grid-template-columns:1fr}a.mcard,.cards.small a.mcard{min-height:0}}

/* wide bleed for card grids */
.bleed{width:min(980px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}
@media(max-width:560px){.bleed{width:100%;margin-left:0;transform:none}}

@media(max-width:640px){
  .hero{padding:48px 0 40px}
  section{padding:42px 0 30px}
  .site-nav{gap:16px}
  .wordmark small{display:none}
}