@charset "utf-8";
/* ════════════════════════════════════════════════════════════════
   고메디 공통 스타일 — index · hosp · phrm · map · member · mypage
   색·머리·검색창·로그인 단추·푸터처럼 여러 화면이 함께 쓰는 것만 둔다.
   화면 하나에만 있는 것은 그 화면의 <style> 에 둔다.
   고친 뒤에는 각 화면의 ?v= 숫자를 올린다. (안 올리면 옛 파일이 남는다)
   ════════════════════════════════════════════════════════════════ */
:root{
  --bg:#F3F6FA;      --surface:#fff;
  --ink:#10213A;     --ink2:#34465E;   --muted:#66768A;   --faint:#98A6B7;
  --line:#DCE3EC;    --line2:#EDF1F6;
  /* 브랜드(고메디 파랑) : 누르는 것, 고른 것 */
  --accent:#1F5ED6;  --accent2:#3A78E6; --soft:#E8F0FD;
  /* 공공 자료(청록) : 심평원·공단 자료 구역. 브랜드색과 섞지 않는다 */
  --pub:#0B6B70;     --pub2:#0E8A90;    --pub-soft:#E2F1F1;
  --warn:#B4531E;    --warn-soft:#FCF1E9;
  --green:#2F6642;   --green-soft:#E8F1EA;
  --emy:#9B3838;
  --hdr-bg:#10264A;  /* 상단 머리 바탕 — 짙은 남색 */
  --r:10px;          --hdr:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',sans-serif;
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
a{color:var(--accent)}

/* 상단 */
header{position:sticky;top:0;z-index:30;background:var(--hdr-bg);color:#fff;
  padding:0 22px;height:var(--hdr);display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.06)}
/* ── 브랜드 : 「아플 땐」 + 「고메디」 로 슬로건이 곧 로고가 된다 ── */
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;
  white-space:nowrap;border-radius:8px;padding:4px 6px;margin-left:-6px;transition:background .12s}
.brand:hover{background:rgba(255,255,255,.07)}
.brand .mk{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:8px;background:var(--accent2);flex:none}
.brand .mk svg{width:16px;height:16px;color:#fff}
.brand .tx{display:flex;align-items:baseline;gap:5px;line-height:1}
.brand .tx small{font-size:13.5px;font-weight:500;color:#9FB2CF;letter-spacing:-.02em}
.brand .tx b{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.04em}
@media(max-width:480px){.brand .tx small{display:none}}
/* 상단 탭 — 눌러야 할 것으로 보이게 판을 깐다 */
.navlink{margin-left:22px;display:flex;gap:2px;background:rgba(255,255,255,.08);
  border-radius:99px;padding:4px}
.navlink a{display:flex;align-items:center;gap:6px;padding:7px 17px;border-radius:99px;
  color:#AFC0DC;text-decoration:none;font-size:13.5px;font-weight:600;
  transition:background .12s,color .12s;white-space:nowrap}
.navlink a:hover{color:#fff;background:rgba(255,255,255,.08)}
.navlink a.on{background:#fff;color:var(--hdr-bg);font-weight:700}
.navlink a svg{width:15px;height:15px;flex:none}
@media(max-width:760px){
  .navlink{margin-left:10px;padding:3px}
  .navlink a{padding:6px 11px;font-size:12.5px}
  .navlink a svg{display:none}
}
header .count{margin-left:auto;margin-right:14px;font-size:12.5px;color:#9FB2CF;white-space:nowrap}
header .count b{font-size:20px;font-weight:700;color:#fff;margin-right:3px}
/* 건수가 오른쪽 로그인 단추 곁에 붙게 한다 */
header .count + .acct{margin-left:0}
/* 좁은 화면 : 건수는 결과 위에도 나오므로 상단에서는 뺀다 */
@media(max-width:760px){header{padding:0 12px}header .count{display:none}}
@media(max-width:480px){
  .brand .mk{display:none}
  .navlink{margin-left:6px}
  .navlink a{padding:6px 9px}
  .acct a.p{display:none}
}

/* ── 첫 화면 검색 : 아픈 사람이 들어와 가장 먼저 보는 곳 ── */
.hero{background:var(--surface);border-bottom:1px solid var(--line)}
.heroin{max-width:1560px;margin:0 auto;padding:30px 22px 22px}
.hero h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-.035em;line-height:1.25;color:var(--ink)}
.hero .sub{margin:6px 0 18px;font-size:14px;color:var(--muted)}
.hsearch{display:flex;align-items:center;gap:10px;max-width:760px;height:56px;
  padding:0 6px 0 18px;border:2px solid var(--accent);border-radius:14px;background:#fff}
.hsearch:focus-within{box-shadow:0 0 0 4px rgba(31,94,214,.16)}
.hsearch svg{width:22px;height:22px;color:var(--accent);flex:none}
.hsearch input{flex:1;min-width:0;width:auto;border:0;padding:0;height:100%;
  font-size:16px;background:transparent}
.hsearch input:focus{outline:none}
.hgo{flex:none;height:44px;padding:0 26px;border:0;border-radius:10px;background:var(--accent);
  color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.hgo:hover{background:var(--accent2)}
.hgo:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:760px){
  .heroin{padding:18px 12px 14px}
  .hero h1{font-size:21px}
  .hero .sub{display:none}
  .hsearch{height:50px;margin-top:12px;padding-left:12px}
  .hgo{height:40px;padding:0 18px}
}

/* 로그인 영역 */
.acct{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap}
.acct a{color:#C7D3E8;text-decoration:none;font-size:13px;padding:7px 14px;
  border-radius:99px;border:1px solid rgba(255,255,255,.22)}
.acct a:hover{color:#fff;border-color:#fff}
.acct a.p{background:var(--accent2);color:#fff;border-color:var(--accent2);font-weight:700}
.acct a.p:hover{background:#5A8FF0;border-color:#5A8FF0;color:#fff}
.acct .who{font-size:12.5px;color:#9FB2CF}
.acct .who b{color:#fff;font-weight:700}
@media(max-width:760px){.acct .who{display:none}.acct a{padding:6px 10px;font-size:12px}}

.pagefoot{max-width:1560px;margin:26px auto 0;padding:18px 22px 30px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);line-height:1.8}
.pagefoot b{color:var(--ink2);font-weight:600}
.pagefoot .upd{color:var(--faint)}
@media(max-width:1000px){.pagefoot{padding:16px 12px 24px}}