/* chatbro 공통 스타일 — speaking2 /oac/list 의 것을 그대로 따랐다.
   페이지마다 CSS 를 복사하면 나중에 색 하나 바꿀 때 다섯 군데를 고쳐야 하므로
   한 파일로 뺐다. */
:root{ --bg:#070a12; --card:#10141f; --line:#1e2434; --txt:#e8ecf4;
       --sub:#8b93a7; --acc:#7873f6; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
     font:400 15px/1.6 system-ui,-apple-system,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;
     -webkit-font-smoothing:antialiased}
a{color:inherit}
/* 하단 메뉴에 가리지 않도록 아래 여백을 크게 둔다 */
.wrap{max-width:760px;margin:0 auto;padding:28px 14px calc(86px + env(safe-area-inset-bottom))}
/* 상단 바가 있는 페이지는 그만큼 위 여백을 줄인다(topbar.js 가 헤더를 넣는다) */
.topbar ~ .wrap{padding-top:14px}

/* ── 상단 바 ── */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
        gap:12px;padding:9px 14px;background:rgba(7,10,18,.92);
        -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
        border-bottom:1px solid var(--line)}
.tb-logo{display:flex;align-items:center;text-decoration:none;flex:none}
.tb-logo img{width:34px;height:34px;display:block}
.tb-right{display:flex;align-items:center;gap:8px;min-width:0}
.tb-nick{color:var(--txt);font-size:13.5px;font-weight:600;text-decoration:none;
         max-width:9.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
         border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.tb-nick:hover{border-color:var(--acc)}
.tb-out{flex:none;background:transparent;border:1px solid var(--line);color:var(--sub);
        border-radius:999px;padding:6px 13px;font-size:12.5px;cursor:pointer;font-family:inherit}
.tb-out:hover{border-color:#5a2b3a;color:#ff9ed2}
.tb-login{color:#fff;background:var(--acc);text-decoration:none;border-radius:999px;
          padding:7px 16px;font-size:13px;font-weight:600}
/* 화면 언어 전환 — 로그인 전에도 보인다(광고로 들어온 방문자가 바꿀 수 있어야 한다) */
.tb-lang{flex:none;background:transparent;color:var(--txt);font-family:inherit;
         border:1px solid var(--line);border-radius:999px;padding:6px 10px;
         font-size:12.5px;cursor:pointer}
.tb-lang:hover{border-color:var(--acc)}
.tb-lang option{color:initial}
h1{font-size:23px;margin:0 0 6px}
h2{font-size:14px;font-weight:600;margin:0 0 4px;letter-spacing:.02em}
.lead{color:var(--sub);margin:0 0 20px;font-size:13.5px;line-height:1.7}
.sub2{color:#6b7385;font-size:12.5px;margin:0 0 14px}
.sect{margin-bottom:32px}

/* ── 2열 격자 ── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.av{display:block;text-decoration:none;color:inherit;background:var(--card);
    border:1px solid var(--line);border-radius:16px;overflow:hidden;
    transition:border-color .15s,transform .15s}
.av:hover{border-color:var(--acc);transform:translateY(-2px)}
/* 세로 사진이라 얼굴이 위쪽에 있다 — 그 부분이 보이게 잘라낸다 */
.av img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 18%;
        display:block;background:#1a1f2c}
.body{padding:11px 12px 13px}
.name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.age{font-size:11px;color:var(--sub);font-weight:500}
.sex{font-size:10px;font-weight:700;border-radius:999px;padding:2px 7px}
.sex.m{background:#15304d;color:#7cc4ff}
.sex.f{background:#3d1c33;color:#ff9ed2}
.desc{color:var(--sub);font-size:12px;margin-top:5px;line-height:1.55}
.meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:10.5px;color:#6b7385;border:1px solid var(--line);border-radius:999px;padding:2px 7px}
.chip.own{border-color:#2c6b4a;color:#5ad39a}

/* ── 카드형 목록 (홈·회화·설정에서 쓴다) ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
      padding:15px 16px;margin-bottom:12px;text-decoration:none;display:block;color:inherit}
a.card{transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--acc);transform:translateY(-2px)}
.card h3{margin:0 0 5px;font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.card p{margin:0;color:var(--sub);font-size:12.5px;line-height:1.65}
.btn{display:block;text-align:center;text-decoration:none;background:var(--acc);color:#fff;
     border-radius:12px;padding:13px;font-size:14.5px;font-weight:600;margin-top:14px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}

.state{color:var(--sub);font-size:13px;padding:40px 0;text-align:center}
.state b{display:block;color:#ff8a8a;font-weight:600;margin-bottom:8px}
.retry{margin-top:12px;background:var(--card);border:1px solid var(--line);color:var(--txt);
       border-radius:999px;padding:8px 18px;font-size:13px;cursor:pointer;font-family:inherit}
.retry:hover{border-color:var(--acc)}
.note{margin-top:22px;color:var(--sub);font-size:12.5px;line-height:1.8;
      border-top:1px solid var(--line);padding-top:16px}

/* ── 설정 항목 ── */
.opt{display:flex;align-items:center;justify-content:space-between;gap:14px;
     padding:13px 0;border-bottom:1px solid var(--line)}
.opt:last-child{border-bottom:0}
.opt .t{font-size:14px}
.opt .d{color:var(--sub);font-size:12px;margin-top:3px;line-height:1.55}
.sw{flex:none;width:46px;height:27px;border-radius:999px;background:#242a3a;
    border:1px solid var(--line);position:relative;cursor:pointer;transition:background .15s}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:21px;height:21px;
           border-radius:50%;background:#6b7385;transition:transform .15s,background .15s}
.sw.on{background:var(--acc);border-color:var(--acc)}
.sw.on::after{transform:translateX(19px);background:#fff}

/* ── 하단 메뉴바 ── */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;
     background:rgba(7,9,15,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
     border-top:1px solid var(--line);display:flex;z-index:20;
     padding-bottom:env(safe-area-inset-bottom)}
.nav a{flex:1;text-align:center;padding:9px 0 8px;color:var(--sub);
       text-decoration:none;font-size:11px}
.nav a .ic{display:block;font-size:20px;margin-bottom:2px}
.nav a.on{color:#fff}
.nav a.on .ic{filter:drop-shadow(0 0 8px rgba(124,92,255,.8))}