/* =========================================================================
   AICOCOA 공통 베이스 — 전 페이지 공통 (Pretendard · 타이포 · 헤더 · 버튼)
   글자: 본문 16 / 소제목 22 / 대제목 36
   ========================================================================= */
:root{
  --bg:#0a0a12; --bg2:#10101c; --panel:#15162a; --panel2:#191a30;
  --line:#262741; --line2:#33345a;
  --text:#eef0f8; --text2:#b7b8d2; --text3:#8385a6;
  --brand:#6d5efc; --brand2:#8b7bff; --accent:#38d39f; --danger:#ff5d6c;
  --fz-body:16px; --fz-h2:22px; --fz-h1:36px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,system-ui,'Malgun Gothic',sans-serif;
  font-size:var(--fz-body); line-height:1.6; background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,.h-lg{font-size:var(--fz-h1);line-height:1.2;font-weight:800;letter-spacing:-.025em}
h2,.h-md{font-size:var(--fz-h2);line-height:1.3;font-weight:750;letter-spacing:-.015em}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}

/* 버튼 */
.btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:10px;padding:9px 16px;font-size:14px;font-weight:650;cursor:pointer;font-family:inherit;transition:.15s}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:#5b4ce8}
.btn-ghost{background:transparent;border:1px solid var(--line2);color:var(--text)}
.btn-ghost:hover{background:#1b1c33}

/* ===== 공통 상단 헤더 (kakao developers 스타일) ===== */
.appbar{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(95deg,#4a2f9e 0%,#2b54b0 9%,#1f86a8 19%,#163a66 36%,#0c0e22 60%,#0a0a16 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.appbar-in{display:flex;align-items:center;gap:26px;height:64px;width:100%;padding:0 26px}
.brand{display:flex;align-items:baseline;gap:7px;font-size:20px;white-space:nowrap}
.brand b{font-weight:850;letter-spacing:-.02em;color:#fff}
.brand span{font-weight:500;color:rgba(255,255,255,.82);font-size:18px}
.gnb{display:flex;gap:32px}
.gnb a{color:rgba(255,255,255,.92);font-size:15px;font-weight:650;padding:6px 0}
.gnb a:hover{color:#fff}
.appbar-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.searchbar{display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:9px 16px;width:300px;color:rgba(255,255,255,.72)}
.searchbar i{font-size:14px}
.searchbar input{background:transparent;border:none;outline:none;color:#fff;font-size:13.5px;width:100%;font-family:inherit}
.searchbar input::placeholder{color:rgba(255,255,255,.6)}
.icon-btn{position:relative;width:38px;height:38px;border-radius:50%;border:none;background:transparent;color:#fff;font-size:17px;cursor:pointer;display:grid;place-items:center;transition:.15s}
.icon-btn:hover{background:rgba(255,255,255,.13)}
.icon-btn .badge{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;line-height:1}
.profile{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.13);border-radius:22px;padding:5px 14px 5px 6px;color:#fff}
.profile:hover{background:rgba(255,255,255,.22)}
.profile{border:none;cursor:pointer;font-family:inherit}
.profile .ava{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#6d5efc,#a78bfa);display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none}
.profile .pname{font-size:13.5px;font-weight:650}

/* 프로필 드롭다운 */
.profile-wrap{position:relative}
.profile-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:150px;
  background:#15162a;border:1px solid #2a2b48;border-radius:12px;padding:6px;
  box-shadow:0 20px 50px -16px rgba(0,0,0,.6);display:none;z-index:1200}
.profile-menu.open{display:block}
.profile-menu a{display:block;padding:11px 14px;border-radius:8px;color:#e7e9f5;
  font-size:14px;font-weight:550;white-space:nowrap}
.profile-menu a:hover{background:#22243f}

/* 로그인/회원가입 — 모달 + 페이지 공용 카드 */
.auth-overlay{position:fixed;inset:0;background:rgba(8,8,16,.62);
  display:none;align-items:center;justify-content:center;z-index:1300;padding:20px}
.auth-overlay.open{display:flex}
.auth-modal,.auth-card{width:100%;max-width:400px;background:#15162a;border:1px solid #2a2b48;
  border-radius:16px;padding:24px 24px 26px;box-shadow:0 30px 80px -24px rgba(0,0,0,.7)}
.auth-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.auth-head h3{font-size:18px;font-weight:800;color:#fff}
.auth-x{border:none;background:transparent;color:#8a8ca8;font-size:18px;cursor:pointer;
  width:32px;height:32px;border-radius:8px;transition:.15s}
.auth-x:hover{background:#22243f;color:#fff}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.auth-brand .ava-lg{width:42px;height:42px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,#6d5efc,#a78bfa);display:grid;place-items:center;
  font-size:18px;font-weight:850;color:#fff}
.auth-brand .ab-name{font-size:15px;font-weight:750;color:#fff}
.auth-brand .ab-sub{font-size:12.5px;color:var(--text3);margin-top:2px}
.auth-title{font-size:20px;font-weight:800;color:#fff;margin-bottom:16px}
.auth-error{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding:11px 13px;
  border-radius:10px;background:rgba(255,93,108,.12);border:1px solid rgba(255,93,108,.3);
  color:#ff8a95;font-size:13px}
.auth-field{margin-top:14px}
.auth-field:first-child{margin-top:0}
.auth-label{display:block;font-size:12.5px;font-weight:650;color:var(--text2);margin-bottom:7px}
.auth-input{display:flex;align-items:center;gap:9px;border:1px solid #2f3052;border-radius:11px;
  padding:0 13px;background:#0f1020;transition:border-color .15s,box-shadow .15s}
.auth-input:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,94,252,.22)}
.auth-input>i{color:#7a7c9c;font-size:14px;width:16px;text-align:center}
.auth-input input{flex:1;border:none;outline:none;background:transparent;color:#fff;
  font-size:14px;padding:12px 0;font-family:inherit}
.auth-submit{width:100%;margin-top:20px;height:46px;border:none;border-radius:11px;cursor:pointer;
  background:var(--brand);color:#fff;font-size:14.5px;font-weight:700;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s}
.auth-submit:hover{background:#5b4ce8}
.auth-switch{margin-top:16px;text-align:center;font-size:13px;color:var(--text3)}
.auth-switch a{color:var(--brand2);font-weight:650}
.auth-switch a:hover{text-decoration:underline}

/* 공통 푸터 */
.site-foot{border-top:1px solid var(--line);padding:30px 0;color:var(--text3);font-size:13px;text-align:center}

/* 모바일 햄버거 + 좌측 드로어 (좌→우 슬라이드) */
.hamb{display:none;width:38px;height:38px;border-radius:50%;border:none;background:transparent;color:#fff;font-size:19px;cursor:pointer;place-items:center}
.hamb:hover{background:rgba(255,255,255,.13)}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s;z-index:90}
.drawer-backdrop.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;height:100%;width:82%;max-width:320px;background:#15162a;border-right:1px solid var(--line);
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:91;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid var(--line)}
.drawer-x{width:36px;height:36px;border:none;background:transparent;color:#fff;font-size:18px;cursor:pointer;border-radius:50%}
.drawer-x:hover{background:rgba(255,255,255,.1)}
.drawer-nav{display:flex;flex-direction:column;padding:12px 10px;gap:2px}
.drawer-nav a{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:10px;color:#e7e9f5;font-size:16px;font-weight:600}
.drawer-nav a:hover{background:#22243f}
.drawer-nav a i{width:20px;text-align:center;color:var(--brand2)}
.drawer-foot{margin-top:auto;padding:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.drawer-user{display:flex;align-items:center;gap:10px;padding:8px 12px 12px;color:#fff;font-weight:650}
.drawer-user .ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#6d5efc,#a78bfa);display:grid;place-items:center;font-size:13px;font-weight:700}
.drawer-foot-a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:9px;color:#cdd0e0;font-size:14.5px}
.drawer-foot-a:hover{background:#22243f}
.drawer-foot-a i{width:18px;text-align:center;color:var(--text3)}
.drawer-login{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border:none;border-radius:10px;background:var(--brand);color:#fff;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.drawer-login:hover{background:#5b4ce8}
/* 드로어 내 채널 메뉴(모바일) — 플랫폼별 페이지 공통 UI라 소제목으로 구분 */
.drawer{overflow-y:auto}
.drawer-div{height:1px;background:var(--line);margin:10px 14px 2px}
.drawer-sec-h{display:flex;align-items:center;gap:9px;padding:8px 18px 2px;font-size:15px;font-weight:750;color:#fff}
.drawer-sec-h i{color:var(--brand2);width:20px;text-align:center}
.drawer-sub{padding:10px 18px 2px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--text3)}
.drawer-nav a.on{background:#22243f;color:#fff}
.drawer-nav a.on i{color:var(--brand2)}

@media(max-width:860px){
  .gnb,.searchbar{display:none}
  .hamb{display:grid}
  .icon-btn.hide-sm{display:none}
  .appbar-in{padding:0 14px;gap:10px}
  .brand{font-size:18px}
  .profile .pname{display:none}
}