/* =====================
   1) Design tokens / base
   ===================== */
html { -webkit-text-size-adjust: 100%; }
a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); }
a, a:link, a:visited {  text-decoration: none; }
button { -webkit-appearance: none; appearance: none; }  
:root{
  --bg:#fff; --text:#2a2a2a; --muted:#6b7280; --primary:#CE8892; --secondary:#8e9594;
  --border:#e6e7ea; --card:#fff;
  --radius:16px; --shadow:0 6px 24px rgba(0,0,0,.06);
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.25rem; --s5:1.5rem; --s6:2rem;
  --h1:2rem; --h2:1.25rem; --h3:1.125rem; --body:0.95rem; --small:0.8125rem;
}
html[data-theme="dark"]{
  --bg:#0f1115; --text:#f3f4f6; --muted:#a1a1aa; --border:#1f2937; --card:#151821;
  --shadow:0 6px 24px rgba(0,0,0,.5);
}
*{ box-sizing:border-box; }
html,body{ overflow-x:hidden; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:'Noto Sans',sans-serif; font-size:var(--body); line-height:1.5; }

/* =====================
   2) Container (안전영역 포함)
   ===================== */
.container{
  width:min(1200px,92vw);
  margin:0 auto;
  padding-left:max(12px, env(safe-area-inset-left, 0));
  padding-right:max(12px, env(safe-area-inset-right, 0));
}
@supports(padding:max(0px)){
  .container{
    padding-left:max(0px, env(safe-area-inset-left));
    padding-right:max(0px, env(safe-area-inset-right));
  }
}

/* =====================
   3) Header (brand / search / quick)
   ===================== */
.site-header{
  display:grid;
  grid-template-columns:240px 1fr 240px;   /* PC 기본 */
  grid-template-areas:"brand search quick";
  align-items:center;
  padding:16px 0;                          /* 얕은 상하 여백 */
}
.brand{ grid-area:brand; display:flex; align-items:center; gap:.5rem; }
.brand picture{ display:flex; align-items:center; }
.brand .logo{ height:100%; width:auto; max-height:none; }

.search{
  grid-area:search; justify-self:center; position:relative;
  width:100%; max-width:47.5rem; height:2.625rem;
  display:flex; align-items:center; background:var(--card);
  border:3px solid var(--primary); border-radius:999px;
  padding:0 16px;
  margin-inline: auto;
  box-sizing: border-box;
  width: min(48rem, 92vw);
}
.search .search-icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  pointer-events:none; display:flex; align-items:center;
}
.search .search-icon img{ width:18px; height:18px; object-fit:contain; display:block; }
.search input{
  flex:1; height:100%; border:0; outline:0; background:transparent;
  color:var(--text); font-size:.95rem; padding:0 0 0 1.5rem;
}
.search input::placeholder{ color:var(--primary); opacity: 1;}
.search input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; background-color:var(--primary);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 6 L14 14 M14 6 L6 14' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 6 L14 14 M14 6 L6 14' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}

.quick{ grid-area:quick; justify-self:end; display:flex; gap:.75rem; align-items:center; }
.btn{ padding:.5rem .9rem; border-radius:999px; border:1px solid var(--border); background:var(--card); cursor:pointer; }
.btn.ghost{ background:transparent; }
.link{ text-decoration:none; color:var(--text); }

/* --- Header responsive --- */
@media (max-width:1024px){
  .site-header{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"brand quick" "search search";
    padding:20px 0;
  }
  .search{ width: 80%; height:40px; border-width:3px;}
}
@media (max-width:768px){
  .search{ height:38px;}
  .search .search-icon img{ width:16px; height:16px; }
  .search input{ font-size:.9rem; padding-left:26px; }
  .site-header .quick .btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:32px; padding:6px 10px; border:1px solid #e6e6e6; border-radius:999px;
    font-size:12px; line-height:1; background:#fff; white-space:nowrap;
  }
}
@media (max-width:480px){
  .site-header{
    grid-template-columns:1fr auto;
    grid-template-areas:"brand quick" "search search";
    padding:16px 0 14px;
  }
  .brand .logo{ max-height:18px !important; height:auto; width:auto; }
  .search{ height:36px; border-width:2px; padding:0 14px;}
  .search .search-icon{ left:12px; }
  .search input{ font-size:.9rem; padding-left:24px; }
  .quick{ gap:.5rem; }
  .quick .btn{ display:none; }
}
/* 데스크톱 보강 */
@media (min-width:1025px){
  .site-header{ grid-template-columns:1fr 2fr 1fr; }
  .site-header .brand .logo{ max-height:56px; }
  .site-header .search{
    max-width:700px; height:46px; border-width:2px; padding:0 18px 0 42px;
  }
  .site-header .search .search-icon{ left:16px; }
  .site-header .search .search-icon img{ width:20px; height:20px; }
  .site-header .search input{ line-height:46px; padding:0; font-size:16px; }
}
@media (min-width:481px){ .site-header .search{ border-width:3px !important; } }
@media (max-width:480px){ .site-header .search{ border-width:2px !important; } }
@media (min-width: 480px) and (max-width: 1024px){
  .site-header .brand { min-width: 0; }
  .site-header .brand picture { display:flex; align-items:center; }

  /* 핵심: 높이 100% 제거 + 자동, 가로 자동, 최대높이만 제한 */
  .site-header .brand .logo{
    height: auto !important;
    width:  auto !important;
    max-height: 24px;           /* 필요하면 32~44px 사이에서 조절 */
    object-fit: contain;
    display: block;
  }
}

/* =====================
   4) Hero
   ===================== */
.hero{ margin-bottom:3rem; }
@media (max-width:768px){ .hero{ margin-bottom:2rem; } }
@media (max-width:480px){ .hero{ margin-bottom:1.5rem; } }
/* =====================
   5) Icons (8) + click animation
   ===================== */
:root{--icon-text: .875rem; /* 현재 .icon-btn span 과 동일값 */}
.icons{ padding:3rem 6rem 1rem; }
.icon-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(8,1fr); gap:1rem; }
.icon-btn{ width:100%; aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; background:none; border:none; padding:0; text-decoration:none; color:inherit; position:relative; }
.icon-btn img{ width:80%; height:auto; object-fit:contain; border-radius:50%; transition:transform .18s ease; display:block; }
.icon-btn span{ margin-top:.5rem; font-weight:600; font-size: var(--icon-text); text-align:center; }

/* pop + pulse */
.icon-grid .icon-btn.pop img{ animation:pk-pop .18s ease-out; }
@keyframes pk-pop{ 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }
.icon-grid .icon-btn.pop::after{
  content:""; position:absolute; left:var(--cx,50%); top:var(--cy,50%);
  width:var(--ico,56px); height:var(--ico,56px); margin-left:calc(var(--ico)/-2); margin-top:calc(var(--ico)/-2);
  border:2px solid var(--primary); border-radius:50%; opacity:.45; transform:scale(1.02); pointer-events:none;
  animation:pk-pulse-1 .24s cubic-bezier(.22,.61,.36,1) forwards;
}
.icon-grid .icon-btn.pop::before{
  content:""; position:absolute; left:var(--cx,50%); top:var(--cy,50%);
  width:var(--ico,56px); height:var(--ico,56px); margin-left:calc(var(--ico)/-2); margin-top:calc(var(--ico)/-2);
  border:1px solid rgba(206,136,146,.55); border-radius:50%; opacity:.35; transform:scale(1.02); pointer-events:none;
  animation:pk-pulse-2 .3s cubic-bezier(.22,.61,.36,1) .02s forwards;
}
@keyframes pk-pulse-1{ to{ transform:scale(1.14); opacity:0; } }
@keyframes pk-pulse-2{ to{ transform:scale(1.18); opacity:0; } }

.icon-grid .icon-btn.is-active img{ box-shadow:0 0 0 3px var(--primary); border-radius:50%; }
.icon-grid .icon-btn.is-active span{ color:var(--primary); font-weight:800; }

/* responsive */
@media (max-width:1024px){ .icons{ padding:3rem 2rem 1rem; } }
@media (max-width:768px){
  .icons{ padding:2rem 1.5rem 1rem; }
  .icon-grid{ grid-template-columns:repeat(4,1fr); }
  .icon-btn span{ font-size:.8rem; }
}
@media (max-width:480px){ .icons{ padding:1.5rem 1rem 1rem; } }
@media (max-width:360px){ .icon-grid{ grid-template-columns:repeat(4,1fr); } }

/* =====================
   6) Subbar (중/소분류)
   ===================== */

.pk-subbar{
  background:#fff;
  padding:0 6rem;
  overflow:hidden; max-height:0; opacity:0; transform:translateY(-6px);
  transition:max-height .28s ease, opacity .22s ease, transform .28s ease, padding-top .28s ease, padding-bottom .28s ease;
}
.pk-subbar[aria-hidden="false"]{ max-height:360px; opacity:1; transform:translateY(0); margin-top:1rem; padding:1rem 0.5rem 1rem; }
.pk-subbar .row{ padding-top:6px; }
.pk-midtabs{
  display:flex;
  flex-wrap:wrap;           /* 한 줄 넘치면 다음 줄로 */
  justify-content:center;   /* 덩어리 자체를 가운데 정렬 */
  gap:12px;                 /* 아이템 간격(지금처럼 일정) */
  overflow-x:visible;       /* 스크롤 대신 중앙배치 */
  padding-bottom:1rem;
  /* border-bottom:1px solid #f0f0f0; */
}
.pk-midtabs button{
  color: inherit; border:1px solid #e5e7eb; border-radius:12px; padding: clamp(6px, 1.2vw, 10px) clamp(10px, 2.4vw, 16px); font-size: clamp(.75rem, 2.6vw, var(--icon-text)); line-height: 1.2; font-weight:600; background:#fff; cursor:pointer; white-space:nowrap;
}
.pk-midtabs button.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

.pk-chips{
  display:flex;
  flex-wrap:wrap;           /* 한 줄 넘치면 다음 줄 */
  justify-content:center;   /* 덩어리 가운데 */
  gap:10px;                 /* 칩 간격 일정 */
  padding-top:14px;
}
.pk-chips button{
  color: inherit; border:1px solid #e5e7eb; border-radius:999px; padding: clamp(5px, 1.0vw, 7px) clamp(9px, 2.0vw, 13px); font-size: clamp(.6875rem, 2.2vw, calc(var(--icon-text) - .0625rem)); line-height: 1.2; background:#fff; cursor:pointer; white-space:nowrap;
}
.pk-chip{ padding:7px 14px; }
.pk-chip::after{ content:"›"; display:inline-block; margin-left:8px; color:#9ca3af; font-size:16px; line-height:1; transform:translateY(.5px); }
.pk-chip:hover::after{ color:#6b7280; }

@media (max-width:1024px){ .pk-subbar{ padding-left:2rem; padding-right:2rem; } }
@media (max-width:768px){  .pk-subbar{ padding-left:1.5rem; padding-right:1.5rem; } }
@media (max-width:480px){  .pk-subbar{ padding-left:1rem;  padding-right:1rem; } }

/* =====================
   7) Generic sections
   ===================== */
.section{ padding:0 0 3rem; }
.section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.section-head h3{ margin:0; font-size:1rem; font-weight:700; }
.section-head .more{ text-decoration:none; color:var(--muted); font-size:var(--small); }/* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* =====================
   8) Doctors
   ===================== */
.doctor-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:1rem; } */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */
.doctor-card{ display:flex; flex-direction:column; height:auto; overflow:visible; padding:1rem; border:1px solid #eee; border-radius:12px; text-align:center; background:#fff; }/* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): .doctor-card img{ margin:0 auto; display:block; width:clamp(80px,18vw,120px); aspect-ratio:1/1; object-fit:cover; border-radius:50%; } */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */
.doc-name{ margin:.5rem 0 0; font-size:1rem; font-weight:700; }
.doc-title{ margin:.1rem 0; color:var(--muted); font-weight:600; font-size:.95rem; }
.doc-meta{ list-style:none; margin:.25rem 0 0; padding:0; color:var(--muted); font-size:.85rem; display:grid; gap:.15rem; line-height:1.2; }
.doc-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0; justify-content:center; padding:0 3.5rem; }
.doc-tags span{ display:inline-block; padding:.1rem .2rem; font-size:.75rem; font-weight:500; color:var(--primary); border:1px solid var(--border); white-space:nowrap; }
.doc-footer{ display:flex; justify-content:flex-end; margin-top:auto; }
.doc-arrow{ right:1rem; bottom:1rem; font-size:1.5rem; color:var(--primary); text-decoration:none; transition:transform .2s ease; }
.doc-arrow:hover{ transform:translateX(2px); }

@media (min-width:1200px){ .doctor-card img{ width:140px; } }
@media (max-width:768px){ .doctor-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:480px){
  .doctor-grid{ grid-template-columns:1fr; }/* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): /* removed (doctors): .doctor-card img{ width:clamp(80px,26vw,110px); } */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */ */
}

/* =====================
   9) Footer
   ===================== */
.site-footer{ margin:2rem 0 calc(2rem + 16px); border-top:1px solid var(--border); }
.foot-top{ display:flex; justify-content:space-between; align-items:center; padding:1.4rem 0 .75rem 0; flex-wrap:wrap; row-gap:.5rem; }
.social{ list-style:none; margin:0; padding:0; display:flex; gap:.75rem; }
.social a{ display:grid; place-content:center; width:32px; height:32px; border-radius:50%; background:var(--card); border:2px solid #16a34a; color:#16a34a; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.foot-body{ font-size:clamp(12px, 3.2vw, 14px); line-height:1.5; }
.foot-body p{ margin:.4rem 0; } .foot-body p:first-of-type{ margin:0 0 .4rem 0; }
.foot-body a{ color:#2563eb; text-decoration:none; font-weight:700; overflow-wrap:anywhere; word-break:break-word; }
.site-footer .logo.small img{ max-width:140px; height:auto; }
@media (max-width:768px){ .site-footer .logo.small img{ max-width:130px; } }
@media (max-width:480px){ .site-footer .logo.small img{ max-width:120px; } }
.sep{ display:inline-block; margin:0 .25rem; color:var(--muted); }

/* =====================
   10) Optional: tabbar spacing (쓰면 유지)
   ===================== */
:root{ --tabbar-h:64px; }
body{ padding-bottom:calc(var(--tabbar-h) + 24px); }
@supports(padding:max(0px)){
  body{ padding-bottom:max(calc(var(--tabbar-h) + 24px), env(safe-area-inset-bottom)); }
}

/* hero collapsible margin */
.hero{ transition: margin-bottom .25s ease; }
.hero.is-collapsed,
.hero[hidden],
.hero[aria-hidden="true"]{ margin-bottom:0 !important; }
/* section-head (sub hero) too */
.section-head.is-collapsed{ margin-bottom:0 !important; }

/* banner open/close = margin control */
.hero{transition: margin-bottom .25s ease; }
.hero.is-collapsed,
.hero[hidden],
.hero[aria-hidden="true"]{ margin-bottom:0 !important; }
/* v104: icons padding shrink when mids-only */
.mid-only-icons .icons{ padding-bottom: 0rem !important; }