/* === styles.css (v0.83) === */
html,body{font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*{font-family:inherit}*,*::before,*::after{box-sizing:border-box}

:root{ --pk-primary:#31527E; --pk-accent:#CE8892; --pk-tint: rgba(49,82,126,.10); --sr-max:1100px; --search-max:820px }
.mode-beauty{ --pk-primary:#CE8892; --pk-accent:#31527E; --pk-tint: #FFFAFA }
.mode-community{ --pk-primary:#31527E; --pk-accent:#CE8892; --pk-tint: #FAFBFE }

.pk-page #pk-main-slot{
  width:100% !important;
  min-width:100% !important;
  display:block !important;
}
.pk-page .pk-results{
  width:100% !important;
}
/* 2025-12-04: 검색 섹션이 0 크기로 접히는 것 방지 */
#pk-main-slot,
.pk-results{
  min-height:120px;
}

.fadeInUp{animation:fadeInUp .28s ease both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.soft-card{border-radius:16px; box-shadow:0 4px 16px rgba(10,22,50,.06)}
.soft-card.interactive{cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.soft-card.interactive:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,23,42,.10)}
.ring-1px{box-shadow:0 0 0 1px rgba(15,23,42,.06) inset}

/* bottom padding for page */
.pk-page{padding-bottom:64px}
@media (max-width:639px){.pk-page{padding-bottom:56px}}

.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e2e8f0;border-radius:9999px;background:#fff;font-size:12px;cursor:pointer}
.btn:hover{border-color:var(--pk-primary);color:var(--pk-primary)}
.menu-grid{
  display: flex;
      flex-wrap: wrap;
  gap: 14px;
  padding: 4px 2px 6px 2px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 모바일: 2컬럼 */
      justify-content: center;
}
.menu-grid > * {
  flex: 0 0 calc((100% - 14px) / 2);   /* 2개씩 */
  max-width: calc((100% - 14px) / 2);
}

/* 2025-12-04: 검색 결과 컨테이너 폭 보정 */
#pk-main-slot{
  width:100%;
  min-width:100%;
  display:block;
}
.pk-results{
  width:100%;
}

@media (min-width: 768px) {
  /* 데스크탑: cols-5, cols-3 둘 다 3개씩 + 마지막 줄 가운데 정렬 */
  .menu-grid.cols-5,
  .menu-grid.cols-3 {
    display: flex;        /* grid → flex 로 덮어쓰기 */
    flex-wrap: wrap;
    gap: 14px;            /* 기존 gap 유지 */
    justify-content: center;
  }

  .menu-grid.cols-5 > *,
  .menu-grid.cols-3 > * {
    /* 한 줄에 3개 들어가도록 카드 폭 계산 */
    flex: 0 0 calc((100% - 2 * 14px) / 3);
    max-width: calc((100% - 2 * 14px) / 3);
  }
}


.menucard{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--pk-tint);border:1px solid rgba(15,23,42,.06);box-shadow:0 2px 8px rgba(15,23,42,.06)}
.menu-iconwrap{width:42px;height:42px;border-radius:9999px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--pk-primary);box-shadow:0 0 0 1px rgba(15,23,42,.08) inset}
.menu-iconwrap svg{width:20px;height:20px}
.menu-iconwrap .menu-icon-slot{width:20px;height:20px;display:block;background-size:contain;background-position:center;background-repeat:no-repeat}

/* search row & search */
.sr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
.sr-center{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:20px;width:100%}
.pk-search{position:relative;width:100%}
.pk-search input{width:100%;height:3rem;border:2px solid var(--pk-primary);border-radius:9999px;background:#fff;padding:0 52px 0 42px;font-size:15px;outline:none}
.pk-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--pk-primary);display:flex;align-items:center;justify-content:center;line-height:0}
.pk-search input:focus,.pk-search input:active,.pk-search input:hover{border-color:var(--pk-primary)!important;box-shadow:none}
.pk-search input::placeholder{color:#9AA3B2}
.pk-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; height:0; width:0; margin:0;}
.pk-search input::-ms-clear{ display:none; width:0; height:0;}
.pk-search input::-webkit-search-decoration{ -webkit-appearance:none;}
.pk-search .clear-btn{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:auto;height:auto;padding:0;background:transparent;border:0;color:var(--pk-primary);opacity:0;pointer-events:none;transition:opacity .12s ease}
.pk-search.has-value .clear-btn{opacity:1;pointer-events:auto}
.pk-search .clear-btn svg{width:14px;height:14px;stroke-width:3}

/* segmented toggle */
.seg3{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #e2e8f0;border-radius:9999px;padding:4px;background:#fff;overflow:hidden;min-width:160px;height:52px}
.seg3-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 4px);border-radius:9999px;background:var(--pk-primary);box-shadow:inset 0 0 0 2px var(--pk-primary);transition:transform .16s ease}
.seg3-btn{position:relative;z-index:1;border:0;background:transparent;padding:0 12px;border-radius:9999px;font-size:14px; font-weight: 500;display:flex;align-items:center;justify-content:center;width:100%;height:44px;line-height:44px;cursor:pointer; color: #888;}
.seg3-btn:hover{color:var(--pk-primary)}
.seg3-btn[aria-selected="true"]{color:#fff}
@media (prefers-reduced-motion: reduce){.seg3-thumb{transition:none}}

/* responsive rules */
@media (max-width:639px){
  .sr{grid-template-columns:1fr;row-gap:14px}
  .sr-center{display:flex;flex-direction:column;align-items:center;gap:12px}
  .seg3{width:auto;min-width:0;justify-self:center;height:40px}
  .seg3-btn{font-size:13px;height:30px;line-height:32px}
  .pk-search input{height:36px;font-size:14px;padding:0 48px 0 40px}
  .pk-search-icon{left:12px}
  .pk-search .clear-btn{right:14px}
}

@media (min-width:640px){
  .seg3{height:48px}
  .seg3-btn{height:40px;line-height:40px;font-size:13px}
}

@media (min-width:640px) and (max-width:1023px){
  :root{--sr-max:1000px}
  .sr{grid-template-columns:1fr minmax(0,var(--sr-max)) 1fr; column-gap:0px}
  .sr-center{grid-column:2; display: flex; flex-direction: column; align-items: center; gap: 12px;}
  .sr .seg3{justify-self:center}
  .sr .pk-search{justify-self:stretch;width:100%}
}

@media (min-width:1024px){
  :root{--sr-max:1200px}
  .sr{grid-template-columns:1fr minmax(0,var(--sr-max)) 1fr}
  .sr-center{grid-column:2; display: flex; flex-direction: column; align-items: center; gap: 12px;}
  .sr .seg3{justify-self:start}
  .sr .pk-search{justify-self:center; width:100%}
}

@media (min-width:1280px){
  :root{--sr-max:1180px; --search-max:900px}
  .sr{grid-template-columns:1fr minmax(0,var(--sr-max)) 1fr}
  .sr-center{grid-column:2;max-width:var(--sr-max);width:100%}
}


/* A minimal overrides */
.menu-grid .menucard{border:1px solid rgba(15,23,42,.08) !important;box-shadow:0 2px 8px rgba(15,23,42,.04) !important}
.menu-icon-slot img{filter:saturate(.9) contrast(1.05)}

/* === 섹션별 스타일 (templates.js에서 사용) === */

/* 섹션 제목 및 헤더 */
.section-head{margin-left:auto; margin-right:auto; max-width:1200px; padding-left:1.25rem; padding-right:1.25rem; display:flex; align-items:flex-end; justify-content:space-between}
.section-title{margin:0; font-size:1.125rem; font-weight:600; letter-spacing:0; line-height:2.25}
@media (min-width:768px){
  .section-title{font-size:1.25rem}
}
@media (min-width:1024px){
  .section-title{font-size:1.375rem}
}

/* 섹션 구분선 */
.section-divider{margin-left:auto; margin-right:auto; max-width:1200px; padding-left:1.25rem; padding-right:1.25rem; padding-top:3rem; padding-bottom:3rem}
.section-divider > *{height:1px; width:100%; border-radius:9999px; background:#e2e8f0}
.section-divider.subtle > *{background:#f1f5f9}

/* 히어로 섹션 */
.hero-section{position:relative; isolation:auto}
.hero-container{margin-left:auto; margin-right:auto; max-width:1200px;}
.hero-box{border-radius:.625rem; overflow:hidden; position:relative; background:#fff; aspect-ratio:24/10}
@media (min-width:1024px){
  .hero-box{aspect-ratio:29/10}
}
@media (max-width:768px){
  .hero-box{aspect-ratio:22/10}
}
@media (max-width:500px){
  .hero-box{aspect-ratio:16/10}
}

/* 검색 행 */
.search-row{margin-left:auto; margin-right:auto; width: 50%; max-width:800px; margin-top:1rem; margin-bottom:1.875rem}
@media (max-width:1400px){
  .search-row{width: 65%;}
}
@media (max-width:1024px){
  .search-row{width: 80%;}
}
@media (max-width:768px){
  .search-row{width: 100%; margin-top:1.5rem; margin-bottom:2rem; padding-left: 1.25rem; padding-right: 1.25rem;}
}


/* 메뉴 행 */
.menu-row{margin-left:auto; margin-right:auto; width: 50%; max-width:800px; margin-bottom:1.5rem}
@media (max-width:1400px){
  .menu-row{width: 65%;}
}
@media (max-width:1024px){
  .menu-row{width: 80%;}
}
@media (max-width:768px){
  .menu-row{width: 100%; margin-bottom:1.5rem; padding-left: 1.25rem; padding-right: 1.25rem;}
}

/* 그리드 컨테이너 */
.grid-container{margin-left:auto; margin-right:auto; max-width:1200px; padding-left:1.25rem; padding-right:1.25rem; margin-top:0.75rem}
.grid{align-items: flex-start;}

/* 목록 헤드 (ListView, SearchResults) */
.list-head{margin-left:auto; margin-right:auto; max-width:1200px; padding-left:1.25rem; padding-right:1.25rem; display:flex; align-items:flex-end; justify-content:space-between}
.list-title{margin:0; font-size:1.125rem; font-weight:600; letter-spacing:0; line-height:2.25}
@media (min-width:768px){
  .list-title{font-size:1.25rem}
}
@media (min-width:1024px){
  .list-title{font-size:1.375rem}
}

/* 빈 상태 (empty state) */
.empty-state-container{display:flex; align-items:center; justify-content:center}
.empty-state{text-align:center; border-radius:1.5rem; border:1px solid #e2e8f0; background:rgba(255,255,255,0.7); padding:1.5rem; max-width:560px; width:100%; box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.empty-icon{margin-left:auto; margin-right:auto; margin-bottom:0.75rem; display:flex; height:3rem; width:3rem; align-items:center; justify-content:center; border-radius:9999px; background:#f1f5f9; color:#9ca3af}
.empty-icon svg{width:1.375rem; height:1.375rem}
.empty-title{font-size:0.9375rem; font-weight:600}
@media (min-width:768px){
  .empty-title{font-size:1rem}
}
.empty-desc{margin-top:0.25rem; font-size:0.75rem; color:#a1a5af}
@media (min-width:768px){
  .empty-desc{font-size:0.8125rem}
}

/* PK 히어로 이미지 래퍼 스타일 (pk-hero-img) */
.pk-hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:.625rem;
  border: 1px solid #e5e7eb;
}

/* Align hospital cards with main4 (pk-results context) */
.pk-results .card{
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.pk-results .card-head{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--thumb-border, #e6e7ea);
  border-radius:12px;
}
.pk-results .card-head .card-logo{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:1/1;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.pk-results .card-head img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
}
.pk-results .card-body{
  padding-top:10px;
}

/* Surgeries card (pk-results) align to main4 */
.pk-results .card{
  width:100%;
}
.pk-results .surgery-card{
  border:1px solid var(--pk-line, #e5e7eb);
  border-radius:12px;
  background:#fff;
  padding:.75rem 1rem;
}

/* Hospital card logo wrapper (align with main4) */
.card-head{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.card-head .card-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1/1;
  padding:0;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(229,231,235,.6);
  box-sizing:border-box;
  position:relative;
  }
.card-head .card-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card-head{
  position:relative;
}
.card-head .fav-btn{
  position:absolute;
  top:10px;
  right:10px;
  background:#fff;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(15,23,42,.08);
}
.badge-sameprice{
  position:absolute;
  top:12px;
  left:12px;
  padding:6px 8px;
  background:#d94150;
  color:#fff;
  font-size:12px;
  font-weight:700;
  border-radius:8px;
  line-height:1;
  z-index:1;
}

/* Search section titles (pk-results) */
.pk-sec{
  padding: 0 0 1.25rem;
}
.pk-sec-head{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0 auto 0.75rem;
  max-width:1200px;
  padding:0 1.25rem;
}
.pk-sec-head h3{
  margin:0;
  font-size:1rem;
  font-weight:800;
  letter-spacing:-0.01em;
  color:#111827;
  position:relative;
  padding-right:10px;
}
.pk-sec-head h3::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--pk-primary,#CE8892) 0%, rgba(206,136,146,0.15) 100%);
  opacity:.6;
}
.pk-sec-head .label-accent{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.22rem .65rem;
  border-radius:999px;
  background:rgba(49,82,126,0.06);
  color:var(--pk-primary,#31527E);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:0.01em;
}
.pk-sec-body{
  max-width:1200px;
  margin:0 auto;
  padding:0 1.25rem;
}