/* =============================================================
   인간의 기원 여름학교 — 공용 스타일 (style.css)
   디자인 시스템: 딥 네이비 풀폭 바 + 웜 크림 바탕 + 네온 포인트 3색
   (그린 = KAIST·서강대/신청, 핑크 = 접수중/공지, 사이언 = 보조)
   모든 페이지가 이 파일 + config.js 를 공유합니다.
   ============================================================= */
:root{
  --bg:#f8f5f0;            /* 웜 크림 바탕 */
  --paper:#fffdf9;         /* 웜 화이트 카드 */
  --ink:#2a2521;           /* 웜 차콜 본문 */
  --muted:#857b6c;         /* 웜 그레이 */
  --line:#e9e1d3;          /* 웜 라인 */
  --navy:#16295c;          /* 딥 네이비 (탑바) */
  --navy-line:#0e1c44;
  --navy-ref:#1e3a8a;      /* 텍스트용 네이비 */
  --green:#43e3a0;         /* 네온 그린 (네이비 위) */
  --green-ink:#0e9e6b;     /* 밝은 배경용 그린 */
  --green-deep:#0a7a52;
  --pink:#ff2e93; --pink-ink:#db197c; --pink-soft:#fff0f6;
  --cyan:#0ea5e9; --cyan-ink:#0284c7;
  --sogang:#a5192e;        /* 서강대 레드 */
  --radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);letter-spacing:-.01em;line-height:1.5;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}
.wrap{max-width:600px;margin:0 auto;padding:22px 18px 46px}

/* ---------- 풀폭 네이비 바 (메인 히어로형) ---------- */
.topbar{background:var(--navy);color:#fff;padding:42px 20px 36px;text-align:center;border-bottom:3px solid var(--navy-line)}
.topbar .inner{max-width:600px;margin:0 auto}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:16px}
.topbar h1{font-family:'Noto Serif KR',serif;font-weight:700;font-size:clamp(28px,7.2vw,40px);
  line-height:1.16;margin:0;color:#fff;letter-spacing:.005em}
.topbar .en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18.5px;color:#c6cfe0;margin-top:12px}
.meta{display:inline-flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.meta span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  padding:6px 13px;border-radius:999px;font-size:12.5px;color:#eef1f7;font-weight:500}
.status{display:inline-flex;align-items:center;gap:7px;margin-top:15px;background:rgba(255,46,147,.15);
  border:1px solid rgba(255,46,147,.42);color:#ff8cc0;font-weight:700;font-size:12.5px;padding:7px 15px;border-radius:999px}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--pink)}

/* ---------- 서브페이지 컴팩트 바 ---------- */
.topbar.compact{padding:20px 20px;text-align:left}
.topbar.compact .inner{display:flex;align-items:center;gap:12px}
.topbar.compact .back{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.12);color:#fff;flex:none;transition:background .12s}
.topbar.compact .back:hover{background:rgba(255,255,255,.2)}
.topbar.compact h1{font-size:19px}
.topbar.compact .sub{font-size:11.5px;color:#aeb9d4;margin-top:1px;font-weight:500}

/* ---------- 섹션 라벨 ---------- */
.lbl{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted);margin:20px 6px 10px}

/* ---------- 타일 ---------- */
.tile{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:10px;transition:transform .12s ease, box-shadow .18s ease}
.tile:hover{transform:translateY(-1px);box-shadow:0 12px 26px -20px rgba(80,60,30,.4)}
.tile .ic{flex:none;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:#f1ebdf;color:#8a7a5f}
.tile .tx{flex:1;min-width:0}
.tile .ti{font-size:15.5px;font-weight:600}
.tile .de{font-size:12.5px;color:var(--muted);margin-top:2px}
.tile .ar{flex:none;color:#cdbfa6}
.tile .soon{font-size:10.5px;font-weight:600;color:var(--muted);background:#efe8da;padding:3px 9px;border-radius:999px}
.tile.apply{background:#e9f6ef;border-color:rgba(14,158,107,.42)}
.tile.apply .ic{background:rgba(14,158,107,.14);color:var(--green-ink)}
.pair2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.pair2 .tile{margin-bottom:0}

/* 아이콘 은은한 컬러 */
.ic.c-blue{background:#e9edf7 !important;color:#41568f !important}
.ic.c-amber{background:#f6eeda !important;color:#a9822f !important}
.ic.c-rose{background:#f9e8f0 !important;color:#c0568a !important}
.ic.c-green{background:#e6f4ec !important;color:#2f9468 !important}
.ic.c-navy{background:#e9edf7 !important;color:var(--navy-ref) !important}

/* ---------- 카드 ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:10px}
.card .ct{font-size:15px;font-weight:700;margin:0 0 15px;letter-spacing:-.01em}
.fees{display:flex;gap:10px;margin-bottom:15px}
.fee{flex:1;border-radius:14px;padding:14px;text-align:center;background:#f3ede1}
.fee .fl{font-size:11.5px;color:var(--muted);font-weight:500}
.fee .fa{font-size:20px;font-weight:800;margin-top:3px;letter-spacing:-.02em;color:var(--ink)}
.row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.row .k{color:var(--muted);flex:none}
.row .v{text-align:right;font-weight:500}

/* ---------- 폼 ---------- */
.lead{font-size:13.5px;color:var(--muted);line-height:1.6;margin:2px 4px 16px}
.lead b{color:var(--ink)}
.field{margin-bottom:15px}
.field:last-child{margin-bottom:0}
label{display:block;font-size:12.5px;font-weight:700;color:#5f5647;margin-bottom:7px}
label .req{color:#d1568f}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:#fff;
  font-family:inherit;font-size:14px;color:var(--ink);transition:border-color .12s, box-shadow .12s}
input::placeholder,textarea::placeholder{color:#b6ab99}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green-ink);box-shadow:0 0 0 3px rgba(14,158,107,.14)}
input.err,select.err{border-color:#d1568f !important}
textarea{resize:vertical;min-height:88px;line-height:1.5}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23857b6c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.two{grid-template-columns:1fr}}
.hint{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.formerr{display:none;background:#fdeceb;border:1px solid #f2c4c0;color:#a33025;border-radius:11px;
  padding:11px 14px;font-size:13px;margin-bottom:14px;line-height:1.5}
.formerr.show{display:block}

.btn{display:block;width:100%;text-align:center;padding:15px;border:none;border-radius:13px;cursor:pointer;
  font-family:inherit;font-size:15.5px;font-weight:700;transition:background .12s, transform .1s}
.btn:active{transform:scale(.995)}
.btn.primary{background:var(--green-ink);color:#fff}
.btn.primary:hover{background:var(--green-deep)}
.btn.primary:disabled{background:#bcd8cb;cursor:wait}
.btn.navy{background:var(--navy);color:#fff}
.btn.navy:hover{background:#1d3573}
.btn.ghost{background:#eceff7;color:var(--navy-ref)}

/* ---------- 결과/성공 박스 ---------- */
.result{display:none;margin-top:14px}
.result.show{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.thanks{background:#e9f6ef;border:1px solid rgba(14,158,107,.4);border-radius:var(--radius);padding:22px;text-align:center}
.thanks .okic{width:46px;height:46px;border-radius:50%;background:var(--green-ink);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.thanks h2{font-size:17px;font-weight:800;margin:0 0 6px;color:#0a6f4b}
.thanks p{font-size:13px;color:#4f7d6a;margin:0 0 16px;line-height:1.65}
.bank{background:#fff;border:1px dashed rgba(14,158,107,.5);border-radius:13px;padding:16px;text-align:left}
.bank .row{border-top:none;padding:6px 0;font-size:13.5px}
.bank .k{font-weight:600}
.bank .v{font-weight:700}
.bank .amt{color:var(--green-deep)}
.bank .vcopy{display:inline-flex;align-items:center;gap:12px}
.vcopy{display:inline-flex;align-items:center;gap:12px}
.copybtn{border:1px solid rgba(14,158,107,.5);background:#fff;color:var(--green-deep);font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;cursor:pointer;font-family:inherit;flex:none}
.copybtn:hover{background:#e9f6ef}
.copybtn.copied{background:var(--green-deep);color:#fff;border-color:var(--green-deep)}
.homeLink{display:inline-block;margin-top:16px;font-size:13.5px;color:var(--navy-ref);font-weight:600}

/* ---------- 공지 리스트 ---------- */
.notice{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px;margin-bottom:10px}
.notice .nt{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700}
.notice .pin{font-size:10px;font-weight:800;color:var(--pink-ink);background:var(--pink-soft);padding:2px 8px;border-radius:999px;flex:none}
.notice .nd{font-size:11.5px;color:var(--muted);margin-top:3px}
.notice .nb{font-size:13px;color:#5f5647;margin-top:8px;line-height:1.65;white-space:pre-line}

/* ---------- 마이페이지 ---------- */
.me{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:10px}
.me .av{flex:none;width:50px;height:50px;border-radius:50%;background:#e9edf7;color:var(--navy-ref);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px}
.me .nm{font-size:16.5px;font-weight:800}
.me .af{font-size:12.5px;color:var(--muted);margin-top:2px}
.pill{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px}
.pill.ok{background:#e6f4ec;color:var(--green-deep)}
.pill.wait{background:#f6eeda;color:#a9822f}

/* ---------- 운영진 링크 ---------- */
.staff{text-align:center;margin-top:20px}
.staff a{font-size:12px;color:var(--muted);border-bottom:1px dotted var(--line);padding-bottom:1px}
.staff a:hover{color:var(--navy-ref)}

/* ---------- 푸터 ---------- */
.foot{text-align:center;font-size:12px;color:#a99e8b;margin-top:22px;line-height:1.7}
.foot b{color:var(--navy-ref);font-weight:700}
.foot .sg{color:var(--sogang)}
.demoTag{position:fixed;bottom:12px;right:12px;background:#3a2c00;color:#ffcf3f;font-size:10.5px;font-weight:700;
  padding:5px 11px;border-radius:999px;opacity:.85;z-index:60}

/* ---------- 데스크톱 확대: 브라우저 줌 2단(≈125%)과 동일 · 모바일 그대로 ---------- */
@media (min-width: 860px){
  body{ zoom: 1.25; }
}