/* ── 공용 디자인 토큰 (전 페이지 공유) ── */
:root{
  --bg:#f3f5f9; --card:#fff; --ink:#16202e; --muted:#5a6573; --faint:#8b95a3;
  --line:#e5e9f0; --line2:#eef1f6;
  --brand:#13315c;                 /* 딥 네이비 — 브랜드/제목 */
  --accent:#2563eb; --accent-soft:#e9f0ff;   /* 인터랙션 블루 */
  --gold:#b1842f; --gold-bg:#fbf4df; --gold-line:#e8d59a;  /* 프리미엄 */
  --chip:#eef2f8; --amber-bg:#fff4e0; --amber:#b5760a; --red-bg:#fdeaea; --red:#c0392b;
  --ok-bg:#eef7ee; --ok:#2e7d32;
  --shadow:0 1px 2px rgba(20,30,50,.04),0 4px 14px rgba(20,30,50,.05);
}
*{box-sizing:border-box}
body{font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,
  "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  letter-spacing:-.01em; color:var(--ink);}

/* ── 상단 네비바 ── */
.appbar{background:#fff; border-bottom:1px solid var(--line)}
.appbar .in{max-width:1180px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:14px}
.appbar .brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px;
  letter-spacing:-.02em; color:var(--brand); white-space:nowrap}
.appbar .brand .mk{width:26px; height:26px; flex-shrink:0}
.appbar .brand small{font-weight:600; font-size:11px; color:var(--faint); margin-left:1px}
.appbar nav{display:flex; gap:2px; flex-wrap:wrap}
.appbar nav a{font-size:14px; font-weight:600; color:var(--muted); padding:8px 12px; border-radius:9px; transition:.12s}
.appbar nav a:hover{background:var(--chip); color:var(--ink)}
.appbar nav a.on{color:var(--accent); background:var(--accent-soft)}
.appbar .sp{flex:1}
.appbar .auth{display:flex; align-items:center; gap:8px; white-space:nowrap}
.appbar .auth .who{font-size:13px; color:var(--muted)}
.appbar .auth .who b{color:var(--ink)}

/* ── 버튼 (공용) ── */
.ubtn{font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ink); transition:all .12s;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none}
.ubtn:hover{border-color:#cfd8e6; background:#fafbfd}
.ubtn.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.ubtn.primary:hover{background:#1d49ba}
.ubtn.kakao{background:#FEE500; border-color:#FEE500; color:#191600}
.ubtn.kakao:hover{filter:brightness(.97)}
.ubtn.sm{padding:6px 11px; font-size:12.5px}
.ubtn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
.ubtn:disabled{opacity:.5; cursor:default}

/* ── 모달 ── */
.modal-bg{position:fixed; inset:0; background:rgba(20,28,44,.45); display:flex;
  align-items:flex-start; justify-content:center; padding:40px 16px; z-index:1000; overflow-y:auto}
.modal{background:#fff; border-radius:16px; width:100%; max-width:480px; box-shadow:0 20px 60px rgba(20,30,50,.25);
  animation:pop .14s ease}
@keyframes pop{from{transform:translateY(8px); opacity:.6}to{transform:none; opacity:1}}
.modal .mh{display:flex; align-items:center; justify-content:space-between; padding:18px 20px 6px}
.modal .mh h3{margin:0; font-size:18px; font-weight:800; letter-spacing:-.02em}
.modal .mh .x{border:none; background:none; font-size:22px; color:var(--faint); cursor:pointer; line-height:1; padding:2px 6px}
.modal .mb{padding:8px 20px 20px}
.modal .desc{font-size:13.5px; color:var(--muted); margin:2px 0 14px; line-height:1.6}

/* ── 폼 ── */
.field{margin-bottom:13px}
.field label{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:5px}
.field label .req{color:var(--red); margin-left:2px}
.field input[type=text],.field input[type=tel],.field input[type=email],.field textarea,.field select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:15px;
  color:var(--ink); outline:none; font-family:inherit; background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{min-height:96px; resize:vertical}
.field .help{font-size:12px; color:var(--faint); margin-top:4px}
.checkrow{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--muted)}
.checkrow input{margin-top:2px; accent-color:var(--accent); width:16px; height:16px; flex-shrink:0}
.checkrow a{color:var(--accent)}
.steps{display:flex; gap:8px; margin-bottom:12px}
.steps .st{font-size:12px; font-weight:700; color:var(--faint); padding:6px 11px; border-radius:8px; background:var(--chip)}
.steps .st.on{color:#fff; background:var(--accent)}
.row2{display:flex; gap:10px; align-items:flex-end}
.row2 .field{flex:1}
@media (max-width:480px){ .row2{flex-direction:column; gap:0; align-items:stretch} }
.fieldchips{display:flex; flex-wrap:wrap; gap:6px}
.fieldchips label{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  padding:6px 10px; border:1px solid var(--line); border-radius:999px; cursor:pointer; color:var(--muted)}
.fieldchips input{display:none}
.fieldchips input:checked + span{}
.fieldchips label:has(input:checked){background:var(--accent); color:#fff; border-color:var(--accent)}

/* ── 프리미엄 카드 본문(디렉토리) ── */
.premtag{font-size:13px; font-weight:700; color:var(--gold); margin:2px 0 8px; letter-spacing:-.01em}
.premintro{font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:9px}
.premsvc{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:9px}
.premsvc span{font-size:11.5px; font-weight:600; color:#7a5d1c; background:var(--gold-bg);
  border:1px solid var(--gold-line); padding:3px 9px; border-radius:7px}
.premstats{display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:12px; color:var(--muted); margin-bottom:2px}
.premstats b{color:var(--brand); font-weight:800; margin-right:3px}
.premstats i{color:var(--line); margin:0 7px; font-style:normal}
.premstats i::before{content:"|"}

/* ── 프리미엄 상세 프로필 모달 ── */
.profile .pphead{display:flex; gap:14px; align-items:center; margin:2px 0 4px}
.profile .pplogo{width:54px; height:54px; object-fit:contain; flex-shrink:0}
.profile .ppname{font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--brand)}
.profile .pptag{font-size:13px; font-weight:700; color:var(--gold); margin-top:3px}
.profile .ppreg{font-size:12.5px; color:var(--faint); margin-top:2px}
.profile .ppintro{font-size:14px; line-height:1.7; color:var(--ink); margin:14px 0 4px}
.profile .ppbadges{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.profile .ppbadge{font-size:12px; font-weight:700; color:var(--ok); background:var(--ok-bg);
  border:1px solid #cfe6cf; padding:4px 10px; border-radius:8px}
.profile .ppstats{display:flex; gap:10px; margin:14px 0; flex-wrap:wrap}
.profile .ppstats > div{flex:1; min-width:90px; background:var(--chip); border-radius:11px; padding:11px 12px; text-align:center}
.profile .ppstats b{display:block; font-size:18px; font-weight:800; color:var(--brand)}
.profile .ppstats span{font-size:12px; color:var(--muted)}
.profile .ppsec{margin-top:16px}
.profile .ppsec h4{font-size:13px; font-weight:800; color:var(--ink); margin:0 0 8px}
.profile .ppchips{display:flex; flex-wrap:wrap; gap:6px}
.profile .ppchips span{font-size:12.5px; font-weight:600; color:var(--accent); background:var(--accent-soft);
  padding:5px 11px; border-radius:8px}
.profile .pprow{font-size:14px; color:var(--ink); margin:6px 0}
.profile .pprow a{color:var(--ink)}
.profile .pprow a:hover{color:var(--accent)}
.profile .ppacts{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.profile .ppacts .ubtn{flex:1; justify-content:center; min-width:96px}

/* ── 토스트 ── */
.toast-wrap{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:2000;
  display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{background:#1f2937; color:#fff; font-size:14px; font-weight:600; padding:11px 18px; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.25); animation:pop .14s ease}
.toast.ok{background:#15803d} .toast.err{background:#b42318}

/* ── 별점 ── */
.stars{display:inline-flex; gap:2px; font-size:16px; color:#e3b341}
.stars .e{color:#d6dbe3}
.starpick span{cursor:pointer; font-size:24px; color:#d6dbe3}
.starpick span.on{color:#e3b341}

@media (max-width:560px){
  .appbar .in{padding:10px 14px; gap:10px; flex-wrap:wrap}
  .appbar .brand{font-size:15px}
  .appbar nav a{padding:6px 9px; font-size:13px}
  .modal-bg{padding:20px 12px}
}