/* ═══════════════════════════════════════════════════════════════════════
   캠스터디넷 커뮤니티 — 디자인 시스템
   기준색은 실제 앱(FocusGuard)의 시그니처 그린을 그대로 가져왔다.
   마케팅 사이트와 제품이 같은 색을 쓸 때 "이어져 있다"는 감각이 생긴다.
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css');

:root{
  /* 지면 */
  --bg:#04060c;
  --bg-2:#070b14;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  /* 글자 */
  --tx:#eef2f8;
  --tx-2:#9aa7bd;
  --tx-3:#5e6b82;

  /* 강조 — 순공/집중 = 그린, 정보 = 블루, 독서실 = 골드 */
  --focus:#00dfa0;
  --focus-dim:rgba(0,223,160,.13);
  --cafe:#5eb0ff;
  --room:#f0b865;
  --warn:#f87171;

  /* 형태 */
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.85);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* 헤더가 sticky 라서, 앵커로 이동하면 제목이 헤더 밑에 깔린다.
   앞으로 목차·앵커를 붙일 때를 대비해 미리 막아둔다. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:76px; }
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:'Pretendard Variable','Pretendard',-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  font-size:16px; line-height:1.65; letter-spacing:-.021em;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; display:block; }
button{ font-family:inherit; }
.num{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* 배경 오로라 — 평평한 검정보다 깊이가 생긴다. 고정이라 스크롤 비용이 없다. */
.aura{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.aura::before,.aura::after{
  content:''; position:absolute; border-radius:50%; filter:blur(120px);
}
.aura::before{
  width:60vw; height:60vw; top:-22vw; left:-12vw;
  background:radial-gradient(circle,rgba(0,223,160,.16),transparent 70%);
}
.aura::after{
  width:55vw; height:55vw; top:18vh; right:-18vw;
  background:radial-gradient(circle,rgba(94,176,255,.13),transparent 70%);
}

.wrap{ max-width:1080px; margin:0 auto; padding:0 22px; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 22px; }

/* ── 헤더 ───────────────────────────────────────────── */
.hd{
  position:sticky; top:0; z-index:60;
  background:rgba(4,6,12,.72); backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.hd-in{
  max-width:1080px; margin:0 auto; padding:0 22px; height:60px;
  display:flex; align-items:center; gap:14px;
}
.logo{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:15.5px; letter-spacing:-.03em; }
.logo i{
  width:29px; height:29px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--focus),#0891b2); color:#04060c;
  font-style:normal; font-size:13px; font-weight:900;
  box-shadow:0 0 22px rgba(0,223,160,.35);
}
.hd-nav{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.hd-link{ font-size:13.5px; font-weight:600; color:var(--tx-2); white-space:nowrap; transition:color .18s; }
.hd-link:hover{ color:var(--tx); }
.hd-cta{
  font-size:13px; font-weight:700; white-space:nowrap; color:#04060c;
  background:var(--focus); padding:8px 15px; border-radius:999px;
  transition:transform .18s var(--ease), box-shadow .18s;
  box-shadow:0 0 0 rgba(0,223,160,0);
}
.hd-cta:hover{ transform:translateY(-1px); box-shadow:0 6px 20px -4px rgba(0,223,160,.5); }
@media (max-width:560px){ .hd-link{ display:none; } }

/* ── 타이포 ─────────────────────────────────────────── */
/* 콘텐츠 페이지(매장·지역·폼) 기준. 랜딩 히어로는 .hero h1 에서 따로 키운다. */
h1{ font-size:clamp(25px,3.6vw,38px); font-weight:800; line-height:1.2;
    letter-spacing:-.042em; margin:12px 0 14px; }
h2{ font-size:clamp(21px,2.6vw,30px); font-weight:800; line-height:1.28;
    letter-spacing:-.038em; margin:0 0 14px; }
h3{ font-size:17px; font-weight:750; letter-spacing:-.03em; margin:0 0 10px; }
.lead{ font-size:clamp(15px,1.7vw,18px); color:var(--tx-2); line-height:1.72; margin:0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--focus); background:var(--focus-dim);
  padding:6px 13px; border-radius:999px; margin-bottom:6px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:99px; background:var(--focus); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.8)} }

/* ── 카드 ───────────────────────────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px;
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.card + .card{ margin-top:14px; }
.card-hover:hover{ border-color:var(--line-2); background:var(--surface-2); transform:translateY(-3px); }
.card-focus{ background:linear-gradient(150deg,rgba(0,223,160,.10),transparent 62%);
             border-color:rgba(0,223,160,.28); }
.card-info{ background:linear-gradient(150deg,rgba(94,176,255,.10),transparent 62%);
            border-color:rgba(94,176,255,.28); }

/* ── 버튼 ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size:14.5px; font-weight:700; letter-spacing:-.02em;
  padding:13px 24px; border-radius:999px; border:1px solid var(--line-2);
  color:var(--tx); background:transparent; cursor:pointer;
  transition:transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover{ transform:translateY(-2px); background:var(--surface-2); border-color:var(--line-2); }
.btn-p{ background:var(--focus); color:#04060c; border-color:var(--focus); }
.btn-p:hover{ background:var(--focus); box-shadow:0 12px 30px -8px rgba(0,223,160,.55); }
.btn-lg{ padding:16px 30px; font-size:15.5px; }
.btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }

/* ── 배지 ───────────────────────────────────────────── */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
        font-weight:800; padding:5px 11px; border-radius:999px; letter-spacing:-.01em; }
.badge-cafe{ color:var(--cafe); background:rgba(94,176,255,.14); }
.badge-room{ color:var(--room); background:rgba(240,184,101,.14); }
.badge-live{ color:var(--focus); background:var(--focus-dim); }

/* ── 스크롤 등장 ─────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001s!important; }
}

/* ── 매장 상세 ───────────────────────────────────────── */
.bc{ font-size:12.5px; color:var(--tx-3); padding:22px 0 0; display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.bc a{ transition:color .18s; }
.bc a:hover{ color:var(--tx); }
.bc i{ font-style:normal; opacity:.4; }
.addr{ color:var(--tx-2); font-size:14.5px; margin:0 0 5px; }
.meta{ color:var(--tx-3); font-size:12.5px; margin:0; }

#minimap{ height:280px; border-radius:var(--r); overflow:hidden; margin-top:20px;
          border:1px solid var(--line); background:#070b14; }
.leaflet-control-attribution{ background:rgba(4,6,12,.8)!important; color:#4d586b!important; font-size:10px!important; }
.leaflet-control-attribution a{ color:#6b788d!important; }

/* 매장 상세·지역 인덱스에서 쓰는 강조 카드 */
.stats{ background:linear-gradient(150deg,rgba(0,223,160,.10),transparent 62%);
        border-color:rgba(0,223,160,.26); }
.claim{ background:linear-gradient(150deg,rgba(94,176,255,.10),transparent 62%);
        border-color:rgba(94,176,255,.28); }
.claim p{ color:var(--tx-2); font-size:14px; margin:0 0 18px; }
.cta{ background:linear-gradient(160deg,rgba(0,223,160,.12),rgba(94,176,255,.05) 60%,transparent);
      border-color:rgba(0,223,160,.24); text-align:center; padding:34px 26px; }
.cta p{ color:var(--tx-2); font-size:14px; margin:0 0 20px; }

/* ── 네온 회전 배지 ────────────────────────────────────
   바깥 링의 문구가 원을 따라 돌고, 안쪽 코어가 숨쉬듯 빛난다.
   문구는 SVG textPath 를 쓰므로 글자 수가 바뀌어도 곡선을 따라간다. */
.neon{ position:relative; width:min(260px,68vw); aspect-ratio:1; margin:0 auto; }

.neon-ring{ position:absolute; inset:0; animation:neon-spin 24s linear infinite; }
.neon-ring text{
  font-size:13.2px; font-weight:800; letter-spacing:.02em; fill:var(--focus);
  filter:drop-shadow(0 0 5px rgba(0,223,160,.85)) drop-shadow(0 0 14px rgba(0,223,160,.45));
}
@keyframes neon-spin{ to{ transform:rotate(360deg); } }

/* 반대로 도는 점선 링 — 겹쳐 돌면 평면이 입체로 보인다 */
.neon-dash{ position:absolute; inset:9%; border-radius:50%;
  border:1px dashed rgba(0,223,160,.34); animation:neon-spin 34s linear infinite reverse; }

.neon-core{
  position:absolute; inset:19%; border-radius:50%;
  display:grid; place-content:center; text-align:center; gap:2px;
  background:radial-gradient(circle at 50% 42%, rgba(0,223,160,.20), rgba(4,6,12,.9) 68%);
  border:1px solid rgba(0,223,160,.42);
  box-shadow:0 0 26px rgba(0,223,160,.32), inset 0 0 34px rgba(0,223,160,.14);
  animation:neon-breathe 3.4s ease-in-out infinite;
}
@keyframes neon-breathe{
  0%,100%{ box-shadow:0 0 22px rgba(0,223,160,.26), inset 0 0 30px rgba(0,223,160,.12); }
  50%    { box-shadow:0 0 42px rgba(0,223,160,.46), inset 0 0 40px rgba(0,223,160,.20); }
}
.neon-core .cap{ font-size:11.5px; font-weight:700; color:var(--tx-3); letter-spacing:.14em; }
.neon-core .big{
  font-size:clamp(30px,7.5vw,42px); font-weight:800; letter-spacing:-.045em; line-height:1.05;
  color:#eafff7; text-shadow:0 0 12px rgba(0,223,160,.75), 0 0 30px rgba(0,223,160,.4);
}
.neon-core .sub{ font-size:12px; font-weight:700; color:var(--focus); }

/* 모션을 줄이는 사용자에게는 회전을 멈추고 정지 배지로 보여준다 */
@media (prefers-reduced-motion:reduce){
  .neon-ring,.neon-dash,.neon-core{ animation:none; }
}

/* ── 공동 목표 구슬 필드 ──────────────────────────────
   구슬 하나가 실제로 인증한 학생 한 명이다. 장식이 아니라 데이터라서,
   숫자만 보여줄 때보다 "같이 하고 있다"는 감각이 훨씬 세게 온다.
   캐릭터 일러스트를 쓰지 않은 것은 에셋 없이도 톤이 맞고, 어설퍼질 여지가 없어서다. */
.orbfield{
  position:relative; height:clamp(230px,34vw,300px); border-radius:var(--r-xl);
  overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,223,160,.05));
  border:1px solid var(--line);
}

/* 차오른 만큼의 수위 — height 를 인라인 스타일로 준다 */
.orb-fill{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,rgba(0,223,160,.24),rgba(0,223,160,.06));
  border-top:1px solid rgba(0,223,160,.55);
  box-shadow:0 -8px 30px rgba(0,223,160,.28);
  transition:height 1.2s var(--ease);
}

.orb{
  position:absolute; bottom:-14%; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:13px; font-weight:800; color:#04060c;
  background:radial-gradient(circle at 34% 30%, #b9ffe8, var(--focus) 62%, #0a9e78);
  box-shadow:0 0 14px rgba(0,223,160,.6), inset -3px -4px 8px rgba(0,0,0,.28);
  animation:orb-rise linear infinite;
  will-change:transform, opacity;
}
/* 상단 테두리에서 잘리면 어색하다. 꼭대기에 닿기 전에 다 녹아 없어져야 한다. */
@keyframes orb-rise{
  0%   { transform:translateY(0) scale(.82); opacity:0; }
  14%  { opacity:1; }
  58%  { opacity:1; }
  100% { transform:translateY(-300px) scale(1.05); opacity:0; }
}
/* 좌우로 살짝 흔들려야 일직선으로 올라가는 기계 느낌이 안 난다 */
.orb.sway{ animation-name:orb-rise, orb-sway; animation-timing-function:linear, ease-in-out; }
@keyframes orb-sway{ 0%,100%{ margin-left:0 } 50%{ margin-left:16px } }

.orb-cap{
  position:absolute; left:0; right:0; top:0; padding:18px 20px 0;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.orb-goal{ font-size:12px; font-weight:700; color:var(--tx-3); }
.orb-now{ font-size:clamp(26px,4.6vw,36px); font-weight:800; letter-spacing:-.045em; line-height:1.1;
          color:#eafff7; text-shadow:0 0 14px rgba(0,223,160,.6); }
.orb-pct{ font-size:13px; font-weight:800; color:var(--focus); }
.orb-foot{
  position:absolute; left:0; right:0; bottom:0; padding:0 20px 16px;
  font-size:12px; color:var(--tx-2); display:flex; justify-content:space-between; gap:10px;
}

@media (prefers-reduced-motion:reduce){
  .orb{ animation:none; opacity:.9; }
}

/* 매장 상세의 순공 랭킹 */
.ranking{ background:linear-gradient(150deg,rgba(240,184,101,.09),transparent 62%);
          border-color:rgba(240,184,101,.26); }
.rank-list{ display:grid; gap:6px; margin:16px 0 12px; }
.rank-row{ display:flex; align-items:center; gap:12px; padding:11px 14px;
           border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--line); }
.rank-no{ width:26px; text-align:center; font-weight:800; font-size:14px;
          color:var(--tx-3); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.rank-name{ flex:1; min-width:0; font-size:14px; font-weight:700;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-hrs{ flex:0 0 auto; font-size:13.5px; font-weight:800; color:var(--room);
           font-variant-numeric:tabular-nums; }

/* 인증 집계 */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin:18px 0 13px; }
.stat-row > div{ text-align:center; padding:17px 8px; border-radius:var(--r);
                 background:rgba(255,255,255,.03); border:1px solid var(--line); }
.stat-row b{ display:block; font-size:27px; font-weight:800; color:var(--focus); line-height:1.05; letter-spacing:-.04em; }
.stat-row span{ display:block; font-size:11.5px; color:var(--tx-3); margin-top:6px; }

/* 목록 */
.list{ display:grid; gap:8px; }
.item{ display:flex; align-items:flex-start; gap:11px; padding:14px 15px;
       border:1px solid rgba(255,255,255,.06); border-radius:var(--r);
       background:rgba(255,255,255,.02); transition:.2s var(--ease); }
.item:hover{ background:var(--surface-2); border-color:var(--line-2); transform:translateX(3px); }
.dot{ width:7px; height:7px; border-radius:99px; margin-top:9px; flex:0 0 auto; }
.item b{ font-size:14.5px; font-weight:700; display:block; letter-spacing:-.028em; }
.item small{ font-size:12px; color:var(--tx-3); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ padding:7px 14px; border:1px solid var(--line); border-radius:999px;
       font-size:13px; font-weight:600; transition:.2s var(--ease); }
.chip:hover{ border-color:var(--focus); color:var(--focus); background:var(--focus-dim); }
.chip .n{ color:var(--tx-3); font-size:12px; margin-left:3px; }

/* ── 폼 ─────────────────────────────────────────────── */
.field{ margin-bottom:17px; }
label{ display:block; font-size:12.5px; font-weight:700; color:var(--tx-2); margin-bottom:8px; letter-spacing:-.02em; }
label .req{ color:var(--warn); }
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  width:100%; background:rgba(255,255,255,.045); color:var(--tx);
  font-family:inherit; font-size:14.5px; border:1px solid var(--line);
  border-radius:14px; padding:13px 15px; outline:none; color-scheme:dark;
  transition:border-color .18s, background .18s;
}
input:focus,select:focus,textarea:focus{ border-color:rgba(0,223,160,.55); background:rgba(255,255,255,.07); }
input::placeholder,textarea::placeholder{ color:#4a5568; }
select{ background-color:#0d1320; }
select option{ background-color:#0d1320; color:var(--tx); }
textarea{ resize:vertical; min-height:96px; }
.hint{ font-size:11.5px; color:var(--tx-3); margin-top:7px; line-height:1.65; }
.check{ display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--tx-2); cursor:pointer; }
.check input{ margin-top:2px; width:17px; height:17px; accent-color:var(--focus); flex:0 0 auto; }
.err{ color:var(--warn); font-size:12px; margin-top:7px; display:none; }
.field.invalid .err{ display:block; }
.field.invalid input,.field.invalid select{ border-color:rgba(248,113,113,.55); }

/* ── 푸터 ───────────────────────────────────────────── */
.ft{ border-top:1px solid var(--line); margin-top:64px; padding:34px 0 48px;
     font-size:11.5px; color:var(--tx-3); line-height:1.85; }

/* ── 매장 미니맵 밝기 ──────────────────────────────────
   CARTO dark_all 은 한적한 지역에서 거의 검정이라 미니맵이 안 보인다.
   contrast 를 낮춰 검정을 먼저 들어올린 뒤 brightness 로 올린다.
   (brightness 만 쓰면 0 에 가까운 값은 곱해도 그대로라 안 밝아진다)
   지도 화면(map.html)은 넓어서 그대로도 잘 보이므로 #minimap 만 건드린다. (2026-08-27) */
#minimap .leaflet-tile-pane{ filter:contrast(.8) brightness(1.7); }

@media (max-width:640px){
  .card{ padding:20px; border-radius:var(--r-lg); }
  .btn{ padding:12px 20px; }
  .stat-row{ gap:8px; }
  .stat-row b{ font-size:22px; }
}